Question 1

동등 연산자(==)와 일치 연산자(===)의 차이점은 무엇인가요?

Accepted Answer

- **`===` (일치, strict equality)** — 타입과 값을 **둘 다** 비교. 타입이 다르면 즉시 `false`
- **`==` (동등, loose equality)** — 타입이 다르면 **암묵적 형변환 후** 비교

```js
1 === '1'   // false
1 ==  '1'   // true  — '1'이 1로 변환됨
```

## `==`의 형변환 규칙 (요약)

1. 타입이 같으면 `===`와 동일
2. `null == undefined` → **true** (서로에게만, 다른 값과는 false)
3. number vs string → 문자열을 숫자로
4. boolean이 있으면 → boolean을 숫자로 (`true`→1, `false`→0)
5. object vs primitive → 객체를 `ToPrimitive`로 변환(`valueOf` → `toString`)

## 악명 높은 결과들

```js
0 == ''            // tr

Question 2

스코프 체인이란 무엇인가요?

Accepted Answer

스코프 체인(Scope Chain)은 **식별자를 찾을 때 현재 스코프에서 시작해 상위 스코프로 거슬러 올라가는 단방향 연결 구조**입니다.

## 스코프의 종류

```js
const global = 'G';                  // 전역 스코프

function outer() {
  const fn = 'F';                    // 함수 스코프
  if (true) {
    let block = 'B';                 // 블록 스코프 (let/const/class)
    var hoisted = 'V';               // ⚠️ var는 블록을 무시 → 함수 스코프
  }
  console.log(block);                // ReferenceError
  console.log(hoisted);              // 'V'
}
```

- **함수 스코프** — `var`, 함수 선언
- **블록

Question 3

실행 컨텍스트를 들어 본 적 있나요?

Accepted Answer

실행 컨텍스트(Execution Context)는 **JavaScript 코드가 실행되기 위해 필요한 환경 정보를 담은 객체**입니다. 호이스팅·스코프·클로저·`this`가 왜 그렇게 동작하는지를 하나로 설명하는 개념입니다.

## 종류 3가지

1. **전역 실행 컨텍스트(GEC)** — 프로그램 시작 시 1개 생성
2. **함수 실행 컨텍스트(FEC)** — 함수가 **호출될 때마다** 생성
3. **eval 실행 컨텍스트** — 실무에서는 사용하지 않음

## 콜 스택

실행 컨텍스트는 **스택(LIFO)**으로 관리됩니다.

```js
function a() { b(); }
function b() { console.log('b'); }
a();
```

```
[ b EC ]  ← 실행 중
[ a EC ]
[ Global EC ]
```

b가 끝나면 pop되고 a로 돌아갑니다. 재귀가 끝나지 않으면 이 스택이 넘쳐 `RangeError: Maximum call stack s

Question 4

JavaScript에서 클래스를 사용하는 이유는 무엇인가요?

Accepted Answer

`class`(ES6)는 **프로토타입 기반 상속을 감싼 문법 설탕(syntactic sugar)**입니다. 새로운 객체지향 모델을 추가한 것이 아니라, 기존 프로토타입 패턴을 더 명확하게 쓰도록 만든 것입니다.

## 사용하는 이유

**1. 가독성과 의도 표현**

```js
// ES5 프로토타입 방식
function Person(name) { this.name = name; }
Person.prototype.greet = function () { return 'hi ' + this.name; };
function Student(name, school) { Person.call(this, name); this.school = school; }
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

// class 방식
class Person {
  construct

Question 5

일반 함수와 화살표 함수의 가장 큰 차이점은 무엇입니까?

Accepted Answer

**가장 큰 차이는 `this` 바인딩입니다.** 일반 함수는 **호출 시점**에 `this`가 동적으로 결정되지만, 화살표 함수는 **자신의 `this`를 갖지 않고** 선언된 위치의 상위 스코프에서 렉시컬하게 가져옵니다.

## 차이 전체 정리

| 항목 | 일반 함수 | 화살표 함수 |
| --- | --- | --- |
| `this` | 호출 방식에 따라 동적 결정 | **상위 스코프에서 렉시컬 참조** |
| `arguments` | ⭕ | ❌ (나머지 매개변수 `...args` 사용) |
| `new` 생성자 | ⭕ | ❌ TypeError |
| `prototype` 프로퍼티 | ⭕ | ❌ |
| `super` | 메서드에서 사용 가능 | 자체 없음 (상위에서 참조) |
| 호이스팅 | 선언문은 전체 호이스팅 | 변수 규칙(TDZ) |
| 제너레이터 | `function*` 가능 | ❌ |
| `call/apply/bind`로 `this` 변경 | ⭕ | **❌ 무시됨

Question 6

스프레드 문법과 레스트 문법의 차이점은 무엇인가요?

Accepted Answer

**같은 `...` 기호지만 방향이 정반대입니다.**

- **스프레드(Spread)** — 이터러블/객체를 **펼쳐서 개별 요소로 흩뿌림** (묶음 → 낱개)
- **레스트(Rest)** — 흩어진 값들을 **하나로 모음** (낱개 → 묶음)

**구분법: 할당의 왼쪽(매개변수·구조분해 대상)에 있으면 레스트, 오른쪽(값·인자 자리)에 있으면 스프레드입니다.**

## 스프레드

```js
// 배열 복사·병합
const merged = [...a, ...b];
const copy = [...arr];                   // 얕은 복사

// 함수 인자로 펼치기
Math.max(...[1, 5, 3]);                  // Math.max(1, 5, 3)

// 객체 병합 — 뒤에 오는 값이 이김
const next = { ...state, count: 1 };

// 이터러블 → 배열
[...'abc']

Question 7

불변성이란 무엇이고, 자바스크립트에서 중요한 이유는 무엇인가요?

Accepted Answer

불변성(Immutability)은 **생성된 데이터를 변경하지 않고, 변경이 필요하면 새 데이터를 만드는** 원칙입니다.

## JS에서 왜 문제가 되는가

원시 타입은 이미 불변이지만, **객체와 배열은 가변(mutable)이며 참조로 공유**됩니다.

```js
const a = { n: 1 };
const b = a;
b.n = 2;
a.n;        // 2 — 의도치 않은 원격 변경(side effect)
a === b;    // true — 참조가 같아 "바뀐 걸 감지할 수 없음"
```

## 중요한 이유 4가지

**1. 변경 감지가 O(1)이 됩니다 — 프론트엔드에서 가장 중요**

React·Redux·Zustand·Jotai는 모두 **얕은 비교(`Object.is`)**로 리렌더 여부를 판단합니다.

```js
// ❌ 원본 변경 — 참조가 그대로라 React가 변화를 못 알아챔
state.items.push(newItem);
setState(state.i

JavaScript

21동등 연산자(==)와 일치 연산자(===)의 차이점은 무엇인가요?쉬움타입

22스코프 체인이란 무엇인가요?보통스코프/클로저

23실행 컨텍스트를 들어 본 적 있나요?어려움실행 컨텍스트

24JavaScript에서 클래스를 사용하는 이유는 무엇인가요?보통객체

25일반 함수와 화살표 함수의 가장 큰 차이점은 무엇입니까?보통함수

26스프레드 문법과 레스트 문법의 차이점은 무엇인가요?쉬움문법

27불변성이란 무엇이고, 자바스크립트에서 중요한 이유는 무엇인가요?보통함수형