✅ 변수 면접 질문

💫 변수 호이스팅(variable hoisting)에 대해서 설명해주세요

• 답변
  변수 호이스팅은 Javascript에서 변수 선언이 해당 스코프의 상단으로 끌어올려지는 동작이다. 즉 예외를 받지 않고도, 나중에 선언된 변수를 참조할 수 있다는 것이다. 변수 선언은 실제 코드의 위치와 상관없이 해당 스코프의 시작 부분에서 처리된다. 하지만 끌어올려진 변수는 undefined값을 반환한다.
  
  let과 const는 실제 할당(값 대입)전에는 TDZ(Temporal Dead Zone)에 놓인다. TDZ(일시적 사각지대)에서 변수를 참조하면 에러가 난다. 따라서 선언 이전에 변수를 사용하는 것은 피해야 한다. let과 const도 호이스팅되지만 실제 할당 전까지 접근할 수 없게 된다.
  (변수는 선언->초기화->할당의 순서를 가진다)
  

💫 null, undefined, undeclared의 차이점은 무엇인가요? 어떻게 이 상태들에 대한 확인을 할 것인가요?

• 답변
  null은 값이 없음을 나타내는 primitive(원시값)중 하나로 의도적으로 비어있음을 표현한다. undeclared는 사용하려는 변수가 선언조차 되지 않은 경우에 가지는 값으로 참조시에 에러가 발생하게 된다. undeclared의 type은 undefined다. undefined은 스코프에 변수가 선언되었으나 아직 아무런 값도 할당되지 않았다는 것을 의미한다.
  

💫 변수의 선언과 할당의 차이는 무엇인가요?

• 답변
  선언 단계(Declaration phase)
  변수 객체(Variable Object)에 변수를 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다.
  
  초기화 단계(Initialization phase)
  변수 객체(Variable Object)에 등록된 변수를 메모리에 할당한다. 이 단계에서 변수는 undefined로 초기화된다.
  
  할당 단계(Assignment phase)
  undefined로 초기화된 변수에 실제값을 할당한다.
  

💫 let,var,const를 사용하여 생성된 변수들의 차이점은 무엇인가요?

• 답변
  let은 블록 레벨 변수를 선언하며 선언된 변수는 변수가 선언된 블록 스코프 안에서 사용할 수 있다. 그렇게에 유효한 블록 스코프안에서 값을 자유롭게 변경할 수 있다. const는 값이 변경되지 않을 변수를 선언하며 변수는 변수가 선언된 블록 스코프에서 사용할 수 있다. var은 함수 스코프 전역변수로 재할당 가능하며 호스팅된다. 추가적으로 let으로 선언한 변수는 선언단계와 초기화 단계가 분리되어 진행되지만 const 는 선언 단계와 초기화 단계가 동시에 진행된다.

var a = 1;
var b = 2;

if (a === 1) {
  var a = 11; // 전역 변수
  let b = 22; // if 블록 변수

  console.log(a); // 11
  console.log(b); // 22
}

console.log(a); // 11
console.log(b); // 2

💫 변수의 초기화에 대해 설명해주세요.

• 답변
  초기화 단계란 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화 하는 과정을 말한다.
  
  초기화 단계(Initialization phase)
  변수 객체(Variable Object)에 등록된 변수를 메모리에 할당한다. 이 단계에서 변수는 undefined로 초기화된다.

✅ 데이터 타입 면접 질문

💫 변수의 값이 없다는 것을 명시하려고 할 때 null과 undefined 둘 중 어떤 타입을 사용할 것이지 말하고 이유를 설명해주세요.

• 답변
  null을 사용할 것이다. null은 의도적으로 변수에 값이 없다는 것을 명시할 때 사용한다. undefined는 개발자가 의도적으로 할당한 값이 아니라 자바스크립트 엔진에 의해 초기화된 값이다. 그렇기에 의도적으로 명시를 한다면 null을 사용할 것이다.
  

💫 JavaScript에서 Truthy와 Falsy 값은 무엇이며, 어떤 값이 각각에 해당되나요?

• 답변
  JavaScript에서 Truthy 값은 참으로 평가되는 값이며, Falsy 값은 거짓으로 평가되는 값입니다. Truthy 값에는 숫자, 문자열, 불리언 값, 객체, 배열 등이 있으며, Falsy 값에는 null, undefined, 0, false, NaN 등이 있습니다.
  

