CS 스터디 02-2 컴퓨터 언어: Javascript

1. JavaScript Event Loop

질문: JavaScript의 Event Loop란 무엇인가요?

답변: JavaScript는 단일 스레드로 동작하는 언어로, 비동기 작업을 처리하기 위해 Event Loop를 사용합니다. 기본적으로 자바스크립트는 코드가 Call Stack에서 동기적으로 실행되고, 비동기 작업(예: 타이머, 이벤트 핸들러 등)은 Web API에서 처리한 뒤 Task Queue에 넣어집니다. Event Loop는 Call Stack이 비어 있는지 확인한 후 Task Queue에서 대기 중인 작업을 Call Stack으로 이동시켜 실행하는 과정을 반복합니다. 이러한 방식으로 비동기 작업을 순차적으로 처리하여 사용자의 작업이 차례로 실행될 수 있게 합니다.

추가 설명:

• Event Loop는 자바스크립트의 비동기 작업을 조율해 주어 메인 스레드를 차단하지 않도록 합니다.
• Promise는 Microtask Queue에서 관리되며, Task Queue의 작업보다 먼저 실행됩니다.

동기 vs 비동기

질문: 동기와 비동기의 차이는 무엇인가요?

답변: 동기(Synchronous) 방식은 요청을 보내면 결과가 반환될 때까지 다음 작업이 대기하는 방식입니다. 하나의 작업이 완료되어야 다음 작업이 진행됩니다. 반면, 비동기(Asynchronous) 방식은 작업의 완료 여부와 상관없이 다음 작업이 즉시 실행됩니다. 비동기는 작업이 끝나면 콜백 함수나 Promise를 통해 결과를 반환받을 수 있어 효율적인 처리 방식입니다. 예를 들어, 서버에 요청을 보내는 작업은 비동기 방식을 사용하면 결과가 올 때까지 다른 작업을 동시에 처리할 수 있습니다.

---

2. Hoisting

질문: JavaScript의 Hoisting(호이스팅)이란 무엇인가요?

답변: JavaScript에서 Hoisting은 함수나 변수가 정의되기 전에 사용할 수 있도록 메모리에 미리 할당되는 현상을 말합니다. JavaScript는 코드가 실행되기 전에 변수 선언과 함수 선언을 코드의 상단으로 끌어올립니다. 하지만 let과 const로 선언된 변수는 호이스팅되더라도 초기화가 되지 않기 때문에 사용할 수 없고, 일시적 사각지대(TDZ, Temporal Dead Zone)에 놓이게 됩니다. 반면, var로 선언된 변수는 undefined로 초기화됩니다.

추가 설명:

• var 키워드는 선언과 동시에 undefined로 초기화됩니다.
• 함수 선언은 전체를 메모리에 미리 로드하므로 어디서든 호출할 수 있습니다.
• TDZ는 let과 const가 변수 선언 전에 호출되면 오류를 발생시키는 영역입니다.

---

3. Closure

질문: JavaScript에서 Closure(클로저)란 무엇인가요?

답변: Closure는 내부 함수가 외부 함수의 변수에 접근할 수 있는 기능을 말합니다. 자바스크립트에서는 함수가 실행된 후에도 내부 함수가 외부 함수의 변수에 계속 접근할 수 있는 환경을 만들어 클로저가 형성됩니다. 클로저는 상태 유지나 데이터 캡슐화를 위해 많이 사용됩니다. 예를 들어, 특정 함수가 상태를 가지고 그 상태를 유지하고 싶을 때 클로저를 사용하면 효과적입니다.

function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}

const counter = createCounter();
counter(); // 1
counter(); // 2

추가 설명:

• 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합입니다.
• JavaScript의 함수 스코프와 렉시컬 스코핑으로 인해 클로저가 형성됩니다.

렉시컬 스코핑이란

질문: JavaScript에서 렉시컬 스코핑이란 무엇인가요?

답변: 렉시컬 스코핑(Lexical Scoping)은 변수가 선언된 위치에 따라 접근할 수 있는 스코프가 결정되는 방식을 의미합니다. JavaScript는 렉시컬 스코핑을 사용하여, 함수가 정의된 위치에서 스코프 체인이 결정되며, 이 스코프 체인은 런타임이 아닌 정의 시점에 고정됩니다. 즉, 함수 내부에서 외부 스코프에 있는 변수를 참조할 때, 정의 위치에 따라 해당 변수에 접근합니다.

---

3. 렉시컬 바인딩이란

질문: 렉시컬 바인딩이란 무엇인가요?

