코딩 헬스장

1. Spread 문법 Spread 문법(Spread Syntax, ...)는 대상을 개별 요소로 분리한다. Spread 문법의 대상은 이터러블이어야 한다. * 이터러블? - 이터러블 프로토콜([for...of], [전개 연산자], [비구조화] ..등, 이터러블이나 이터레이터 프로토콜을 따르는 연산자들과 함께 동작하도록 하는 약속된 규약)을 준수한 객체를 이터러블이라 한다. 배열, 문자열, Map, Set이 있다. console.log(...[1,2,3]) // 1,2,3 console.log(...'Hello') // H e l l o console.log(...new Map([['a','1'],['b','2']])); // ['a','1'] ['b','2'] console.log(...new Set(..

1. sort() .sort()는 JS의 배열의 기본 함수로 말 그대로 정렬기능을 제공한다. 하지만 우리가 알고있는 정렬과 조금 다르다. 나의 경우 알고리즘 문제를 풀다 데이터를 정렬하는 로직에서 이상한 점을 느꼈다. 이와 같이 [123,23,3] 을 정렬하면 [3,23,123]이 나와야하는데, [123,23,3] 이 나온다. 구글링을 해보니 JS에서 배열의 sort() 함수는 배열 안 데이터들을 모두 문자열이라고 생각하고 정렬을 한다는 사실을 알았다. 2. 해결법 위 MDN 문서를 참고해보면, sort()함수 안의 람다 함수로 올바르게 정렬 할 수 있다. 즉 sort() 함수에서 두 값을 비교 시 리턴값에 따라 return -1 => a를 b보다 낮은 인덱스로 정렬 a, b return 0 => a, ..

1. JSX const element = Hello, world!; function App(){ return ( Helloreact ); } 위와 같은 코드는 아래와 같이 변환된다. (브라우저에서 실행 전 코드가 번들링되는 과정에서 바벨을 사용하여 일반 JS형태의 코드로 변환) function App(){ return React.createElement("div",null,"Hello",React.createElement("b",null,"react")); } * 바벨 ? 초기에는 ES6코드를 ES5코드로 변환해주는 컴파일러 역할을 하였고, 현재는 바벨을 이용해 JSX문법, TS 같은 정적 타입 언어, 제안 단계(정식문법이 아닌것들) 등을 사용 가능하게 해주고 있다. JSX는 JavaScript를 확장한..

1. Map( ) 맵은 키-값 쌍을 저장한다는 점에서 객체와 유사하나, 다양한 자료형을 허용한다는 점에서 차이가 있다. 객체와의 차이점. +) 객체는 기 값을 문자형으로 변환시키나, 맵은 키의 타입을 변환시키지 않음. 주요 메서드 new Map() ㅡ 맵을 만들기. map.set(key, value) ㅡ key에 value 값 저장. map.get(key) ㅡ key에 해당하는 값 반환, 없는 경우 undefined 반환. map.has(key) ㅡ key가 존재하면 true, 존재하지 않으면 false 반환. map.deletel(key) ㅡ key 값 및 해당 값 삭제. map.clear() ㅡ map 전체 요소 삭제. map.size ㅡ 요소의 전체 개수 반환. map.forEach() ㅡ 맵의 모..

1.불변성? 객체는 참조 형태로 값을 주고 받는데, 하나의 객체가 생성되고 그 값을 다른 객체들이 참조 하고 있다면 의도 하지 않은 값의 변형으로 문제가 발생하는 경우가 있을 수 있다. 보통 이런 경우 레퍼런스를 참조한 다른 객체에서 객체를 변경 하기 때문이다. 이와 같은 문제를 방지 하기 위해서는 불변의(immutable) 객체를 만들거나 객체 복사를 통해 새로운 객체를 생성 한 후 변경하는 것이 안전하다. let a = 10; let b = a; a = 20; console.log(a,b); //20 10 위 코드는 변수 a에 10을 할당하고, 변수 b는 a가 가리키는 주소를 가리킨다. 이때 a를 20으로 변경하면 a와 b모두 20이 아닌 a만 20으로 바뀌게된다. 이유는 Boolean, Numbe,..