💫 데이터 타입은 왜 필요한 것일까요?

• 답변
  데이터 타입은 한정된 메모리 공간을 효율적으로 사용하기 위해서, 그리고 2진수 데이터로 메모리에 저장된 데이터를 다양한 형태로 사용하기 위해 존재한다.
  

💫 정적 타입 언어와 동적 타입 언어의 차이점을 설명해주세요.

• 답변
  정적 타입 언어(Java, c)는 변수의 타입을 미리 선언해야 하는 언어입니다. 반면, 동적 타입 언어(js, python)는 변수의 타입을 미리 선언하지 않아도 되는 언어입니다. 정적 타입 언어는 오류를 사전에 방지할 수 있다는 장점이 있지만, 코드가 복잡해질 수 있다는 단점이 있습니다. 반면, 동적 타입 언어는 코드가 간단해질 수 있다는 장점이 있지만, 오류가 발생하기 쉽다는 단점이 있습니다.
  

💫 원시형 데이터와 참조형 데이터에 대해서 설명해주세요.

• 답변
  원시 타입의 값은 변경 불가능한 값(immutable value)이며 pass-by-value(값에 의한 전달) 이다. 이들 값은 런타임(변수 할당 시점)에 메모리의 스택 영역(Stack Segment)에 고정된 메모리 영역을 점유하고 저장된다.
  
  참조 타입이란 객체의 모든 연산이 실제값이 아닌 참조값으로 처리됨을 의미한다. 원시 타입은 값이 한번 정해지면 변경할 수 없지만(immutable), 객체는 프로퍼티를 변경, 추가, 삭제가 가능하므로 변경 가능(mutable)한 값이라 할 수 있다.
  
  따라서 참조 타입은 동적으로 변화할 수 있으므로 어느 정도의 메모리 공간을 확보해야 하는지 예측할 수 없기 때문에 런타임에 메모리 공간을 확보하고 메모리의 힙 영역(Heap Segment)에 저장된다.
  
  이에 반해 원시 타입은 값(value)으로 전달된다. 즉, 복사되어 전달된다. 이를 pass-by-value라 한다.

✅ 타입 변환과 단축 평가 면접 질문

💫 명시적 타입 변환 (타입 캐스팅)과 암묵적 타입 변환의 차이에 대해서 말해주세요.

• 답변
  개발자에 의해 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환(Explicit coercion) 또는 타입 캐스팅(Type casting)이라 한다. 그에 반해 동적 타입 언어인 자바스크립트는 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다. 이를 암묵적 타입 변환(Implicit coercion) 또는 타입 강제 변환(Type coercion)이라고 한다.
  

💫 단축 평가란 무엇이며, 논리곱, 논리합 연산자가 혼합 되어 있을 경우, 우선순위가 높은 것은?

• 답변
  논리 평가를 결정한 피연산자의 평과 결과를 그대로 반환하는 것을 단축 평가라고 한다. 논리곱 연산자 &&의 경우, 왼쪽 피연산자가 거짓일 경우 오른쪽 피연산자는 평가하지 않고 바로 거짓을 반환합니다. 논리합 연산자 ||의 경우, 왼쪽 피연산자가 참일 경우 오른쪽 피연산자는 평가하지 않고 바로 참을 반환합니다. 따라서, 논리곱, 논리합 연산자가 혼합되어 있을 경우, 우선순위가 높은 것은 논리곱 연산자입니다.
  

💫 단축 평가의 장단점은?

• 답변
  객체가 null인지 확인할 때 유용하다. 또한 불필요한 연산을 하지 않아 성능 향상의 이점이 있다. 허나 예외처리를 하기 힘들다.
  

💫 옵셔널 체이닝에 대해 설명해주세요.

• 답변
  optional chaining은 참조나 기능이 undefined 또는 null일 수 있을 때 연결된 객체의 값에 접근하는 단순화할 수 있는 방법이다. 사용 예로 존재하지 않을 수 있는 매서드를 호출할 때, optional chaining을 사용할 수 있다. 또는 단락 평가에서 사용할 수 있다.
  

💫 null 병합 연산자에 대해 설명해주세요.

