프론트엔드 면접 질문 & 답 JavaScript Part

JavaScript

• Promise와 Callback 차이
  ⭐️Callback은 함수를 다른 함수의 인자로 전달하여 비동기 작업이 완료되면 호출될 콜백 함수를 정의하는 방식이다. 예를 들면 setTimeout 함수는 첫 번째 인자로 전달된 콜백 함수를 일정 시간이 지난 후 호출한다.
  ⭐️Promise는 비동기 작업의 결과를 나타내는 객체이다. Promise는 작업이 성공하면 이행(resolve)상태가 되며 결과 값을 가지고 처리를 완료한다. 반면 작업이 실패하면 거부(reject)상태가 되며 실패 이유를 나타내는 오류 객체를 반환한다.
  --> Promise는 콜백 함수보다 가독성이 좋고, 비동기 작업이 여러 단계로 이루어져도 코드 작성이 쉽다. 또한 Promise.all이나 Promise.race같은 메소드를 사용해 여러 Promise를 동시에 처리하고 조합할 수 있다.

• 콜백 지옥을 해결하는 방법

  1. Promise 사용: Promise를 사용하여 비동기 작업의 상태를 관리할 수 있다. Promise는 작업이 완료되면 결과값을 반환하는 객체이며, then() 메서드를 이용해 결과를 처리할 수 있다.
  2. Async/Await 사용: Async/Await는 Promise를 더욱 쉽게 사용해주는 ES2017의 기능이다. async는 항상 Promise를 반환하며, await 키워드를 사용해 비동기 작업이 완료될때까지 대기할 수 있다.
  3. 모듈화: 비슷한 기능을 하는 콜백 함수들을 하나의 모듈로 묶어 코드를 분리하면 가독성과 유지보수성을 높일 수 있다.
  4. Async.js와 Q.js같은 비동기 라이브러리를 사용하여 해결할 수 있다.

• Promise를 사용한 비동기 통신과 async, await를 사용한 비동기 통신의 차이
  ⭐️ Promise를 사용한 비동기 통신은 'then()'과 'catch()' 메서드를 사용하여 비동기 작업의 결과를 처리한다. 이를 통해 비동기 작업이 완료되면 콜백 함수가 호출되어 처리 결과를 전달한다. 여러개의 비동기 작업을 연결할 경우 콜백 지옥이 발생할 수 있다.
  ⭐️ async/await를 사용한 비동기 통신은 async 함수와 await 키워드를 사용하여 비동기 작업의 결과를 처리한다. async함수는 항상 Promise를 반환하며, await 키워드를 사용하여 Promise가 처리될 때까지 대기할 수 있다. 또한 try-catch문과 함께 오류 처리를 쉽게 할 수 있다.
  

• var, let, const 차이
  ⭐️ var는 ES5 이전의 JavaScript에서 사용되었고, 변수를 선언하고 값을 할당할 수 있다. 하지만 var는 함수 스코프를 가지며, 변수의 유효 범위가 해당 함수 내에서만 적용된다. 또한 변수를 중복해서 선언할 수 있고, 값이 없이 선언할 수 있다.
  ⭐️ let과 const는 ES6에서 추가된 변수 선언 키워드이다. let과 const는 블록 스코프를 가지며, 변수의 유효 범위가 해당 블록 내에서만 적용된다. 변수를 중복해서 선언할 수 없고, const는 값이 없이 선언할 수 없다.
  -> let은 값의 변경이 가능하고, 재할당할 수 있다.
  -> const는 값의 변경이 불가능하고, 상수를 선언하는데 사용된다.

• 함수 선언형과 함수 표현식의 차이
  ⭐️ 함수 선언형은 'function'키워드를 사용하여 함수를 정의하며, 함수의 이름을 지정할 수 있다. 함수 선언형은 함수의 정의가 스코프 맨위로 끌어올려지는 호이스팅 현상이 있으며, 함수가 정의되기 전에 호출할 수 있다.
  ⭐️ 함수 표현식은 함수를 변수에 할당하는 방식으로 정의한다. 함수의 이름을 생략하거나, 이름을 지정하여 함수를 정의할 수 있다. 함수의 이름을 생략할 경우 함수 이름은 변수 이름으로 사용되며, 외부에서는 호출할 수 없다.

