[Development] 프론트엔드 면접 예상 질문 - JavaScript(3)

 

 

1. 호이스팅(hoisting)에 대해서 설명하세요.
2. call 메서드와 apply 메서드의 차이점은 무엇인가요?
3. 함수 선언문과 표현식의 차이점은 무엇인가요?
4. 전역 스코프(global scope)를 사용했을 때 장단점에 관해 설명해주세요.
5. 가비지 콜렉터(garbage collector)에 대해서 아는대로 설명해 주세요.

 

 

1. 호이스팅(hoisting)에 대해서 설명하세요.

함수가 실행되기 전에 코드 안에 있는 변수들을 최상단으로 끌어올리는 것

• 이러한 현상이 발생하는 이유는 변수가 선언되는 시점과 값의 할당이 되는 시점이 다르기 때문
• (자바스크립트 엔진에 의해) 변수 선언은 런타임 이전에 실행되고 값의 할당은 런타임에서 실행됨
• 호이스팅으로 발생하는 var과 let, const의 차이
  
  • 호이스팅으로 나타나는 대표적인 현상
  • 자바스크립트에서 거의 모든 식별자는 호이스팅이 되는데, 이때 var의 경우 변수의 선언과 함께 초기화가 발생하여 기본적으로 undefined의 값을 가지게 됨
  • let과 const의 경우, 선언 전에 변수에 접근 할 때 '아직 초기화되지 않았다'라는 에러메세지가 발생되는데 이것은 선언 전에 변수가 접근을 금지시키는 TDZ(일시적 사각지대) 때문

+) 변수뿐 아니라 var, let, const, function, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅된다.

+) 런타임이란 소스코드가 한 줄씩 순차적으로 실행되는 시점을 이야기한다.

 

 

 

2. call 메서드와 apply 메서드의 차이점은 무엇인가요?

두 메서드 모두 this를 특정값으로 지정한다는 점은 같지만, 함수 파라미터 전달 방식에 차이가 있다.

• 공통점
  • Function.prototype의 메서드이기 때문에 모든 함수가 상속받아 사용할 수 있는 메서드
  • call과 apply 모두 첫번째 파라미터로는 변수로 사용될 this의 값을 받고, 두 번째 부터는 함수의 파라미터로 전달됨
• 차이점
  • call의 경우 콤마로 구분된 값들을 파라미터로 받고 apply의 경우 배열을 받음

 

 

3. 함수 선언문과 표현식의 차이점은 무엇인가요?

함수 선언문의 경우 함수 전체를 호이스팅, 함수 선언문이 정의되기 전에 호출이 가능하고,
함수 표현식의 경우 함수 선언부만 호이스팅, 변수에 함수가 할당되었을 때 사용이 가능하다.

• 함수 선언문
  • 함수의 정의부만 있고, 별도의 할당명령이 없음
  • 반드시 함수명이 정의되어 있어야 함
• 함수 표현식
  • 정의한 함수를 별도의 변수에 넣는 것
  • 함수명이 반드시 정의될 필요 없음

 

 

4.  전역 스코프(global scope)를 사용했을 때 장단점에 관해 설명해주세요.

전역 scope를 통해 어디서나 사용 가능한 변수나 함수를 만들 수 있다. 하지만 이는 일반적으로 지양되는 방식이다.

• 이유1: 긴 생명주기
  • 지역변수와 다르게 전역 변수는 프로그램이 실행돼서 종료될 때까지 메모리 공간에 남게 됨
• 이유2: 스코프 체인 상에서 종점에 존재
  • 전역 변수는 가장 상위스코프에 존재하는 변수이기 때문에, 스코프 체인 상에서 가장 마지막에 검색되는 변수가 됨
• 이유3: 암묵적 결함
  • 변수의 유효범위가 커지면서 변수가 참조되고 변경될 수 있는 범위 또한 넓어지므로, 재할당이 되는 등 어려운 상황이 벌어질 수 있음
• 따라서 프로젝트 전체에 꼭 필요한 변수만 전역 객체에 저장하도록 하고, 전역 변수는 가능한 한 최소한으로 사용하는 것이 좋음

 

 

5. 가비지 콜렉터(garbage collector)에 대해서 아는대로 설명해 주세요.

가비지 콜렉터는 더이상 사용하지 않는 메모리를 발견하고 이를 해제해주는 역할을 한다.

• 자바스크립트는 가비지 콜렉션(garbage collection)이라는 자동 메모리 시스템으로 메모리를 관리하는 언매니지드(unmanaged) 언어
• Mark-and-sweep 알고리즘
  • roots: 전역변수의 집합
  • roots에서 해당 값이 도달 가능한가의 여부로 메모리 해제 여부를 판단
  • 어떤 값이 참조되고 있더라도, roots로부터 도달할 수 없다면 메모리 수거의 대상이 됨
  • 모든 객체를 대상으로 평가를 진행해서 white, gray, black 세 가지 상태로 분류해서 마킹(mark)을 하고, 흰색으로 마킹된 객체에 대한 메모리를 해제함(sweep)
  • 2012년을 기준으로 모든 최신 브라우저에서는 가비지 콜렉션에서 이 알고리즘을 사용
• 수거된 메모리는 다시 새로운 값을 할당할 수 있는 빈공간이 됨

+) 언매니지드 언어

: 메모리의 할당 및 해제를 위한 메모리 관리 기능을 언어 차원에서 담당하고 개발자의 직접적인 메로리 제어를 허용하지 않는다.

+) mark-and-sweep 이전에는 reference-counting이라는 알고리즘을 이용했는데, 이는 순환참조라는 한계점이 있었기 때문에 최신 브라우저에서는 채택되지 못한 방식이다.

+)

• White : 아직 가비지 컬렉터가 탐색하지 못한 상태
• Gray : 가비지 컬렉터가 탐색했으나, 해당 객체가 참조하는 객체들은 탐색하지 못한 상태
• Black : 가비지 컬렉터가 탐색했고, 해당 객체가 참조하는 객체들도 탐색 완료한 상태

 

 

 

[Reference]

https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management

 

 

 

 

글 속에 오류가 있다면 언제든 댓글로 알려주세요 :-)