• 답변
  널 병합 연산자 (??) 는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다. 널 병합 연산자는 첫 번째 연산자가 null 또는 undefined로 평가될 때만, 두 번째 피연산자를 반환함으로써 0 또는 '', NaN을 유효한 값으로 생각했을 때 이를 제외하는 경우를 피한다:
  

💫 Optional Chaining 연산자와의 관계

• 답변
  널 병합 연산자는 명확한 값으로 undefined과 null을 처리하고, optional chaining 연산자 (?.)는 null or undefined일 수 있는 객체의 속성에 접근할 때 유용하다.

✅ 함수 면접 질문

💫 콜백 함수(callback function)에 대해서 설명해 주세요.

• 답변
  콜백 함수(callback function)는 다른 함수의 인자로 전달되는 함수를 말합니다. 콜백 함수는 다른 함수의 실행을 제어하거나, 다른 함수의 결과를 처리하는 데 사용됩니다.
  콜백 함수의 일반적인 사용 예는 이벤트 핸들러입니다. 이벤트 핸들러는 특정 이벤트가 발생했을 때 호출되는 함수입니다. 이벤트 핸들러는 일반적으로 콜백 함수로 구현됩니다.
  
  콜백 함수를 사용하면 코드의 재사용성을 높일 수 있습니다. 예를 들어, 특정 이벤트에 대해 여러 가지 이벤트 핸들러를 등록할 수 있습니다. 또한, 콜백 함수를 사용하면 코드를 간결하게 작성할 수 있습니다.
  

💫 고차 함수와 curry 함수에 대해서 설명해주세요

• 답변
  고차 함수(higher-order function)는 다른 함수를 인자로 받아서 다른 함수를 반환하는 함수를 말합니다. 고차 함수는 외부 상태 변경이나 가변(mutable) 데이터를 피하고 불변성(Immutability)을 지향하는 함수형 프로그래밍에 기반을 두고 있다.
  
  고차 함수의 일반적인 예로는 map, filter, reduce 등이 있습니다.
  
  커리 함수(curried function)는 고차 함수를 인수로 받아서 새로운 고차 함수를 반환하는 함수를 말합니다. 여러 개의 인자를 받는 함수를 단일 인자를 받는 함수의 체인을 이용하는 방식으로 바꾸는 것을 의미한다. 함수의 확장이 쉽고 중복 인자를 피할 수 있는 장점이 있다.

💫 매개변수와 인자(argument)의 차이는 무엇인가요?

• 답변
  매개변수(parameter)는 함수가 호출될 때 추가적인 정보가 필요한 경우 전달되는 값을 말합니다. 인수(argument)는 함수의 매개변수에 전달되는 값을 말합니다.
  

💫 함수 표현식으로 정의한 함수를 함수 표현식 이전에 호출할 수 있나요? 그 이유는 무엇인가요?

• 답변
  함수 선언문의 경우와는 달리 TypeError가 발생한다. 함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생한다. 함수 표현식은 함수 선언문과는 달리 스크립트 로딩 시점에 변수 객체(VO)에 함수를 할당하지 않고 runtime에 해석되고 실행되기 때문이다.
  

💫 Pure Function (순수 함수)의 규칙과 사용하는 이유에 대해서 설명해 주세요.

• 답변*
  함수형 프로그래밍의 근간인 순수 함수를 통해 부수 효과(Side effect)를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이려는 노력의 한 방법이라고 할 수 있다.
  
  함수 내부에 입출력이 존재하면 안 된다.
  함수 내부에서 매개변수가 변경되면 안 된다.
  함수는 만들어진 결과를 즉시 반환해야한다.
  함수 내부에서 전역/정적 변수를 사용하지 않는다.
  함수가 예외를 발생시키면 안 된다.

✅ 전역변수 면접 질문

💫 전역변수의 문제점 2가지 이상 말해 주세요.

• 답변

1. 전역 변수는 모든 함수에서 접근할 수 있기 때문에, 함수 사이에서 변수의 이름이 충돌할 수 있습니다.
2. 전역 변수는 함수의 호출 스택을 통해 전역으로 전파되기 때문에, 함수의 호출 순서에 따라 변수의 값이 변경될 수 있습니다.
3. 전역 변수는 모든 함수에서 접근할 수 있기 때문에, 변수의 값이 변경될 가능성이 높습니다.

