Q: ES Modules과 CommonJS의 차이점은?

**CommonJS (CJS):** ```js // 내보내기 module.exports = { add }; // 가져오기 const { add } = require('./math'); ``` - Node.js의 기본 모듈 시스템 - **동기적** 로딩 (런타임에 실행) - `require()`는 어디서든 호출 가능 (조건부 로딩 가능) **ES Modules (ESM):** ```js // 내보내기 export function add(a, b) { return a + b; } // 가져오기 import { add } from './math.js'; ``` - ECMAScript 표준 모듈 시스템 - **비동기적** 로딩 가능 - `import`/`export`는 반드시 최상위에 위치 **핵심 차이:** | | CommonJS | ES Modules | |---|---|---| | 로딩 시점 | 런타임 (동기) | 파싱 시점 (정적 분석) | | Tree Shaking | 불가 |

Question 1

클로저(Closure)란 무엇인가요?

Accepted Answer

클로저는 함수가 선언될 때의 렉시컬 환경(Lexical Environment)을 기억하여, 함수가 자신의 스코프 밖에서 실행되더라도 그 환경에 접근할 수 있는 기능입니다.

```javascript
function createCounter() {
  let count = 0; // 외부 함수의 변수

return {
    increment: () => ++count,
    getCount: () => count,
  };
}

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
counter.getCount();  // 2
// count 변수는 직접 접근 불가 → 데이터 은닉
```

- **데이터 은닉**: private 변수를 만들 수 있습니다.
- **상태 유지**: 함수 호출 간에 상태를 유지합니다.
- **주의점**: 클로저가 참조하는 변수는 GC되지 않으므로 메모리

Question 2

Promise와 async/await의 차이점을 설명해주세요.

Accepted Answer

Promise는 비동기 작업의 결과를 나타내는 객체이고, async/await는 Promise를 더 직관적으로 사용하는 문법적 설탕(syntactic sugar)입니다.

```javascript
// Promise 체이닝
function fetchData() {
  return fetch('/api/data')
    .then(res => res.json())
    .then(data => {
      console.log(data);
      return data;
    })
    .catch(err => console.error(err));
}

// async/await (동일한 동작)
async function fetchData() {
  try {
    const res = await fetch('/api/data');
    const data = await res.json();
    console.log(data);
    return data;
  }

Question 3

이벤트 루프(Event Loop)의 동작 원리를 설명해주세요.

Accepted Answer

이벤트 루프는 JavaScript의 단일 스레드 환경에서 비동기 작업을 처리하는 메커니즘입니다.

**실행 순서:**
1. **Call Stack**: 동기 코드가 실행되는 곳
2. **Microtask Queue**: Promise, MutationObserver (우선 실행)
3. **Macrotask Queue**: setTimeout, setInterval, I/O

```javascript
console.log('1'); // 동기

setTimeout(() => console.log('2'), 0); // Macrotask

Promise.resolve().then(() => console.log('3')); // Microtask

console.log('4'); // 동기

// 출력 순서: 1, 4, 3, 2
```

- Call Stack이 비면 Microtask Queue를 먼저 모두 처리합니다.
- Microtask가 모두 처리된 후 Macrotask를 하나 실

Question 4

var, let, const의 차이점은 무엇인가요?

Accepted Answer

세 가지 변수 선언 키워드는 스코프, 호이스팅, 재할당 측면에서 차이가 있습니다.

| 특성 | var | let | const |
|------|-----|-----|-------|
| 스코프 | 함수 | 블록 | 블록 |
| 호이스팅 | O (undefined) | O (TDZ) | O (TDZ) |
| 재선언 | O | X | X |
| 재할당 | O | O | X |

```javascript
// var: 함수 스코프, 호이스팅 시 undefined
console.log(a); // undefined
var a = 1;

// let: 블록 스코프, TDZ(Temporal Dead Zone)
console.log(b); // ReferenceError
let b = 2;

// const: 값 재할당 불가, 하지만 객체의 속성은 변경 가능
const obj = { name: 'Kim' };
obj.name = 'Lee'; // OK
obj = {};          // E

Question 5

JavaScript에서 this는 어떻게 결정되나요?

Accepted Answer

`this`는 함수가 **호출되는 방식**에 따라 동적으로 결정됩니다.

