자바스크립트 핵심 용어정리! (프론트엔드 단골 면접 질문 모음)

- Javascript 란? 

HTML과 CSS는 정적인 언어이다. 브라우저에서 화면에 보여지면 변경 할 수 없다는 의미이다.

하지만 자바스크립트는 웹 페이지를 동적으로 변경해주는 언어이다. 

(초기의 자바스크립트는 기능이 적고, 주류가 아닌 객체지향 모델이어서 인기가 많지 않았다)

구글이 구글 맵스를 자바스크립트와 HTML, CSS만으로 데스크탑 애플리케이션과 유사한 빠른성능의 부드러운 브라우저를 보여주자,

AJAX, JQUERY등과 함께 빠르게 성장하였다.

자바스크립트는 단순하지만, 프로그래밍에 중요한 변수, 반복, 조건, 함수, 객체까지 중요한 것들을 가지고 있는 프로그래밍 언어이고, 다양한곳에서 많이 사용되고 있는 중요한 언어라고 할 수 있다.

 

- 타입스크립트란? 

코드에 목적을 명시하고 맞지않는 타입이나 변수들이 들어왔을시 에러를 발생시켜 버그를 사전에 제거하기 위해 쓰는 자바스크립트의 확장언어이다. 

- 동적언어? 

자바스크립트는 런타임에 타입이 결정되는 동적언어이다. 컴파일 시간에 변수의 타입이 결정되는 c, c++,java같은 정적언어와는 다르다. 

따라서 런타임까지 타입에 대한 결정을 끌고 갈 수 있기 때문에 선택의 여지가 있는 반면, 실행 도중에 타입에러가 종종 발생한다. 

- 변수 선언, 초기화 할당이 무엇인가? 

변수란 하나의 값을 저장하기 위해 확보된 메모리 공간 자체를 의미한다. 말 그대로, 변할수 있는 데이터.

변수에는 메모리 공간을 식별하기 위한 식별자인 변수명이 붙게 된다. 

 

변수 선언이란, var let const등의 키워드를 사용하여 변수를 정의하는 것을 의미한다.

변수 할당이란, 변수가 선언된 후 연산자를 통해 값을 넣어주는것을 의미한다.

변수 초기화란, 변수를 선언함과 동시에 값을 넣어 주는 것을 의미한다. 

 

- var, let, const 

변수	중복 선언	재 할당	호이스팅	스코프	생성 과정
var	가능	가능	발생	함수 스코프	1. 선언 및 초기화 단계 2. 할당 단계
let	불가능	가능	발생	블록 스코프	1. 선언 단계 2. 초기화 단계 3. 할당 단계
const	불가능	불가능	발생	블록 스코프	1. 선언 + 초기화 + 할당

 

따라서 var 변수의 단점은
1. 중복선언으로 인해 예기치 못한 값의 반환
2. 함수가 아닌 다른 블록 스코프에서 선언된 변수는 모두 전역 변수로 취급되어 예기치 못한 할당 
3. 선언 전에 변수를 참조하면 undefined가 될 수 있음

3가지 문제가 발생할 수 있으므로 var 변수를 사용하는 것을 지양하고 let or const 변수를 사용 할 것을 권장 

 

- Scope ( 스코프 ) : 현재 실행되는 컨텍스트

식별자 (변수명, 함수명, 클래스명 등)의 유효 범위를 의미한다.

컨텍스트 : 값과 표현식이 표현되거나 참조될 수 있음을 의미

자바스크립트는 함수스코프를 따르는 언어이기 때문에, 함수에서 선언한 변수들은 해당 함수 내에서만 접근할 수 있다. 

let const 등장이후로 자바스크립트도 블록스코프를 가질수도 있다. 

렉시컬 스코프는 함수를 어디서 호출하는지가 아닌, 어디에 선언하였는지에 따라 결정된다.

 

- 자바스크립트의 데이터 타입 

자바스크립트에서는 크게 기본원시타입과 참조객체타입이 있다.

원시 타입은 변수에 할당할때, 메모리에 고정 크기로 원시 값을 저장하고 해당 저장된 값을 변수가 직접적으로 가리키는 형태를 띈다. 