💫 전역 변수를 활용해서 개발해본 경험을 들어주세요

• 답변
  전역 변수는 모든 함수에서 접근할 수 있고 변수의 값이 변경될 가능성이 높기 때문에 전역 변수를 활용해서 개발해본 경험이 없습니다.
  

💫 전역 변수를 최소화하기 위한 방법은 어떤 것들이 있나요?

• 답변
  전역 변수를 사용하지 않는 대신 지역 변수를 사용합니다.
  전역 변수를 사용하는 경우, 변수의 이름을 유일하게 구분할 수 있도록 합니다.
  전역 변수를 사용하는 경우, 변수를 함수의 인자로 전달하거나 객체에 저장합니다.
  

💫 지역 변수와 전역 변수의 생명 주기에 대해 설명해 주세요.

• 답변
  지역 변수는 함수 내부에서 선언된 변수이기 때문에 해당 함수의 실행 콘텍스트 안으로 생명 주기가 정해진다. 자동으로 함수가 종료되면 지역변수는 소멸한다. 전역 변수는 어떤 함수나 블록 안에서도 선언되지 않고 전역 범위에서 선언되었기 때문에 프로그램이 시작될 때 생성되고, 프로그램이 끝날 때 종료된다.
  

💫 var, let, const 로 지역 변수를 선언하는 방법에 대해서 설명해 주세요.

• 답변
  let과 const는 모두 블록 레벨 스코프이기 때문에 블록 스코프내에서 지역변수로서 선언이 되고 var의 경우 함수레벨 스코프이기 때문에 함수 내에서 선언해야 한다.
  

✅ 객체 리터럴 면접 질문

💫 객체의 프로퍼티와 메서드의 역할에 대해서 설명해주세요

• 답변
  자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다.

이와 같이 객체는 데이터를 의미하는 프로퍼티(property)와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메소드(method)로 구성된 집합이다. 객체는 데이터(프로퍼티)와 그 데이터에 관련되는 동작(메소드)을 모두 포함할 수 있기 때문에 데이터와 동작을 하나의 단위로 구조화할 수 있어 유용하다.

💫 ES6에서 추가된 객체 리터럴의 확장 기능은?

• 답변
  ES6에서는 프로퍼티 값으로 변수를 사용하는 경우, 프로퍼티 이름을 생략(Property shorthand)할 수 있다. 이때 프로퍼티 이름은 변수의 이름으로 자동 생성된다. 다음으로 대괄호를 사용하여 프로퍼티 키를 동적으로 생성 가능하다. 마지막으로 메소드를 선언할 때, function 키워드를 생략한 축약 표현을 사용할 수 있다.
  

💫 객체 리터럴이란 무엇인가요?

• 답변
  가장 일반적인 자바스크립트의 객체 생성 방식이다. 클래스 기반 객체 지향 언어와 비교할 때 매우 간편하게 객체를 생성할 수 있다. 중괄호({})를 사용하여 객체를 생성하는데 {} 내에 1개 이상의 프로퍼티를 기술하면 해당 프로퍼티가 추가된 객체를 생성할 수 있다. {} 내에 아무것도 기술하지 않으면 빈 객체가 생성된다.
  

💫 인스턴스란 무엇인가요?

• 답변
  생성자 함수를 통해 생성된 객체를 인스턴스(instance)라 한다.
  

💫 네이티브 객체와 호스트 객체에 대해 설명해 주세요.

• 답변
  네이티브 객체(Native objects or Built-in objects or Global Objects)는 JavaScript 언어 자체에 내장된 객체이다. 네이티브 객체는 애플리케이션의 환경과 관계없이 언제나 사용할 수 있다.
  Object, String, Number, Function, Array, RegExp, Date, Math와 같은 객체 생성에 관계가 있는 함수 객체와 메소드로 구성된다.
  
  호스트 객체(Host object)는 브라우저 환경에서 제공하는 window, localStorage, HTMLElement 등의 DOM 노드 객체와 같이 호스트 환경에 정의된 객체를 말한다.
  
  브라우저에서 동작하는 환경의 호스트 객체는 전역 객체인 window, BOM(Browser Object Model)과 DOM(Document Object Model) 객체 등을 제공한다.