[Day 15] Koans 과제

오늘 배운 것

함수 호이스팅이란, 아직 함수 선언문이 실행되기도 이전인데 마치 함수가 선언된 것 처럼 호출해서 사용할 수 있는 현상을 의미한다. 실제로 함수와 변수를 스코프의 최상단으로 끌어 올리는 것은 아니다. (그렇게 보이는 것임!)
함수 호이스팅이 발생하는 이유는, 자바스크립트 언어에서는 인터프리터가 코드 실행 전 변수와 함수의 메모리 공간을 미리 할당해두기 때문이다. 이런 정보들을 미리 알고 있기 때문에, 아직 선언이 되지 않은 시점이어도 아! 이 함수가 존재하는구나! 하고 사용할 수 있게 되는 것이다.
함수 호이스팅의 대상은 var로 선언된 변수와 함수 선언문이며, let, const 선언과 함수 표현식은 호이스팅의 대상이 아니다.
함수 선언문은 초기화 과정에서 실제 함수 값이 할당되고, var 로 선언된 변수의 경우는 선언과 초기화가 동시에 진행되므로, undefined로 초기화 된다. 다만 let과 const는 선언문을 만나기 이전까지는 초기화가 되지 않는 TDZ가 존재하고, 함수 표현식은 변수의 호이스팅 방식을 따르기 때문에 함수 호이스팅에 해당되지 않는다.

문제 중 객체의 length 를 묻는 문제가 있었는데, 처음에는 이상한 부분이 어디인지 몰랐다. 페어님께서 말씀해주신 설명을 듣고보니, length는 배열의 고유 프로퍼티이기 때문에 객체에서 그 길이를 알고자 한다면 Object.keys()등으로 해당 객체의 key 배열을 구해 그 배열의 length 를 구해야 한다.
따라서 객체 자체의 length 즉 obejct.length === undefined 이다.

this 가 지금까지도 이해되지 않는 가장 어려운 부분인 것 같다. 다른 프로그래밍 언어와 다르게 독특하게 작동된다고 하는데, 다른 언어에 대해선 잘 모르기 때문에 이해한 부분만 작성해 보려고 한다.
먼저 this 는 함수를 호출했을 때 각 함수에 생성되는 특별한 값이라고 한다. 만약 내가 어떤 객체의 메서드를 호출했는데 이 메서드에 this 가 포함되어 있다면, this는 메서드를 호출한 객체가 된다.
일반 함수에서의 this는 엄격 모드에서는 undefined 이고, 일반 모드에서는 window 전역객체이다. 또한 화살표 함수는 자신만의 this 값이 없는 대신 부모 스코프의 this를 가리킨다.
이벤트 리스터에서의 this가 가리키는 값은 해당 이벤트가 동작하고 있는 DOM 엘리먼트이다.
이렇게 어떻게 함수를 호출했느냐에 따라 this가 가리키는 값이 달라지는 것을 보니, mdn 에서 설명하는 내용 (대부분의 경우 this 의 값은 함수를 호출한 방법에 의해서 결정됩니다.) 이 조금은 이해가 된다.
이런 호출 방법에 상관없이 this 값을 직접 설정해줄 수 있는 메서드가 bind 메서드라고 한다. 이 메서드 부분에 대해서는 추가로 공부가 필요할 것 같다.

arguments 객체란, 모든 함수가 전달받은 인자 값을 모은 배열 형태의 객체이다. 처음에 객체라는 말만 듣고 키 : 밸류 쌍으로 구성되어 있다고 생각했는데, 그렇지 않았다.
arguments 객체는 함수가 어떤 파라미터도 가지고 있지 않아도, 함수 호출시 무언가 전달을 받았다면 arguments 객체의 요소가 된다. arguments 객체(배열)에서 Object.keys()로 키 값을 조회하면, 전달된 순서대로 인덱스가 리턴되고, value 는 요소 그 자체이다.

함수에서 ...args 와 같은 형태의 전개 연산자를 사용해 전달 인자를 받는다면, 이 때 ...agrs 는 배열이 되기 때문에 전달 인자의 개수가 정해져 있지 않아도 length 프로퍼티를 사용하는 등 유용하게 쓸 수 있다.
또 rest 패턴을 적용해 여러개의 전달인자 중 일부분만을 배열로 받을 수 있다.
만약 이렇게 ...args 와 같이 전달 인자를 받아올 때 전달된 내용이 없다면, undefined 가 아닌 그냥 빈 배열이 된다. (일반 매개변수는 전달 인자를 받지 못한 경우 undefined 가 되는 것과 차이가 있다. )

어제 오늘 자바스크립트 koans 라는 과제를 페어와 함께 진행했다.

koans 라는 단어는 결론을 내리기 전에, 이게 왜 맞는지 깊게 고민한다는 의미가 있다고 한다.

지금까지 배웠던 자바스크립트 개념을 한 번에 복습해 볼 수 있는 과제였고, 문제 구성이 굉장히 촘촘하고 고민을 할 수 밖에 없는 구조로 만들어져 있다. 또, Git을 사용해 제출하는 과제라 다시 CLI 로 Git을 활용해 볼 수 있어서 좋았다.