[JS Q.R 스터디] 2번째 모임 질문 QnA

최종 수정 : 2024-04-18

JS Q.R 질문 QnA

1. 변수가 필요한 이유는 무엇이며, 값이 재할당 될 경우 자바스크립트 엔진은 어떤 일을 수행하나요?

-> 변수는 값이 저장되는 위치를 가리키는 값에 대한 이름이다. 값들을 구분하기 위한 식별자라고도 부른다. 값이 재할당되면, 기존에 가리켰던 값은 사용하지 않게 되므로, 자바스크립트 엔진은 가비지 콜렉터로 메모리에서 자동 해제한다. 하지만 언제 해제될지는 예측할 수 없다..

---

2. var, let, const 키워드로 선언한 변수들의 특징은 무엇인가요?

-> var 키워드로 선언한 변수는 함수 레벨 스코프를 갖으며, 변수의 호이스팅이 발생한다. 또한, 변수의 선언과 초기화가 별도로 이루어지며, 처음 선언됐을 때는 undefined가 할당된다. 이후에 초기화 과정을 통해 값이 변경된다. 즉, 순식간에 재할당이 이루어지는 것이다. var 키워드로 선언한 변수는 중복 할당이 가능해 안정성이 떨어진다.

 

-> let 키워드로 선언한 변수는 블록 레벨 스코프를 갖는다. 변수 선언과 초기화가 따로 일어나며, 그 사이를 TDZ라고 부른다.  재할당이 가능하며, 블록 레벨 스코프 안에서는 변수 호이스팅이 일어난다.

 

-> const 키워드로 변수를 선언할 때는 초기화가 반드시 동시에 일어나야 한다. 그렇지 않으면 에러가 발생한다. const는 상수로 재할당이 불가능하다. 단, 객체로 선언될 경우에는 참조값을 변경하여 요소의 내용을 바뀔 수 있다.

---

3. spread 문법과 rest parameter의 역할과 차이점은 무엇인가요?

둘 다 ...으로 나타내 사용방식은 동일하지만, 기능은 서로 반대이다.

spread문법

즉 전개구문은 요소들을 펼치는 기능을 수행한다. 배열과 객체의 요소를 반복문을 통해 요소를 꺼내지 않아도 되는 편리함을 경험할 수 있다. 또한 배열을 합칠 때에도 편리하다. 하지만 스프레드 문법의 결과물은 값으로 사용할 수 없다. 

console.log(...[1, 2, 3]); // 1 2 3
console.log(...'Hello'); // h e l l o

 

rest parameter

함수의 파라미터들을 묶어 배열의 형태로 전달 받는다.

function foo(...rest) {
  console.log(rest); // 1, 2, 3 -> [1, 2, 3]
}

[1, 2, 3] -> 1, 2, 3
foo(...[1, 2, 3]);

---

4. 이터러블과 이터레이터의 차이점은 무엇인가요?

이터러블

이터러블 프로토콜을 준수한 객체이며, Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접구현하거나 프로토타입 체인을 통해 상속받은 객체이다. 일반 객체도 이터러블 프로토콜을 준수하도록 구현하면, 이터러블이 된다.

// 배열, 문자열, Map, Set
isIterable([]); // true
isIterable(''); // true
isIterable(new Map()); // true
isIterable(new Set()); // true
isIterable({}); // false

 

이터레이터

이터러블의 Symbol.iterstor 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 반환된 이터레이터는 next 메서드를 갖는다. next 메서드는 이터러블의 각 요소를 순회하기 위한 포인터의 역할을 한다. 즉, 이터러블을 순차적으로 한 단계식 순회하며 순회 결과를 나타내는 이터레이터 리젝트 객체(ilterator result object)를 반환한다.

const array = [1, 2, 3]
const iterator = array[Symbol.iterator]();

// 이터레이터 리절트 객체는 value와 done 프로퍼티를 갖는 객체다.
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

5. 변수와 식별자의 차이는 무엇이고, 변수의 생명주기는 어떻게 결정되나요?

-> 변수는 값과 변수명(식별자)가 결합된 상태를 의미한다. 식별자는 어디까지나 값을 가리키는 이름에 불과하다.

-> 변수의 생명주기는 스코프에 따라 결정된다. var, let, const 키워드에 따라 변수의 생명주기가 결정된다.

---

JS Q.R 모임 질문