참조 타입은 변수의 크기가 동적으로 변하기 때문에, 객체 데이터 자체가 별도의 메모리 공간에 저장되고, 데이터에 대한 메모리 주소를 가지고 변수의 값에 접근하게 된다. 따라서 메모리 주소로 데이터값을 참조하기에 참조 타입이라고 불리는 것이다. 

참조 타입을 제외하면 원시 타입이라고 생각하면 되기 때문에, 참조 타입을 인지하고 있으면 된다.

참조 타입에는 객체, 배열, 함수, 정규표현식이 있다. 

 

- 생성자란 ? this 란? 

객체를 생성하는 함수를 생성자 함수 (constructor)라고 한다. 다른 언어에서는 class를 사용하지만 자바스크립트에서는 생성자 함수가 그 역할을 대신한다. 자주쓰이는 new Date()가 대표적인 생성자의 예이다. 

그리고 생성자 함수안에서 쓰이는 this의 개념은 생성자 함수 자신을 가르키며, 함수 내부에서 다양한 메서드나 선언에서 사용된다. 

 

- 프로토타입이란? 

자바스크립트는 프로토타입 기반 언어이다. 프로토타입은 객체의 원형이다. 

이해하기 쉽게 예시를 들어 생각해보면 우리는 아무런 생각없이 const arr = [1,2,3] 을 만들고 push, pop의 기능을 사용할 수 있다. 
이는 내부적으로 배열 자료형에는 배열에 해당하는 메서드를 쓸수있도록 처리를 해주었기 때문이다.

new Array() 배열 생성자로 arr을 생성해준것이다. 따라서 new Array()안에는 Prototype 객체 안에 push와 pop이 있는것이고 arr은 Array생성자를 통해 만들어져서 prototype을 상속받을수 있는것이다! 

 

- 프로토타입 체인이란?

인스턴스 객체의 key에 접근 할 때, 해당 객체에게 key가 없다면 그 다음으로 상위 프로토타입(원형) 속성에서 키가 있는지 확인한다.

없다면 그것을 찾기 위해 더 상위의 프로토타입(부모)에서 찾는다. 이것을 프로토타입 체인이라고 한다. 

 

- 콜백 함수란?  콜백 지옥 해결법은 ? 

다른 함수의 인자로써 이용되는 함수 , 어떤 이벤트에 의해 호출되어지는 함수를 의미한다. 

비동기 처리 로직을 위하여 콜백함수를 연속해서 사용할 때 코드가 점점 깊어지며 발생하는 문제가 콜백지옥이라고 한다. 

일반적인 해결 방법에는 비동기 연산이 종료된 후에 결과를 알기위해 사용하는 객체인 Promise나, 항상 프러미스 객체 형태를 반환하는 async-await를 써서 해결한다. 

- Promise란 ? 

프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 자바스크립트는 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하기 때문에, 프론트에선 많은 처리를 위해 비동기 처리에 관해 알고있어야 한다. 

프로미스는 기본적으로 3가지의 상태를 가지고 있다. 

- Pending ( 아직 완료되지 않은 대기 상태)

- Fullfilled ( 완료되어 프로미스가 결과값을 반환해준 상태)

- Rejected ( 비동기 처리가 실패하거나 오류가 발생한 상태)

Promise의 상태에 따라 .then()을 이용하여 동기적 통신을 완성시키고, .catch()를 이용하여 에러가 났을때의 상황을 분기처리 할 수 있다. 

 

- Callback과 Promise의 차이는 ? 

callback을 사용하면 비동기 로직의 결과값을 처리하기 위해 callback안에서만 처리를 해야하고, 콜백 밖에서는 비동기에서 온 값을 알 수가 없다. 하지만 promise를 사용하면 비동기에서 온 값이 promise 객체에 저장되기 때문에 코드 작성이 용이해진다. 따라서 원하는 시점에 .then을 통하여 원하는 때에 저장된 값을 사용할 수 있다. 

- Async & Await 란 무엇이며 사용 방법은? 

자바스크립트의 비동기 처리 패턴중 가장 최근의 나온 문법이다. 기존 방식인 콜백함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 한다. 함수의 앞에 async를 붙이고, 함수 내부 로직중 http통신을 하는 비동기 처리 코드 앞에 await를 붙이고, 비동기 처리 메서드가 프로미스 객체를 반환하면 의도 된대로 await가 동작하게 되는것이다. 

 