• 이벤트 버블링과 캡처링
  ⭐️ 이벤트 버블링(Event Bubbling)은 하위 요소에서 이벤트가 발생하면 해당 요소에서 시작해 상위 요소로 전파된다. 예를 들면, 버튼이 클릭되면, 해당 버튼에서 시작하여 부모요소, 그리고 최상위 요소까지 이벤트가 전파된다.
  ⭐️ 이벤트 캡처링(Event Capturing)은 최상위 요소에서 이벤트가 발생하여 하위 요소로 전파된다.
  이벤트 전파는 이벤트 리스너에 의해 처리되는데 addEventListener 메서드의 세번째 인수로 이벤트 전파 방식을 나타내는 값(true / false)을 받는데 이 값이 true면 캡처링, false면 버블링이 적용된다.

• 클로저(Closure)
  클로저란 함수가 자신이 생성될 때의 환경(Lexical Environment)을 기억하여, 함수가 종료된 이후에도 그 환경에 접근할 수 있는 기능을 말한다.
  클로저는 함수 내부에 정의된 함수나 변수를 외부에서 참조할 때 생성된다. 함수 내부에 정의된 함수나 변수는 외부에서 직접 접근할 수 없으며, 해당 함수를 호출해야만 접근할 수 있다.
  클로저는 외부 함수 내부에 정의된 함수나 변수를 안전하게 보관하고 사용할 수 있게 한다.
  

• 호이스팅(hoisting)
  호이스팅은 자바스크립트에서 변수와 함수 선언이 해당 스코프의 최상단으로 끌어올려지는것을 말한다.
  변수 선언의 경우, 변수 선언 키워드가 해당 스코프 내 가장 상단으로 끌어올려지고 변수 할당은 그 이후에 실행된다.
  함수 선언의 경우, 함수 이름과 코드가 전체 스코프 내 가장 상단으로 끌어올려지고, 함수 표현식은 호이스팅되지 않는다.
  호이스팅은 코드 가독성을 해치기 때문에, 스코프 최상단에서 한 번에 선언하는게 좋다.

• 데이터 타입

  1. 원시 타입(Primitive Type)
     ⭐️ 숫자(Number): 정수, 실수 등의 숫자
     ⭐️ 문자열(String): 문자나 문자열
     ⭐️ 불리언(Boolean): true 혹은 false 값
     ⭐️ null: null 값
     ⭐️ undefined: 값이 할당되지 않은 변수
     ⭐️ 심볼(Symbol): ES6에서 추가된 원시 타입으로, 유일한 식별자를 생성
  2. 객체 타입(Object Type)
     ⭐️ 객체(Object): 모든 객체를 나타낸다. 객체는 속성과 메서드를 가질 수 있다.
     ⭐️ 배열(Array): 배열을 나타내며 여러개의 값이 순차적으로 저장된다.
     ⭐️ 함수(Function): 함수를 나타냄

• 데이터 형 변환
  데이터 형 변환은 자동 형 변환과 명시적 형 변환이 있다.

  1. 자동 형 변환(Implicit Type Conversion)
     두 개의 데이터 타입이 서로 다를 경우, 자동으로 타입이 변환된다.ex) 숫자 + 문자 => 문자열

  2. 명시적 형 변환(Explicit Type Conversion)
     개발자가 의도적으로 형 변환이 가능하다.
     ⭐️ Number() 함수: 문자열을 숫자로 변환
     ⭐️ String() 함수: 숫자를 문자열로 변환
     ⭐️ Boolean(): 값을 불리언 타입으로 변환
     ⭐️ ParseInt(): 문자열을 정수로 변환
     ⭐️ ParseFloat(): 문자열을 실수로 변환

     데이터 형 변환은 자주 일어나면 가독성이 떨어지므로, 명시적 형 변환을 사용하는게 좋다

• 프로토타입
  자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있다.
  모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받는다.
  상속되는 정보를 제공하는 객체를 프로토타입이라고 한다.

