[Frontend 면접 대비 시리즈] 자바스크립트 마스터 종합 가이드

[Frontend 면접 대비 시리즈] 자바스크립트 마스터 종합 가이드

 

javascript 코딩 경험이 많다면 다 겪어봤을 개념들 입니다. 정확한 명칭은 생각이 안나도 개념과 흐름은 어느정도 파악하고 있는분들께는 한번더 전체적인 개념 정립에 도움이 될것입니다.

 

면접에서 자주 등장하는 자바스크립트 개념을 정리하고, 실전에서 활용할 수 있도록 예제 코드와 설명을 제공합니다.

---

1. 메모리 관리

자바스크립트가 메모리를 어떻게 처리하는지 이해하면 최적화된 코드를 작성할 수 있습니다.

🔹 Hoisting (호이스팅)

변수와 함수 선언이 실행 컨텍스트 생성 단계에서 어떻게 끌어올려지는지 살펴봅니다.

console.log(x); // undefined
var x = 10;

sayHello(); // "Hello"
function sayHello() {
    console.log("Hello");
}

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 20;

console.log(add(1, 2)); // TypeError: add is not a function
var add = function(a, b) {
    return a + b;
};

📌 설명: 변수 선언은 호이스팅되지만 값 할당은 호이스팅되지 않기 때문에 undefined가 출력됩니다.

🔹 Lexical Scope (어휘적 스코프)

자바스크립트가 어휘적 환경에서 변수 접근성을 어떻게 결정하는지 이해하세요.

function outer() {
    var x = 10;
    function inner() {
        console.log(x); // 10
    }
    inner();
}
outer();

📌 설명: 내부 함수 inner는 자신을 포함하는 외부 스코프 outer의 변수 x에 접근할 수 있습니다.

반응형

🔹 Closures (클로저)

클로저는 함수가 부모 함수 실행 후에도 변수에 접근할 수 있도록 합니다.

function outerFunc() {
    var count = 0;
    return function() {
        count++;
        return count;
    };
}
var counter = outerFunc();
console.log(counter()); // 1
console.log(counter()); // 2

📌 설명: count 변수는 outerFunc가 종료된 후에도 counter 함수가 유지하면서 값을 증가시킬 수 있습니다.

🔹Scope & Closure Chaining (스코프 및 클로저 체이닝)

중첩 스코프의 개념과 클로저를 사용하여 private 변수와 캡슐화를 만드는 방법을 깊이 탐구하세요.

function outer() {
    var privateVar = "secret";
    return function inner() {
        return privateVar;
    };
}
var getSecret = outer();
console.log(getSecret()); // "secret"

설명: privateVar는 외부에서 직접 접근할 수 없으며, inner 함수를 통해서만 접근할 수 있어 캡슐화를 구현합니다.

---

2. 런타임 환경

자바스크립트 코드가 실행되는 방식을 이해하면 성능 최적화와 디버깅에 도움이 됩니다.

🔹 Execution Context (실행 컨텍스트)

자바스크립트 실행 컨텍스트 스택을 이해하고 코드가 어떻게 실행되는지 살펴보세요.

function outer() {
    console.log("Outer start");
    function inner() {
        console.log("Inner");
    }
    inner();
    console.log("Outer end");
}
outer();

📌 설명: outer가 실행되면 inner가 호출되고, 실행이 끝나면 컨텍스트가 스택에서 제거됩니다.

🔹 Event Loop (이벤트 루프)

이벤트 루프를 통해 비동기 작업이 어떻게 처리되는지 이해하세요.

console.log("Sync 1");
setTimeout(() => console.log("Async"), 0);
console.log("Sync 2");

📌 설명: 동기 코드가 먼저 실행되고, setTimeout의 콜백은 이벤트 루프를 통해 나중에 실행됩니다.

 

🔹 Microtask Queue (마이크로태스크 큐)

마이크로태스크 큐와 특정 작업이 다른 작업보다 우선적으로 처리되는 방식을 이해하세요.

Promise.resolve().then(() => console.log("Microtask"));
console.log("Sync");

설명: console.log("Sync")가 먼저 실행된 후, 마이크로태스크 큐에 있던 Promise.then()이 실행되면서 Microtask가 출력됩니다

 

🔹 Callback Queue (콜백 큐)

콜백이 자바스크립트에서 어떻게 처리되는지와 비동기 작업 관리를 위한 사용법을 탐구하세요.