- Ajax란? 

자바스크립트의 라이브러리중 하나이다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체페이지를 고치지 않고도 일부만을 위해 데이터를 로드하는 기법. 자바스크립트를 사용한 비동기 통신으로 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.

 

- TDZ란?

일시적 사각 지대라는 의미이며, 변수가 선언되고 변수의 초기화가 이루어지기 전의 구간이다.

var를 통한 변수 선언은, 호이스팅이 일어나서 최상단에서 선언과 초기화가 동시에 이루어진다. 따라서 undefined로 참조하지만

let/const를 통한 변수 선언은, 호이스팅이 일어나서 최상단에서 선언이 이루어지고, 그 다음에 초기화가 이루어진다. 이 사이에서 값이 할당되지 않았으므로 참조할수 없는 에러가 발생한다. 이 사이를 TDZ라고 부르는것이다. 

 

- 함수 선언식과 표현식

함수 선언식은 일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식이다. function 함수명 (){}

함수 표현식은 유연한 자바스크립트 언어의 특징을 활용한 선언방식이다. const 함수명 = function (){}

둘의 가장 큰 차이점은 함수 선언식은 호이스팅에 영향을 받지만, 표현식은 호이스팅에 영향을 받지 않는다. 

 

- 클로저?

외부 변수를 기억하고 이 와부 변수에 접근할수 있는 함수를 의미한다. 

외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할수 있다.

또한 클로저 모듈 패턴을 활용하여 정보의 접근을 제한하기도 하고
보다 기능들을 독립적인 부품형태로 분리하여 코드를 짤수 있다.

( 프로젝트에서 모듈 패턴을 사용할 때, 하나의 모듈을 생성해주고 함수 안에서 private한 변수와 데이터들을 이용해 return값으로 모듈 외부에서 공개적으로 사용될 데이터나 메서드들을 가지고 있는 객체를 반환해주는식이다)

 

- 깊은복사 얕은복사

깊은 복사는 '실제 값'을 새로운 메모리 공간에 복사하는것을 의미하며, 얕은 복사는 참조하는 '주소값'을 복사하는 의미라 실제 값이 같은것을 의미한다. 

 

- ES6란?

이크마스크립트란 자바스크립트의 표준 사양이다. 각 브라우저 제조사는 ECMAScript 사양을 준수해서 브라우저에 내장되는 자바스크립트 엔진을 구현한다. let&const, arrow function, 파일 단위의 모듈화 , Promise, 구조분해 할당 등이 새로 추가 되었다.  

 

- 이벤트 루프란? 

자바스크립트 런타임(browser, nodejs)에서 가지고 있는 하나의 장치이다. 

콜 스택과 테스크 큐를 감시하며, 콜 스택이 비어있는 경우에 테스크 큐에서 가져와 콜 스택에 넣어주는 동작을 한다.

자바스크립트는 싱글스레드 언어라서 하나의 코드나 하나의 프로젝트밖에 실행을 못하지만, 이벤트 루프 & Web API & Callback Queue로 인해 멀티스레드처럼 보인다. 따라서 자바스크립트 자체는 싱글스레드가 맞지만, 런타임 환경까지 생각하면 멀티스레드로 동작한다. 

 

- Web API 란?

브라우저 API는 브라우저에 내장되어있는 API로 브라우저를 이용해 복잡한 작업들을 쉽게 구현할 수 있도록 도와준다. 비디오 플레이를 예를 들면, 소리가 나고 영상이 보여지도록 동작하는것은 백그라운드에서 로우한 언어로 복잡하게 구현이 되어있지만, 사용자가 쉽게 자바스크립트로 사용할 수 있도록 처리가 되어잇다. 

써드파티 API는 브라우저에 내장된 것이 아닌, 외부에서 가져다 쓰는 API이다. 유튜브, 구글지도 등이 키를 발급해주고 사용하게 해주는 예가 써드파티 API이다. 

- 즉시 실행 함수란?

함수 전체에 소괄호가 씌워진 형태로, 선언과 동시에 호출되어 반환되어 재사용 할 수 없는 함수이다.

필요없는 전역 변수의 생성을 막을수 있고, private한 함수를 만들수 있다.