```javascript
// 1. 일반 함수 호출 → window(전역) 또는 undefined(strict)
function show() { console.log(this); }
show(); // window (non-strict)

// 2. 메서드 호출 → 해당 객체
const obj = { name: 'Kim', show() { console.log(this.name); } };
obj.show(); // 'Kim'

// 3. 생성자 호출 → 새 인스턴스
function User(name) { this.name = name; }
const user = new User('Lee'); // this → user 인스턴스

// 4. call/apply/bind → 명시적 바인딩
show.call({ name: 'Park' }); // this → { name: 'Park' }

// 5. 화살표 함수

Question 6

프로토타입(Prototype)과 프로토타입 체인을 설명해주세요.

Accepted Answer

JavaScript는 프로토타입 기반 언어로, 객체는 다른 객체를 프로토타입으로 참조하여 속성과 메서드를 상속받습니다.

```javascript
function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  return \`안녕하세요, \${this.name}입니다.\`;
};

const kim = new Person('Kim');
kim.greet(); // '안녕하세요, Kim입니다.'

// 프로토타입 체인
// kim → Person.prototype → Object.prototype → null
console.log(kim.hasOwnProperty('name')); // true
// hasOwnProperty는 Object.prototype에서 찾음
```

- 객체에서 속성을 찾을 때 자신 → 프로토타입 → 프로토타입의 프로토타입 순으로 탐색합니다.
- `__proto__`

Question 7

map, filter, reduce의 차이점과 사용 예시를 알려주세요.

Accepted Answer

세 메서드 모두 배열을 순회하며 새로운 결과를 반환하는 고차 함수입니다. 원본 배열을 변경하지 않습니다.

```javascript
const numbers = [1, 2, 3, 4, 5];

// map: 각 요소를 변환하여 새 배열 반환
const doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8, 10]

// filter: 조건에 맞는 요소만 새 배열로 반환
const evens = numbers.filter(n => n % 2 === 0);
// [2, 4]

// reduce: 배열을 하나의 값으로 축소
const sum = numbers.reduce((acc, n) => acc + n, 0);
// 15

// 조합 사용 예시
const result = numbers
  .filter(n => n > 2)     // [3, 4, 5]
  .map(n => n * 10)       // [30, 40, 50]
  .reduce((a

Question 8

깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy)의 차이점은?

Accepted Answer

**얕은 복사(Shallow Copy):**
1단계 프로퍼티만 복사합니다. 중첩 객체는 참조를 공유합니다.
```js
const original = { a: 1, nested: { b: 2 } };
const shallow = { ...original };
shallow.nested.b = 99;
console.log(original.nested.b); // 99 — 참조 공유!
```
- 방법: `{ ...obj }`, `Object.assign()`, `Array.prototype.slice()`

**깊은 복사(Deep Copy):**
모든 단계의 프로퍼티를 새로 생성합니다. 완전히 독립된 복사본입니다.
```js
const original = { a: 1, nested: { b: 2 } };
const deep = structuredClone(original);
deep.nested.b = 99;
console.log(original.nested.b); // 2 — 독립!
`

Question 9

Generator와 Iterator 패턴을 설명하고 실무 활용 예시를 들어주세요.

Accepted Answer

Iterator는 순회 프로토콜, Generator는 Iterator를 쉽게 만드는 특수 함수입니다.

**Iterator Protocol:**
```javascript
const range = {
  [Symbol.iterator]() {
    let current = 1;
    return {
      next() {
        return current <= 5 ? { value: current++, done: false } : { done: true };
      }
    };
  }
};
for (const n of range) console.log(n); // 1,2,3,4,5
```

**Generator Function:**
```javascript
function* fibonacci() {
  let [a, b] = [0, 1];
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}
const fib

Question 10

ES Modules과 CommonJS의 차이점은?

Accepted Answer

**CommonJS (CJS):**
```js
// 내보내기
module.exports = { add };
// 가져오기
const { add } = require('./math');
```
- Node.js의 기본 모듈 시스템
- **동기적** 로딩 (런타임에 실행)
- `require()`는 어디서든 호출 가능 (조건부 로딩 가능)

**ES Modules (ESM):**
```js
// 내보내기
export function add(a, b) { return a + b; }
// 가져오기
import { add } from './math.js';
```
- ECMAScript 표준 모듈 시스템
- **비동기적** 로딩 가능
- `import`/`export`는 반드시 최상위에 위치

**핵심 차이:**
| | CommonJS | ES Modules |
|---|---|---|
| 로딩 시점 | 런타임 (동기) | 파싱 시점 (정적 분석) |
| Tree Shaking | 불가 |

JavaScript

01클로저(Closure)란 무엇인가요?보통스코프/클로저

02Promise와 async/await의 차이점을 설명해주세요.보통비동기

03이벤트 루프(Event Loop)의 동작 원리를 설명해주세요.보통이벤트

04var, let, const의 차이점은 무엇인가요?쉬움타입

05JavaScript에서 this는 어떻게 결정되나요?보통this

06프로토타입(Prototype)과 프로토타입 체인을 설명해주세요.보통프로토타입

07map, filter, reduce의 차이점과 사용 예시를 알려주세요.쉬움배열

08깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy)의 차이점은?보통객체

09Generator와 Iterator 패턴을 설명하고 실무 활용 예시를 들어주세요.어려움고급

10ES Modules과 CommonJS의 차이점은?보통모듈