setTimeout(() => console.log("Callback"), 0);
console.log("Sync");

설명: console.log("Sync")가 먼저 실행되고, setTimeout의 콜백은 콜백 큐를 통해 나중에 실행됩니다.

 

---

3. 비동기 처리

비동기 작업을 효율적으로 다루는 것은 프론트엔드 개발에서 매우 중요합니다.

🔹 Promises (프로미스)

const promise = new Promise((resolve) => {
    setTimeout(() => resolve("Done"), 1000);
});
promise.then((result) => console.log(result)); // "Done" after 1 second

📌 설명: 프로미스는 비동기 작업 완료 후 .then()을 사용하여 결과를 처리합니다.

 

🔹  Callbacks (콜백)

콜백은 비동기 코드의 흐름을 제어하는 중요한 개념입니다. 비동기 작업이 완료된 후 실행될 함수를 인자로 전달하여, 원하는 시점에 실행할 수 있도록 합니다.

✅ 예제 코드

function fetchData(callback) {
    setTimeout(() => callback("Data received"), 1000);
}
fetchData((data) => console.log(data)); // "Data received" after 1 second

📌 설명:

• fetchData 함수는 1초 후에 데이터를 가져오는 시뮬레이션을 합니다.
• setTimeout을 사용하여 1초 후 callback("Data received")을 실행합니다.
• fetchData를 호출할 때, 콜백 함수 (data) => console.log(data)를 전달하므로 1초 후 "Data received"가 출력됩니다.

 

🔹 Async/Await (비동기/대기)

async function fetchData() {
    const response = await new Promise((resolve) => {
        setTimeout(() => resolve("Data"), 1000);
    });
    console.log(response); // "Data" after 1 second
}
fetchData();

📌 설명: await를 사용하여 동기 코드처럼 비동기 처리를 쉽게 이해할 수 있습니다.

---

4. 객체 참조

자바스크립트의 객체 지향적 특성을 이해하면 보다 강력한 코드 작성이 가능합니다.

🔹 'this' 키워드

const obj = {
    name: "John",
    greet: function() {
        console.log(this.name);
    }
};
obj.greet(); // "John"

📌 설명: this는 obj를 가리키므로 name 속성에 접근할 수 있습니다.

 

🔹 Prototypes (프로토타입)

function Person(name) {
    this.name = name;
}
Person.prototype.greet = function() {
    console.log(`Hello, ${this.name}`);
};
const person = new Person("Alice");
person.greet(); // "Hello, Alice"

📌 설명: 프로토타입 체인을 활용하여 메서드를 상속받을 수 있습니다.

 

🔹 __proto__ 와 프로토타입 체인

자바스크립트는 프로토타입 기반의 객체 지향 언어입니다. 모든 객체는 __proto__ 속성을 가지며, 이를 통해 프로토타입 체인을 따라가면서 상속된 속성이나 메서드를 찾을 수 있습니다.

✅ 예제 코드

function Person() {}
const person = new Person();
console.log(person.__proto__ === Person.prototype); // true

📌 설명:

• Person 생성자를 사용해 person 객체를 생성합니다.
• person.__proto__는 Person.prototype을 참조하므로 true가 출력됩니다.
• 이를 통해 person 객체는 Person.prototype에 정의된 메서드나 속성에 접근할 수 있습니다.

💡 참고:
프로토타입 체인을 이용하면 여러 객체가 동일한 메서드를 공유할 수 있어 메모리 효율성이 높아집니다.

 

🔹 Call, Apply, Bind

function greet() {
    console.log(`Hello, ${this.name}`);
}
const obj = { name: "John" };
greet.call(obj); // "Hello, John"

📌 설명: call()을 사용하여 this를 obj로 설정할 수 있습니다.

---

마무리

이 가이드를 활용하여 자바스크립트 개념을 확실히 이해하고 면접 대비를 철저히 하세요. 개념을 연습하고 샘플 면접 질문을 풀어보면 더욱 효과적인 준비가 가능합니다.

 

 

 

함께보면 좋은글

[React 성능 개선] 불필요한 렌더링 대폭 감소 시키기! (feat.Debounce)

[React 성능 개선] 불필요한 렌더링 대폭 감소 시키기! (feat.Debounce)

JSON 성능 최적화

JSON 성능 최적화

 

[SW Architecture] 소프트웨어 아키텍처 패턴들을 탐구해보자

[SW Architecture] 소프트웨어 아키텍처 패턴들을 탐구해보자