Question 1

requestAnimationFrame의 동작 원리와 최적 활용법을 설명해주세요.

Accepted Answer

requestAnimationFrame(rAF)은 브라우저 **렌더링 사이클에 동기화**된 애니메이션 API입니다.

```javascript
// 기본 애니메이션 루프
function animate(timestamp) {
  // timestamp: 페이지 로드 후 경과 시간 (ms)
  element.style.transform = `translateX(${timestamp * 0.1}px)`;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

// 프레임 레이트 제한 (30fps)
let lastTime = 0;
function animate30fps(timestamp) {
  if (timestamp - lastTime >= 33.33) { // 1000/30
    update();
    lastTime = timestamp;
  }
  requestAnimationFrame(animate30fps)

Question 2

Symbol의 용도와 Well-known Symbols를 설명해주세요.

Accepted Answer

Symbol은 **고유하고 변경 불가능한 원시 타입**으로, 주로 객체 속성의 키로 사용됩니다.

**기본 사용:**
```javascript
const id = Symbol('id');
const user = { [id]: 123, name: 'Kim' };

user[id]; // 123
Object.keys(user); // ['name'] — Symbol 키는 열거되지 않음
```

**Well-known Symbols (내장 심볼):**
```javascript
// Symbol.iterator — 객체를 iterable로 만들기
class Range {
  constructor(start, end) { this.start = start; this.end = end; }
  [Symbol.iterator]() {
    let current = this.start;
    const end = this.end;
    return {
      next() {

Question 3

자바스크립트에서 객체란 무엇인가요?

Accepted Answer

객체는 **키(문자열 또는 Symbol)와 값의 쌍(property)을 담는 컬렉션**이며, JavaScript에서 원시 타입이 아닌 모든 것이 객체입니다. 배열, 함수, 날짜, 정규식 모두 객체입니다.

## 생성 방법

```js
const a = { name: '단우' };              // 객체 리터럴 (기본)
const b = Object.create(protoObj);        // 프로토타입 지정
const c = new Person('단우');             // 생성자 함수/클래스
```

## 프로퍼티 접근

```js
obj.name          // 점 표기 — 식별자 규칙을 따르는 키만
obj['first-name'] // 대괄호 — 동적 키, 특수문자 키
obj?.a?.b         // 옵셔널 체이닝 (ES2020)
```

## 키의 타입 — 흔한 함정

객체 키는 **문자열 또는 Symbol만** 가능합니다. 다른 값을 넣으

Question 4

호이스팅이란 무엇인가요?

Accepted Answer

호이스팅(Hoisting)은 **변수·함수 선언이 코드 실행 전에 스코프 최상단으로 끌어올려진 것처럼 동작하는 현상**입니다.

**실제로 코드가 이동하지는 않습니다.** 자바스크립트 엔진이 실행 컨텍스트를 생성하는 **평가 단계**에서 스코프 내 모든 선언을 먼저 스캔해 렉시컬 환경에 등록하기 때문에 그렇게 보이는 것입니다.

## 선언 방식별 동작

```js
console.log(a);  // undefined  ← 선언은 끌어올려지고 undefined로 초기화
var a = 1;

console.log(b);  // ❌ ReferenceError: Cannot access 'b' before initialization
let b = 1;

foo();           // ⭕ "hi" — 함수 선언문은 전체가 호이스팅
function foo() { console.log('hi'); }

bar();           // ❌ TypeError: bar is not a fun

Question 5

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

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 6

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 7

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

Accepted Answer

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

## 차이 전체 정리

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

Question 8

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

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

11requestAnimationFrame의 동작 원리와 최적 활용법을 설명해주세요.보통애니메이션

12Symbol의 용도와 Well-known Symbols를 설명해주세요.보통고급

13자바스크립트에서 객체란 무엇인가요?보통객체

14호이스팅이란 무엇인가요?보통스코프/클로저

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

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

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

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