• 깊은 복사와 얕은 복사
  ⭐️ 깊은 복사는 객체를 복사할 때 객체 자체를 새로 생성하고, 그 안에 있는 모든 값을 복사하여 새로운 객체를 만드는 것을 말한다. 복사된 객체와 원본 객체는 완전히 독립적인 존재이다.
  ⭐️ 얕은 복사는 객체를 복사할 때, 객체 자체는 새로 생성하지만 참조 타입 데이터가 저장한 '메모리 주소 값'을 복사한 것이다. 객체 내부에 참조하는 값은 복사되지 않고 그대로 공유된다. 따라서, 하나의 객체가 변경되면 다른 객체도 영향을 받는다.

• 불변성을 유지하려면?
  불변성을 유지하기 위해선 해당 객체를 변경할 수 없도록 만들어야 한다.

1. 튜플 사용: 튜플은 불변하는 객체이므로, 한 번 사용하면 내부 값이 변경될 수 없다.
2. 불변 클래스 사용: 객체가 생성될 때 내부 값이 초기화되고 이후에는 변경되지 않도록 클래스를 정의한다.
3. 복사하여 사용: 객체를 변경할 필요가 있는 경우, 객체를 깊은 복사하여 복사본을 만들어서 변경한다.

• 화살표 함수와 일반함수의 차이

1. this
   ⭐️ 일반함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니라, 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.
   ⭐️ 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다.
2. 생성자 함수로 사용 가능 여부
   ⭐️ 일반 함수는 생성자 함수로 사용할 수 있다.
   ⭐️ 화살표 함수는 prototype 프로퍼티를 가지고 있지 않기 때문에 생성자 함수로 사용할 수 없다.
3. arguments 사용 가능 여부
   ⭐️ 일반 함수에서는 arguments 변수를 넣어주면 암묵적으로 사용할 수 있다.
   ⭐️ 화살표 함수에서는 arguments 변수가 전달되지 않는다.

• ES6 문법

1. 'let'과 'const'키워드를 이용해 블록 스코프를 가진 변수를 선언할 수 있다.
2. 화살표 함수 표현식을 사용해 간결하게 함수를 작성할 수 있다.
3. 클래스 선언문을 이용해 객체 지향 프로그래밍을 지원한다.
4. import와 export 구문을 이용해 모듈 시스템을 지원한다.
5. 객체 리터럴 문법이 개선되어 변수와 함수를 객체에 쉽게 추가할 수 있다.
6. 백틱(`) 문자를 이용해서 문자열 안에 변수 삽입 가능
7. spread(...) 구문을 이용해 파라미터를 배열로 받거나, 배열을 함수의 인수로 전달할 수 있다.
8. 비동기 작업을 처리할 때 사용하는 Promise 객체를 지원한다.
9. function* 키워드를 이용해 제너레이터 함수를 선언하고, yield 키워드를 이용해 제어를 반환할 수 있다.

• map / foreach의 차이

1. 반환값
   ⭐️ forEach는 반환값이 없고, 원본 배열을 수정한다.
   ⭐️ map은 새로운 배열을 반환하고, 원본 배열을 수정하지 않는다.
2. 사용용도
   ⭐️ forEach는 배열 요소를 반복하며 어떤 작업을 수행할 때 사용된다. 예를 들면, 배열의 요소를 출력하거나, 배열의 요소를 더해 총합을 구하는 등의 작업
   ⭐️ map은 배열의 요소를 변형할 때 사용한다. 예를 들면, 배열의 요소들을 제곱하거나, 문자열을 대문자로 바꾸는 등의 작업
3. 매개변수
   ⭐️ forEach는 콜백 함수를 하나만 받는다. 이 함수는 배열의 각 요소마다 한 번씩 호출된다. 콜백 함수의 매개변수로는 각 요소의 값, 인덱스, 그리고 배열 전체가 전달된다.
   ⭐️ map은 forEach와 마찬가지로 콜백 함수를 하나만 받지만 콜백 함수가 반환하는 값을 배열에 모아서 새로운 배열을 만든다.