Javascript 관련 기술면접 정리

---

 

#1. 자바스크립트 관련기술 면접 정리

1. 자바스크립트의 작동 방식과 장/단점이 무엇인가요?

자바스크립트는 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이며, 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어 입니다.

자바스크립트는 V8 엔진을 사용하며, 싱글 스레드(한 번에 하나의 일만 가능) 기반 입니다. 엔진은 크게 두 요소로 구분되는데, 메모리 힙(Memory Heap)과 콜 스택(Call Stack)입니다. 메모리 힙에서는 할당이 일어나고, 콜 스택에서는 코드 실행에 따라 호출스택이 쌓입니다. 싱글 스레드 기반이기 때문에 호출 스택이 하나이고 따라서 그 하나의 호출 스택에 실행된 코드가 하나씩 쌓이게 됩니다.

장점으로는 데드락(교착 상태, 두 개 이상의 작업이 서로 끝나기만을 기다리고 있어서 다음 단계로 진입하지 못하는 상태) 같은 문제나 복잡한 시나리오를 고민할 필요는 없으나, 콜 스택에 처리 시간이 오래 걸리는 함수가 있다면 브라우저는 해당 함수가 실행되는 동안 아무것도 하지 못한다는 단점이 있습니다.

 

2. 호이스팅(Hoisting)이 무엇인가요?

자바스크립트에서 var 키워드로 선언된 모든 변수는 호이스트 됩니다. 자바스크립트에서 호이스트란 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미합니다. 즉, 변수가 함수 내에서 정의되었을 경우 선언이 함수의 최상위로, 함수의 바깥에서 정의되었을 경우 전역 컨텍스트의 최상위로 변경됩니다.

더 쉽게 말해 함수 또는 변수(var)의 선언이 실행 부분보다 뒤에 있더라도 자바스크립트 엔진이 함수 선언을 최상단으로 끌어올리는 것을 말합니다.

 

3. 클로저(Closure)가 무엇인가요?

클로저는 함수와 함수가 선언된 어휘적 환경의 조합입니다. 여기서 환경이라 함은 클로저가 생성될 때 그 범위에 있던 여러 지역 변수들이 포함된 컨텍스트를 말한다. 이 클로저를 통해 자바스크립트에는 없는 비공개(private) 속성, 공개 속성 메소드를 구현할 수 있습니다.

즉, 반환된 내부 함수가 자신이 선언 됐을 때의 환경 스코프를 기억하여 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수를 말합니다. (자신이 생성 될때의 환경을 기억하는 함수)

더 쉽게 말해 외부 함수에 의해 반환되는 내부 함수를 말합니다.

현재 상태를 기억하고 변경된 최신 상태를 유지해야할 경우, 전역 변수의 사용을 억제 해야할 경우, 정보를 은닉해야 할 경우 사용합니다.

 

4. 스코프(Scope)가 무엇인가요?

스코프의 정의는 식별자 접근 규칙에 따른 유효 범위로서 식별자는 변수, 함수, 클래스가 있고, 범위는 중괄호(블록, {}) 또는 함수에 의해 나눠집니다. 

전역(global) 스코프와 지역(local) 스코프가 있으며, 전역 스코프는 전역에 선언되어 어느 곳에서 접근 할 수 있고, 지역 스코프는 전역이 아닌 해당 범위 내에서만 접근할 수 있습니다.

즉, 범위 밖에서 선언된 식별자는 범위 안에서 사용할 수 있지만, 반대로 범위 안에서 선언된 식별자는 범위 밖에서 사용할 수 없습니다.

 

5. 전역 스코프를 사용했을 때의 장/단점은 무엇인가요?

전역 스코프는 함수 내에서 변경된 값을 전역에서 사용할 수 있고, 저장된 값이 사라지지 않는다는 장점이 있지만, 다른 개발자와 혐업 시 우연히 같은 변수의 이름을 사용해서 변수의 값을 덮어쓰는 불상사가 발생할 수 있다는 단점이 있습니다.

 

6. ES6에서 바뀐 문법은 무엇인가요?

