Javascript 기술 면접 예상 질문 📑

1-1. 자료형이 필요한 이유

자료형은 데이터의 종류를 나타낸다.

데이터의 종류를 명시해주면 가독성이 좋아지고 유지보수가 편리해진다.

또한 자료형에 따라 컴퓨터 메모리를 다르게 사용하기 때문에 필요에 따라 메모리 사용을 최적화할 수 있다.

1-2. var, let, const 차이

var, let, const는 모두 자바스크립트에서 변수를 선언하는 키워드이다.

하지만 스코프(scope), 재선언(redeclaration), 재할당(reassignment) 측면에서 차이가 있다.

var : var는 함수 스코프(function scope)를 가지며 내에서 어디서든 접근할 수 있다.

또한 동일한 스코프 내에서 재선언과 재할당이 가능하다.

let : let은 블록 스코프(block scope)를 가지며 선언된 블록 내에서만 접근할 수 있다.

또한 동일한 스코프 내에서 재선언이 불가능하지만, 값은 재할당이 가능하다.

const : const도 블록 스코프(block scope)를 가지며 선언된 블록 내에서만 접근할 수 있다.

또한 동일한 스코프 내에서 재선언이 불가능하며, 값 또한 재할당이 불가능하다.

1-3. 브라우저의 렌더링 과정

1. 브라우저가 html을 읽을 때, html 요소들을 node로 변환(DOM)하고 노드간의 계층 관계(DOM tree)를 형성
2. CSS 파일을 파싱하여 CSSOM 트리 생성
3. DOM과 CSSOM을 결합해 실제 화면에 표시될 요소만을 선택하여 Render tree 생성
4. 렌더트리를 기반으로 화면 어디에 무엇이 위치해야 하는지 레이아웃을 계산 (Reflow)
5. 레이아웃을 기반으로 픽셀화 (Repaint)
6. 레이어들을 합성하여 최종적으로 실제 화면에 그리기 위해 GPU로 보냄 (Composit)

1-4. 값(Value), 식(Expression), 문(Statement) 차이

값(Value) : 값은 표현식이 평가(evaluate)되어 얻어진 결과

e.g. 10, "hello", true, undefined, null, [1, 2, 3], { name: "John" }

식(Expression) : 식은 하나의 값으로 평가될 수 있는 코드 단위

e.g. 5 * 10, 'Hello, ' + 'World!', 4 > 2, x, x = 10, function() {}

문(Statement) : 문은 프로그램이 수행하는 하나의 동작이나 명령을 나타내는 코드의 단위

e.g.변수 선언, if 문, for 문, while 문 등

1-5. 얕은 복사 vs 깊은 복사

얕은 복사 (Shallow Copy) : 객체를 복사할 때 해당 객체의 주소(reference)만 복사
원본 객체와 복사본 객체가 같은 객체를 참조하므로, 한 객체의 내용이 변경되면 다른 객체도 영향을 받는다.

const originalArray = [1, 2, [3, 4]];
  const shallowCopy = [...originalArray];

  originalArray[2][0] = 999;
  console.log(shallowCopy); // [1, 2, [999, 4]]

깊은 복사 (Deep Copy) : 객체를 복사할 때 객체의 모든 레벨을 복사

복사된 객체와 원본 객체는 완전히 분리된 별도의 객체가 된다.

복사된 객체에서 내부 요소를 변경해도 원본 객체에 영향을 미치지 않는다.

const originalArray = [1, 2, [3, 4]];
  const deepCopy = JSON.parse(JSON.stringify(originalArray));

  originalArray[2][0] = 999;
  console.log(deepCopy); // [1, 2, [3, 4]]

1-6. 호이스팅(Hoisting)

변수와 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 것처럼 보이는 현상

1-7. Restful API란

REST : Representational State Transfer

자원을 표현 방법으로 구분하여 해당 자원의 상태를 주고 받는 것

HTTP 프로토콜의 메서드인 GET, POST, PUT, DELETE 등을 사용하여 CRUD연산을 수행한다.

1-8. HTTP 메서드란

클라이언트가 웹 서버에게 어떠한 동작을 요청할지를 정의하는 방법이다.

GET : 데이터 받기 요청
POST : 데이터 제출
PUT : 데이터 업데이트
DELETE : 데이터 삭제

1-9. async / await에 대해

promise기반의 비동기 코드를 마치 동기 코드처럼 작동하도록 돕는다.

async는 함수 앞에 위치하며, 이 키워드가 붙은 함수는 항상 promise를 반환한다.

await는 async 함수 내부에서만 사용할 수 있으며, promise의 결과를 기다린다.
await가 붙은 표현식은 promise가 처리될 때까지 함수의 실행을 멈추고 promise의 결과를 반환한다.

1-10. == 와 ===의 차이

==는 동등 연산자로, 두 값을 비교할 때 형변환(type coercion)을 수행한다.

즉, 비교하는 값의 데이터 타입이 다르더라도 자동으로 형변환을 수행한 후에 비교한다.

===는 일치 연산자로, 두 값이 데이터 타입과 값이 모두 같은지 비교한다.

따라서 ===를 사용하면 형변환 없이 정확한 값을 비교할 수 있다.

1-11. 클로저(Closure)란

클로저는 함수 내부에서 생성한 데이터와 그 데이터를 조작하는 함수를 결합한 것

function outer() {
    let count = 0; // 이 변수는 outer 함수의 지역변수

    function inner() {
      count++; // inner 함수는 외부 함수 outer의 변수 count를 참조
      console.log(count);
    }

    return inner; // outer 함수는 inner 함수를 반환
  }

  let increaseCount = outer(); 
  increaseCount(); // 1
  increaseCount(); // 2

1-12. 이벤트 전파와 이벤트 위임에 대해

이벤트 전파(Event Propagation): 이벤트 전파는 이벤트가 DOM 트리를 통해 어떻게 전달되는지를 설명하는 메커니즘

캡처링 단계, 타겟 단계, 버블링 단계의 세 단계로 이루어진다.

캡처링(Capturing): 이벤트가 가장 상위의 부모 요소로부터 이벤트의 타겟 요소까지 전파되는 단계
타겟(Target): 이벤트가 실제 타겟 요소에 도달하는 단계
버블링(Bubbling): 이벤트가 타겟 요소로부터 다시 상위의 부모 요소로 전파되는 단계

기본적으로 대부분의 이벤트는 버블링 단계에서 처리된다.

이벤트 위임(Event Delegation): 이벤트 위임은 하위 요소 각각에 이벤트 리스너를 붙이지 않고 상위 요소에 이벤트 리스너를 한 번만 붙여서 하위 요소의 이벤트를 제어하는 방법으로 이벤트 버블링을 활용한 기법이다.

document.querySelector('ul').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      console.log(event.target.textContent);
    }
  });

1-13. 동기와 비동기에 대해

동기 : 작업이 동시에 이뤄지지 않아 이전 작업이 다 수행되지 않으면 다음 작업을 수행하지 못하는 상태

비동기 : 작업이 동시에 진행되며 이전 작업이 수행되지 않아도 다음 작업이 알아서 수행되는 상태

예외처리 ⛔ (0)	2022.10.04
AJAX / JSON (0)	2022.09.22
Callback Function / EventHandler (0)	2022.09.22

Yuniverse

티스토리 뷰