답변: 렉시컬 바인딩(Lexical Binding)은 JavaScript에서 함수나 변수가 정의된 위치에 따라 참조할 대상을 고정하는 것입니다. JavaScript는 렉시컬 스코프를 사용하기 때문에, 함수 내부에서 변수에 접근할 때 해당 변수가 선언된 스코프 체인에 따라 바인딩이 결정됩니다. 이를 통해 함수의 스코프와 바인딩이 함수 호출 위치가 아닌, 함수가 정의된 위치에 따라 고정됩니다.

---

 

---

4. this에 대해서

질문: JavaScript에서 this 키워드는 무엇을 가리키나요?

답변: JavaScript에서 this 키워드는 현재 실행되는 문맥을 참조합니다. 상황에 따라 가리키는 객체가 달라지며, 크게 전역 문맥, 함수, 메서드, 클래스, 이벤트 리스너에서 각각 다르게 동작합니다. 예를 들어, 전역에서 사용하면 this는 window 객체를 가리키고, 메서드에서는 해당 객체를, 생성자 함수에서는 새로 생성된 인스턴스를 가리킵니다. 하지만, 화살표 함수는 this 값을 자신의 상위 스코프에서 lexically binding하여 갖게 됩니다.

추가 설명:

• 전역: window 또는 global 객체
• 메서드: 메서드를 호출한 객체
• 함수: 기본적으로 undefined (strict mode), 일반 모드에서는 window
• 화살표 함수: 선언될 당시의 this를 유지합니다.

메서드와 함수 차이

질문: 메서드와 함수의 차이점은 무엇인가요?

답변: JavaScript에서 함수(function)는 독립적으로 선언된 일반적인 코드 블록으로, 필요한 위치에서 호출할 수 있는 기능을 갖춘 단위입니다. 메서드(method)는 객체의 프로퍼티로 저장된 함수로, 객체에 종속되어 있으며 해당 객체에 대한 작업을 수행하는 함수입니다. 메서드는 객체의 상태를 참조하거나 수정하는 작업에 주로 사용됩니다.

예시:

// 함수
function greet() {
  console.log("Hello!");
}

// 메서드
const person = {
  name: "Alice",
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

---

5. Promise

질문: JavaScript의 Promise는 무엇이고, 왜 사용하는가요?

답변: Promise는 자바스크립트에서 비동기 작업을 처리하는 객체입니다. Promise는 비동기 작업의 성공 여부에 따라 fulfilled(성공)되거나 rejected(실패)됩니다. 상태가 변경되기 전까지는 pending 상태에 머물며, 성공 시 .then() 블록이, 실패 시 .catch() 블록이 실행됩니다. Promise는 콜백 지옥을 해결하고, 코드의 가독성을 높이며 비동기 흐름을 직관적으로 관리할 수 있게 합니다.

let myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Success!");
    }, 1000);
});

myPromise
    .then((result) => console.log(result)) // Success!
    .catch((error) => console.error(error));

추가 설명:

• .then(): 성공 시 호출되는 메서드입니다.
• .catch(): 실패 시 호출되는 메서드입니다.
• .finally(): 성공과 실패 여부와 상관없이 항상 실행됩니다.
• async/await를 사용하여 더 직관적으로 비동기 코드를 작성할 수 있습니다.

async/await란

질문: JavaScript에서 async/await란 무엇인가요?

답변: async/await는 JavaScript에서 비동기 처리를 쉽게 작성할 수 있게 해주는 문법입니다. async 키워드를 함수 앞에 붙이면 해당 함수는 항상 Promise를 반환하게 됩니다. 함수 내에서 비동기 작업이 필요한 경우 await 키워드를 사용하여, Promise의 결과가 반환될 때까지 기다릴 수 있습니다. 이는 코드의 가독성을 높여주고, 비동기 처리를 직관적으로 작성할 수 있게 해줍니다.

예시:

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

추가 설명:

• await는 async 함수 내에서만 사용할 수 있으며, Promise가 완료될 때까지 기다립니다.
• async/await는 코드의 흐름을 동기식처럼 보이게 해 직관적인 비동기 처리를 가능하게 합니다.

---

객체와 인스턴스 차이

질문: 객체와 인스턴스의 차이는 무엇인가요?

답변: 객체(Object)는 데이터와 기능을 담는 기본적인 자료 구조입니다. JavaScript에서는 {} 형태의 리터럴 방식으로 객체를 만들거나, class와 같은 틀을 통해 객체를 생성할 수 있습니다. 인스턴스(Instance)는 이 객체를 기반으로 특정한 형태로 생성된 실제 객체를 의미합니다. 예를 들어, Person이라는 클래스가 있다면, new Person()을 통해 만들어진 person1은 Person의 인스턴스입니다.