• 비구조화 문법(const { age } = user; )
• 템플릿 리터럴(Template Literal, `, 백틱)
• 화살표 함수(Arrow Function, const ex = () => {};)
• let과 const
• import와 export
• promise
• 전개 연산자(Spread Operator, ...)
• 클래스 등등

 

7. let, const, var의 차이점이 무엇인가요?

기존 ES6 이전 버전에서는 변수를 선언할 때 var 키워드를 사용했는데, 이는 호이스팅(변수 선언이 스코프의 최상단으로 끌어 올려지는 것) 문제가 있어, 이 문제를 해결하고자 ES6에서 let과 const 키워드가 새롭게 추가되었습니다.

var는 함수 스코프이며, let과 const는 블록 스코프입니다. let과 const로 선언한 변수는 스코프 안에서만 참조 가능하지만, var로 선언한 변수는 블록 스코프를 무시합니다.

var는 중복 선언이 가능하지만, let과 const는 중복 선언을 허용하지 않으며, let은 값의 재할당이 가능하고, const는 재할당이 불가능하다는 차이점이 있습니다.

 

8. ES6를 지원하지 않는 지원하지 않는 브라우저에서 해결 방법은 무엇인가요?

babel을 이용해서 ES6 이상의 문법 코드를 ES5이하의 문법으로 변환하여 브라우저가 인식할 수 있게 합니다.

babel은 트랜스파일러이며, 특정 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환합니다. (C++ → C, ES6 → ES5)

 

9. 익명함수(Anonymous Function)는 주로 어떤 상황에서 사용하나요? 

익명함수는 즉시 실행이 필요할 때 사용합니다.

 

10. undefined와 null의 차이점이 무엇인가요?

두 타입 모두 값이 없음을 의미하지만,

undefined는 값을 의도적으로 할당하는 것이 아닌 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값입니다. 즉, 변수를 참조했을 때 undefined가 반환 된다면 초기화되지 않은 변수(값을 찾을 수 없음)라는 말입니다.

null은 변수는 선언했지만, 값이 없다는 것을 의도적으로 명시할 때 사용합니다. 이는 이전에 할당 되어 있던 값에 대한 참조를 명시적으로 제거하는 의미가 있습니다.

 

11. 가비지 컬렉션(Garbage Collection)이 무엇인가요?

할당된 메모리 공간을 주기적으로 검사하여 더 이상 사용되고 있지 않는 메모리는 해제하는 기능을 말합니다. 이를 통해 메모리 누수를 방지할 수 있습니다.

 

12. JSON이 무엇인가요?

JSON은 경량화 된 파일 형식이며, 데이터를 저장하거나 전송할 때 사용되는 하나의 규격입니다. 자바스크립트에서 모든 객체는 Key와 Value로 구성되어 있는데, JSON은 이러한 연관 배열을 표시하는데 매우 효과적인 방식입니다.

텍스트 포멧이며, 유니코드 인코딩 이기 때문에 데이터 용량은 적고, 전송 속도가 빠르다는 장점이 있습니다.

 

13. 함수 선언식과 함수 표현식의 차이가 무엇인가요?

함수 선언은 코드 블럭 자체가 실행 가능한 코드가 아니며, 해당 코드 블럭을 콘솔에서 실행하여도 결과가 리턴되지 않습니다. 반대로 함수 표현식은 특정 변수에 할당되거나 즉시 실행 가능한 코드 블럭으로 존재합니다.

주요 차이첨은 호이스팅에서 차이가 발생합니다. 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않습니다.

 

14. 자바스크립트에서 this는 어떻게 작동하나요?

this는 자바스크립트 런타임 시 바인딩(프로그램의 어떤 기본 단위가 값을 결정 짓는 것)이 이루어지는 실행 컨텍스트 중 하나로, 해당 함수가 실행되는 동안에 사용할 수 있으며, 함수 호출 부분에서 this가 가리키는 것이 무엇인지 확인할 수 있습니다. 때로 복잡한 코드에서 암시적 바인딩에 의해 혼란스러운 경우가 많은데, 이런 문제를 해결하기 위해서 call이나 apply 같은 내장 유틸리티를 사용하여 명시적으로 바인딩 해줍니다.

 

15. Call, Apply, Bind 함수가 무엇인가요?

Call 과 apply는 함수를 호출하는 함수이며, 실행할 때 첫 번째 인자에 this로 바인딩하고 싶은 객체를 넘겨주어 실행합니다. 첫 번째 인자(this를 대체할 값)를 제외하고, 실제 함수 호출에 필요한 파라미터를 넣어줘야 하는데, apply는 두 번째 인자 부터 모두 배열에 넣어야 한다는 차이점이 있습니다.

bind는 함수를 호출하는 것이 아닌 this가 바인딩 된 새로운 함수를 리턴합니다.

 

16. AJAX가 무엇인가요?

자바스크립트에서 사용하는 라이브러리로 자바스크립트를 이용해 비동기적으로 브라우저와 서버가 데이터를 교환할 수 있는 통신 방식입니다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 웹 페이지 전체를 다시 로딩하지 않고도 서버와 통신하여 웹 페이지의 일부분만 갱신할 수 있습니다. 이로인해 자원과 시간을 많이 아낄 수 있습니다.

 

17. Callback을 사용하는 이유가 무엇인가요? 

디자인 패턴 중 하나인 옵저버패턴에서 나온 개념으로, 객체의 상태 변화(이벤트)가 발생 하였을 경우 함수를 통해 전달하게 되는데 이를 콜백함수라고 합니다.

사용하는 이유로는 서버에 어떠한 요청을 보내고, 기다리는 동안 다른 작업을 함으로써 동기적인 코드에 비해 성능을 향상시킬 수 있기 때문입니다.

하지만 무분별한 콜백함수 사용은 콜백지옥을 야기하기 때문에 이를 해결하기 위해 Promise가 등장하였습니다.

 

18. Promise가 무엇인가요?

비동기 연산이 종료된 이후에 그 결과 값이나 에러를 처리할 수 있도록 처리기를 연결하는 역할을 하는 객체입니다. 콜백지옥을 해결하기 위한 방법 중 하나로 Promise 객체를 통해 성공, 실패, 오류에 따른 후속처리가 바로 가능해 가독성도 좋아지고, 비동기 에러를 처리하기도 수월하다는 장점이 있습니다.

 

19. Async/Await은 무엇인가요?

Promise를 더 편하고 간결하게 사용하기 위해 나온 문법으로, Async는 Promise 객체를 통해 비동기적으로 처리된 내용을 동기적인 코드 진행 순서로 보여주는 역할을 하고, await은 Promise가 처리될 때 까지 기다렸다가 객체를 받아 처리하고, 만약 비동기 함수가 아닌 동기적 함수라면 리턴값을 그대로 받습니다.

Async와 await은 항상 같이 사용해야 하며, 함수 앞에 async만 붙이면 코드블럭이 자동으로  Promise 객체로 바뀌고, await은 async가 정의된 함수 안에서만 사용가능합니다. 

 

20. 자바스크립트의 원시 타입의 종류는 무엇인가요?

• number(모든숫자)
• string(문자열, 쌍따옴표나 홑따옴표로 감싼 모든 데이터 형식)
• bolean(논리형, true/false)
• object(객체)
• null(나중에 할당하기 위해 임의로 비워둔 상태)
• undefined(선언만 되고 값이 정의되지 않은 상태)

 

21. 자바스크립트의 Number 타입이 다른 언어들과 차이점이 무엇인가요?

다른 언어의 숫자 타입에는 int(정수), float(실수), double(실수) 등이 있어 타입을 세세하게 지정할 수 있지만, 자바스크립트에서는 모든 수를 실수로 처리하여 Number 타입 하나로 사용할 수 있다.

 

22. 실행 컨텍스트(Excution Context)가 무엇인가요?

실행 컨텍스트는 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념입니다. 자바스크립트의 코드들이 실행되기 위한 환경으로 스코프, 호이스팅, this, 함수, 클로저 등의 동작 원리를 담고 있는 자바스크립트의 핵심 원리입니다.

 

23. 렉시컬 환경(Lexical Enviroment)이 무엇인가요?

렉시컬 환경은 코드를 실행하기 앞서 생성되는 특별한 객체로, 실행할 코드 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체입니다.

전역코드가 시작되면 렉시컬 환경 객체가 만들어지고, 코드를 실행하기 앞서 선언되어 있는 변수와 함수를 글로벌 환경 레코드에 저장하는 방식입니다.

 

24. 이벤트 버블링과 캡처링이 무엇인가요?

이벤트 버블링은 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 최상단의 부모 요소를 만날 때 까지 반복되면서 각 요소들의 할당된 핸들러가 동작하는 현상을 말합니다.

이벤트 캡처링은 버블링과 반대로 최상위 태그에서 해당 태그를 찾아 내려가는 현상을 말합니다. 

 

25. 이벤트 위임이란 무엇인가요?

이벤트 위임이란 하위요소의 이벤트를 하나하나 등록하는 것이 아니라 상위 요소에서 하위 요소의 이벤트를 제어하는 방법을 말합니다.

 

26. 프로토타입(Prototype)이 무엇인가요?

객체지향언어에서는 클래스 기반과 프로토타입 기반으로 구분되는데, ES5 이전 버전의 자바스크립트에는 클래스라는 개념이 없어서 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입을 사용하였습니다.

프로토타입이란 인스턴스가 사용할 프로퍼티(객체안에 내장 된 변수)나 메소드(객체 안에 내장된 함수)를 부모 객체에 구현해 놓으면 이를 연결하여 자신의 것 처럼 쓸 수 있습니다. 즉, 상속과 같은 개념으로 이런 부모 객체를 프로토타입이라고 합니다.

ES6 버전 부터 클래스를 도입해 클래스 기반 객체지향으로 사용되고 있습니다.

 

27. 클래스(Class)가 무엇인가요?

ES6 버전부터 새롭게 추가 된 문법으로 특정 객체를 생성하기 위해 변수와 메서드를 정의하는 일종의 틀 역할을 합니다. 객체를 정의하기 위한 멤버변수와 메서드(함수)로 구성 되며 하나의 클래스를 통해 동일한 구조를 갖는 객체를 여러개 생성할 수 있습니다.

 

28. 깊은 복사와 얕은 복사의 차이는 무엇인가요?

깊은 복사는 데이터 자체를 복사하여 서로 독립적인 메모리를 차지해 원본을 수정해도 복사본은 변경되지 않습니다. (반대의 경우도 마찬가지)

얕은 복사는 값 자체를 복사하는 것 이 아닌 주소값을 복사하여 같은 메모리를 가르킵니다. 원본을 수정하면 복사본도 함께 수정됩니다.

 

29. DOM이 무엇인가요?

DOM이란 문서 객체 모델의 약자로 HTML 요소들을 웹 브라우저에서 자바스크립트로 사용하기 위해 만들어진 웹 문서입니다. 객체 모델을 통해 자바스크립트는 동적 HTML을 생성하는데 필요한 모든 기능을 얻을 수 있습니다. 즉, DOM은 HTML 요소를 가져오고, 변경하고, 추가하거나 삭제하는 방법에 대한 표준입니다.

 

30. 이벤트 루프란 무엇인가요?

싱글 스레드 기반의 언어인 자바스크립트는 이벤트 루프를 이용해서 비동기 방식을 사용합니다.

 

31. 화살표 함수와 일반 함수의 차이점이 무엇인가요?

화살표 함수는 ES6부터 도입된 문법으로 함수를 간단하게 표현할 수 있게 해줍니다. 일반 함수는 this가 동적으로 바인딩 되는 반면, 화살표 함수는 바로 상위 스코프의 this와 같습니다. 일반 함수에서는 함수가 실행될 때 암묵적으로 arguments 변수가 전달되어 사용할 수 있지만, 화살표함수는 전달되지 않습니다.

 

32. 함수형 프로그래밍이 무엇인가요?

함수형 프로그래밍은 순수함수(같은 입력시 같은 출력 반환)와 보조함수의 조합을 통해 로직내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍을 말합니다.