JavaScript Koans

spread/rest문법

 

spread 문법

:주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용

:요소를 펼쳐서 넣어주는 것

:기존 배열을 변경하지 않음(immutable)

:obj1과 obj2의 키가 같을 경우, 값이 덮어 씌워짐. 그렇지 않은 경우, 각각의 키와 값이 모두 전달됨(객체)

let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };

let mergedObj = { ...obj1, ...obj2 };

 

 

rest문법

:파라미터를 배열의 형태로 받아서 사용할 수 있음. 파라미터 개수가 가변적일때 유용.

 

 

구조분해할당

:spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정.

 

분해 후 새 변수에 할당

-객체에서 구조 분해 할당을 사용하는 경우, 선언(const, let, var)과 함께 사용하지 않으면 에러 발생할 수 있음.

 

 

---

*호이스팅

:인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것. 

var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화. let과 const로 선언한 변수의 경우

호이스팅 시 변수를 초기화하지 않음. 

"변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것"

->변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있음. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨. 

 

*this

:대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정.  실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있음. ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했고, ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가.(이는 렉시컬 컨텍스트안의 this값을 유지).

but, 화살표 함수는 자신의 this가 없음.

여기서 this는 자신을 감싼 정적 범위(lexical context), 전역에서는 전역 객체를 가리킴.

 

:객체 안에 있는 함수를 메소드라고 하는데, this는 메소드안에서 쓰이면 그 함수를 품고있는 객체 그 자체를 의미.

메소드를 호출하는 시점에서 가져옴.

 

*lexical scope

:js에서 함수가 불려지는 위치가아니라 함수가 생성되는 위치에 따라서만 결정됨.

 

*Object.keys(): 키들을 배열로 반환

 

*원시 자료형은 stack에 저장되고 참조 자료형은 heap에 저장

 

*얕은 복사와 깊은 복사

 

얕은복사

:참조자료형 안에 참조자료형 복사하면 한 차원 아래에 있는 애들은 주소값을 공유

 

깊은복사

 

*deep.equal() :모양만 비교, 주소값은 비교하지 않음.

 

*arr.length === 0

->빈배열 확인