- 자바스크립트는 무슨 언어인가요?
- 실제 사용 시에는 멀티 스레드처럼 사용하는데 어떻게 사용하나요?
:자바스크립트는 싱글 스레드 언어입니다. 싱글 스레드 언어는 한 번에 하나의 작업만 가능하며 함수를 실행하면 함수 호출이 스택에 순차적으로 쌓이며 맨 위에서부터 차례대로 하나씩 처리하게 됩니다.
자바스크립트는 싱글 스레드 언어임에도 불구하고 여러 작업을 동시에 할 수 있는데 그 이유는 브라우저의 Web APIs 등을 이용해 비동기 작업이 가능하기 때문입니다.
:자바스크립트 자체가 싱글 스레드 언어임에도 불구하고 웹 사이트를 끊김없이 여러 작업을 할 수 있는 이유는 브라우저가 web API 등을 제공해 비동기 작업을 가능하게 해주기 때문에 멀티 스레드처럼 사용할 수 있는 것입니다. 만약 setTimeout 함수를 실행한다면 자바스크립트 엔진은 call stack에서 Web APIs로 보내고 정해진 시간 혹은 이벤트가 발생한 순간에 순차적으로 callback queue에 적재합니다. 그리고 이벤트 루프를 통해 콜 스택이 비었을 때 콜백 큐에 있는 작업을 실행시켜 비동기 처리를 하게 됩니다.
(Web APIs에는 setTimeout, DOM, AJAX가 있다.)
- 변수 선언, 초기화, 할당의 차이점에 대해 설명해주세요.
:변수 선언은 실행 컨텍스트에 변수 객체를 등록하는 단계하고 초기화 단계에서 이전에 사용했던 쓰레기 값이 남아있을 수 있기 때문에 undefined로 초기화 됩니다. 마지막으로 할당 단계에서 undefined로 초기화된 메모리에 할당 연산자를 사용하여 다른 값을 할당하는 것입니다.
- 데이터 타입에 대해 설명해주세요.
:자바스크립트의 언어 타입은 원시 값과 객체로 나뉘어집니다. 객체를 제외한 모든 타입은 불변 값을 정의합니다. 이런 타입을 원시 값이라 하며 불리언 타입, 널 타입, undefined 타입, number 타입, string 타입 등이 있습니다. 이러한 원시 타입을 제외하고 모두 객체로 취급되어 배열이나 함수 등도 모두 객체로 표현됩니다.
- 생성자에 대해 설명해주세요.
- new 연산자란?
:자바스크립트에서 생성자는 객체를 생성하는 함수입니다. 생성자 함수를 사용하여 객체를 생성하면 같은 프로퍼티와 메서드를 가진 여러 객체를 간편하게 생성할 수 있습니다. 생성자 함수를 만든 후 new 연산자와 함께 호출하여 객체를 생성할 수 있게 됩니다.
: 자바스크립트에서 객체 생성을 위해 사용되는 연산자입니다. new 연산자를 사용하면 새로운 객체가 생성되고 생성된 객체의 proto 프로퍼티가 생성자 함수의 prototype 속성을 가리키도록 설정됩니다. 생성자 함수가 호출되면 this 키워드는 생성된 객체를 가리키게 됩니다.
- ⭐ this에 대해 설명해주세요.
- call, apply, bind에 대해 설명해주세요.
- (bind 메서드는 함수를 호출하면서 함수 내부에 this 키워드가 가리키는 객체를 명시적으로 지정하는 것이 아니라 새로운 함수를 생성하는데 이때 생성된 함수를 바운드 함수, 또는 바인딩된 함수라고 합니다. 바운드 함수는 원본 함수를 그대로가 지고 있지만 this 키워드가 지정한 객체를 가리키게 됩니다.)
:this는 해당 함수가 속한 객체를 참조하는 키워드입니다. 함수 호출 할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정됩니다. 일반 함수 내부에서는 전역 객체와 바인딩되며, 메서드 내부에서는 메서드를 호출한 객체와 바인딩됩니다. 생성자 함수 내부에서는 생성자 함수가 생성할 인스턴스와 바인딩됩니다. call, apply, bind 메서드를 사용한 경우 첫 번째 인수로 전달하는 객체에 바인딩됩니다.
: call, bind, apply 메서드를 이용하면 함수 호출 시 함수 내부의 this가 가리키는 객체를 명시적으로 지정할 수 있습니다.
call과 apply는 함수를 호출하는 함수이며 첫 번째 인자로 바인딩할 객체를 전달받게 됩니다. call과 apply의 차이점은 파라미터를 입력하는 방식의 차이가 있습니다. call은 파라미터를 그냥 넘겨주지만 apply는 파라미터를 두 번째 인자로 배열 형태로 넘겨주게 됩니다. bind 는 call, apply와 달리 함수를 실행하지 않습니다. 대신 bound 함수를 리턴하며 이 bound 함수는 bind에서 전달받은 객체를 this로 갖고 있기 때문에 언제든 사용할 수 있습니다.
- ⭐ 콜백 함수에 대해 설명해주세요.
- ⭐ 콜백 지옥을 해결하는 방법을 설명해주세요.
:콜백함수란 파라미터로 함수를 전달받아 함수의 내부에서 실행하는 함수입니다. 콜백함수를 사용할 땐 익명 함수를 사용하고 함수의 이름만 넘겨주어야합니다. 이러한 콜백 함수를 이용하여 하나의 함수를 여러가지로 응용하여 코드를 재활용 할 수 있고 특정 로직이 끝났을 때 원하는 동작을 실행시켜 비동기 처리를 할 수 있습니다. 하지만 콜백 함수를 과용하다보면 콜백지옥이 발생할 수 있으므로 주의해야 합니다.
: 콜백 지옥을 해결하는 방법으로는 Promise 또는 Async를 사용하는 방법이 있습니다. Promise를 사용하면 동기 메서드처럼 값을 반환하며 then, catch문의 체이닝을 통해 값을 반환 받을 수 있습니다. Promise 생성자 함수 안에서 로직에 성공한 경우 resolve를 실패한 경우 reject를 호출하면 다음 작업으로 이어갈 수 있습니다. 하지만 then 안에 Pomise를 넣고 또 then으로 연산하고 이런 식으로 작업하면 다시 콜백 지옥과 유사해집니다. 이 때 사용할 수 있는 것이 async입니다. 함수 앞에 async를 표기하고 함수 내부에 비동기 작업이 필요한 위치에 await를 표기하면 해당 로직이 Promise로 자동 전환되고 resolve 된 이후에 다음으로 진행됩니다.
- ⭐ Promise에 대해 설명해주세요.
- Promise.all() 에 대해 설명해주세요.
- Promise.race는?
: 자바스크립트 비동기 처리에 사용되는 객체입니다. Promise 생성자 함수로 프로미스를 생성하고 종료될 때까지 3가지의 처리과정을 거칩니다. 비동기 처리 로직이 아직 완료되지 않은 경우 팬딩, 대기상태, 처리가 완료되어 프로미스 결과 값을 반환해준 경우 풀필드, 완료 상태, 처리에 실패한 경우 리젝티드, 실패 상태가 됩니다. Promise는 인자로 resolve와 reject를 받는데 resolve를 실행하면 완료 상태가 되어 then으로 결과 값을 받을 수 있고 reject를 호출하면 실패 상태가 되어 catch로 결과 값을 받을 수 있습니다. 마지막으로 finally는 이전 프로미스의 처리 결과가 성공하던 실패하던 항상 실행됩니다.
:Promise.all은 여러 개의 프로미스 객체들을 배열로 받아 해당 프로미스 객체들이 모두 완료될 때까지 대기하다가 모든 프로미스 객체들이 완료되면 그 결과값을 배열 형태로 반환하게 됩니다. 만약 하나라도 실패할 경우 바로 rejected되어 모든 프로미스 객체가 완료되지 않더라고 즉시 종료됩니다.
: Promise.race는 여러 개의 프로미스 객체를 배열로 받아 가장 먼저 완료한 프로미스 객체의 결과값을 반환합니다. 가장 먼저 완료되는 값만 반환하며 다른 프로미스 객체들은 무시되며 가장 먼저 완료한 프로미스 객체가 실패할 경우 rejected 됩니다.
- ⭐ Promise와 Callback를 비교 설명해주세요.
: Promise는 비동기 처리를 하는 객체로 reslove와 reject를 인자로 받아 상태 값에 따라 결과 값을 처리할 수 있습니다. 콜백으로도 비동기 처리가 가능한데 콜백 함수를 인자로 전달하여 원하는 로직이 끝난 후에 해당 콜백 함수를 호출하는 방법입니다. 하지만 콜백 함수가 반복되면서 콜백 지옥에 빠질 수 있습니다. 이러한 콜백 지옥의 해결방안이 Promise입니다. Promise는 resolve를 호출한 경우 then에서, reject를 호출한 경우 catch에서 값을 받기 때문에 콜백 지옥을 해소할 수 있습니다.
- ⭐ Async, Await이 뭔지 그리고 사용 방법을 설명해주세요.
: async awiat는 프라미스를 더 쉽게 사용하기 위해 es8에서 도입된 비동기 처리 문법 중 하나 입니다. 함수 앞에 async를 붙이면 해당 함수는 항상 promise를 반환하게 됩니다. await 는 async 함수 안에서만 사용할 수 있는데 await 키워드를 만나면 해당 프라미스가 처리될 때까지 기다면서 실행이 잠시 중단되었다가 프라미스가 처리되면 실행이 재개됩니다. 이러한 async await는 promise를 반환할 함수 앞에 async를 해당 함수 안에서 비동기 처리를 할 로직에 await 키워드를 붙여 사용할 수 있습니다.
- ⭐ Promise와 Async, Await의 차이를 설명해주세요.
async await는 promise의 then 지옥이 일어날 수 있는 것을 해소하기 위해 promise를 더 쉽게 사용하기 위한 문법입니다. promise의 경우 catch를 통해 에러 핸들링이 가능하지만 async/await는 따로 기능이 없어 try/catch 문을 활용해야 합니다. 또한 코드 가독성 측면에서 Promise는 then이 계속 연결되는 가독성 문제가 생길 수 있는데 async await는 코드가 동기 코드 처럼 읽히게 해주기 때문에 가독성이 좋아 코드 흐름을 이해하기 쉽습니다.
- AJAX에 대해 설명해주세요.
:AJAX는 서버와 비동기적으로 데이터를 주고받는 기술입니다. AJAX를 사용하여 화면 전환이나 새로고침 없이도 서버로부터 데이터를 동적으로 로드하거나 업데이트할 수 있습니다. AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 자원과 시간을 아낄 수 있습니다.
- ⭐ var, let, const 차이를 설명해주세요.
- TDZ에 대해 설명해주세요.
: var는 함수 스코프를 갖고, let과 const는 블록스코프를 갖습니다. 따라서 var는 함수 내부에서 함수 스코프의 최상단으로 호이스팅이 되고 선언과 동시에 undefined로 초기화됩니다. let과 const는 블록 스코프의 최상단으로 호이스팅 되며 선언만 이루어져 값이 할당되기 전까지 어떠한 값도 가지지 않아 접근할 수 없는 것을 TDZ라고 합니다. 마지막으로 var는 재할당과 재선언이 가능하고 let은 재할당은 가능하지만 재선언은 불가능합니다. const는 상수처럼 사용하기 때문에 재할당이 불가능합니다.
:TDZ란 임시적 사각지대로 자바스크립트에서 변수가 선언되었지만 초기화되지 않은 상태를 의미합니다. es6에서 도입된 let과 const의 경우 호이스팅으로 선언이 블록의 최상단으로 끌어올려지지만 초기화와 할당이 일어나지 않아 해당 변수에 대한 초기화, 할당이 일어나기 전까지는 TDZ입니다.
- 함수 선언형과 함수 표현식의 차이에 대해 설명해주세요.
- (함수 표현식이 호이스팅이 일어나지 않는 이유는 일반 변수와 같이 변수에 할당하기 전에 호출할 경우 TDZ로 인해 오류가 나타난다.)
: 함수 선언식과 함수 표현식은 자바스크립트에서 함수를 선언하는 두 가지 방법입니다. 첫번째 차이는 문법입니다. 함수 선언식은 function 키워드로 시작하며 함수 이름을 호출하여 사용할 수 있습니다. 함수 표현식은 함수를 변수로 저장하는 것이며 이 때 변수를 함수처럼 사용할 수 있어 변수 이름을 통해 호출할 수 있습니다. 두번째는 스코프입니다. 함수 선언식은 함수 스코프를 갖고 함수 표현식은 어떤 키워드의 변수에 할당하는지에 따라 스코프가 달라집니다. var 라면 함수 스코프를, let, const라면 블록 스코프를 가집니다. 마지막은 호이스팅입니다. 함수 선언문은 호이스팅의 영향을 받지만 함수 표현식은 호이스팅의 영향을 받지 않습니다.
- ⭐ 이벤트 버블링과 캡처링에 대해 설명해주세요.
- ⭐ 이벤트 위임에 대해서 설명해주세요.
- 이벤트 위임의 동작 방식에 대해서 설명해주세요.
: 이벤트 버블링이란 하위요소에서 상위요소로의 이벤트 전파방식으로 HTML 구조상 자식요소에서 발생한 이벤트가 상위요소까지 영향을 미치는 것을 의미합니다. 이렇게 버블링은 document 개체를 만날때까지 동작하고 event.stopPropagation을 통해 버블링을 중단할 수 있습니다.
이벤트 캡쳐링은 이벤트 버블링과 반대로 상위요소에서 하위요소로의 이벤트 전파방식을 의미합니다. 캡처링은 addEventListener의 세번째 인자로 true를 설정하면 구현할 수 있습니다.
: 이벤트 위임은 버블링과 캡쳐링을 이용하여 여러 엘리먼트마다 각각 이벤트 핸들러를 할당하지 않고 공통되는 부모에 이벤트 핸들러를 활용하여 이벤트를 관리하는 방식입니다. 버튼 여러 개에 이벤트를 처리해야 할 때 각 버튼마다 이벤트를 등록하는 것이 아니라 해당 버튼들의 공통된 부모에게 이벤트를 등록하여 중복되는 이벤트 처리를 방지할 수 있습니다.
- ⭐ 호이스팅과 발생하는 이유에 대해 설명해주세요.
: 호이스팅이란 코드가 실행하기 전에 변수, 함수 선언이 해당 스코프 최상단으로 끌어 올려진 것 같은 현상을 의미합니다. 자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정을 거치는데 이 과정에서 렉시컬 환경이 생성되고 렉시컬 환경의 환경 레코드에 변수와 함수가 저장이 됩니다. 이렇게 생성 단계에서 자바스크립트 엔진이 모든 선언을 인지하게 되면서 호이스팅이 발생합니다. 따라서 var, let, const 변수를 사용했을 경우 해당 스코프 내에서 호이스팅이 발생하고 함수 선언 역시 호이스팅 됩니다.
- 스코프 (Scope)에 대해 설명해주세요.
- 스코프 체인에 대해 설명해주세요.
:스코프는 변수가 유효한 범위를 나타내는 개념으로 변수가 선언된 위치에 따라서 결정됩니다. 크게 전역 스코프와 지역 스코프가 있는데 전역 스코프는 프로그램 전체에서 유효하며 모든 블록에서 접근할 수 있습니다. 하지만 지역 스코프는 해당 스코프 내에서만 유효하기 때문에 외부에서는 접근이 불가능 합니다. 이러한 스코프는 같은 변수명 끼리 충돌하는 것을 방지할 수 있습니다.
: 자신이 속해있는 지역 변수에 찾는 값이 없다면 상위 레벨의 스코프로 값을 찾아나가는 현상을 스코프 체인이라고 합니다. 스코프 내부에 찾는 변수가 없다면 해당 스코프를 포함하고 있는 상위 스코프에서 해당 변수를 찾으며 전역 스코프까지 찾아갑니다. 만약 전역 스코프에도 찾는 값이 없다면 null로 설정됩니다.
- ⭐ 클로져(Closure)에 대해 설명해주세요.
: 클로저는 내부함수에서 외부 함수의 맥락에 접근할 수 있는 것을 의미합니다. 외부 함수 안에 내부함수가 있고 내부함수에서 외부함수의 지역변수에 접근하고 있을 때 외부함수의 호출이 끝나도 외부 함수의 렉시컬 환경에 접근할 수 있기 때문에 지역변수를 활용할 수 있습니다. 이러한 클로저를 사용하면 함수 내부의 변수를 외부에서 접근하지 못하도록 막아 정보은닉이 가능합니다. 하지만 외부 함수의 변수를 참조 할 때 메모리가 계속 유지될 수 있기 때문에 필요한 경우에만 사용해야 합니다.
- 실행 컨텍스트에 대해 설명해주세요.
- 렉시컬 환경(Lexical Environment)에 대해 설명해주세요.
: 실행컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 말합니다. 모든 자바스크립트 코드는 실행 컨텍스트 내부에서 실행되게 됩니다. 실행 컨텍스트에서 식별자를 등록하고 관리하는 스코프와 코드 실행 순서를 관리하고 있습니다. 실행 컨텍스트를 콜스택에 쌓아올린 후 실행하여 코드의 환경과 순서를 보장할 수 있게 됩니다.
: 렉시컬 환경은 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체입니다. 렉시컬 환경은 환경 레코드와 외부 렉시컬 환경 두 부분으로 구성되어 있습니다. 환경 레코드는 현재 실행 중인 코드 환경의 this값과 선언된 모든 변수, 함수가 저장되는 곳이고 외부 렉시컬 환경은 외부 변수에 접근할 수 있도록 외부 렉시컬 환경의 참조값을 가지고 있습니다. 이러한 외부 렉시컬 환경은 함수가 실행되는 시점이 아닌 선언된 시점의 외부 환경을 가리키게 됩니다.
- 자바스크립트에서 일어나는 데이터 형변환에 대해 설명해주세요.
- 자바스크립트가 동적 언어인 이유는 무엇인가요?
: 런타임에 변수의 자료형을 결정하며 코드를 실행하는 동안에도 프로그램의 동작을 바꿀 수 있어 동적 언어로 분류됩니다. 자바스크립트 변수의 자료형은 선언 시점에 결정되는 것이 아니라 할당되는 값의 자료형에 따라 동적으로 결정됩니다. 또한 함수를 변수에 할당하거나 함수를 인자로 전달하는 등의 동적인 작업이 가능하여 유연한 코드 작성이 가능하다 버그를 발생시킬 가능성이 높아집니다.
- 프로토타입에 대해 설명해주세요.
: 자바스크립트의 모든 객체는 하나 이상의 다른 객체로부터 상속을 받는데 이때 상속되는 정보를 제공하는 객체를 프로토타입이라고 합니다. 프로토타입 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용합니다. 프로토타입을 상속 받은 하위 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있습니다.
- 깊은 복사와 얕은 복사에 대해 설명해주세요.
: 얕은 복사는 객체 또는 배열의 참조를 복사하는 것이고, 깊은 복사는 객체 또는 배열의 모든 값을 복사하는 것입니다. 얕은 복사의 경우 새로운 객체를 생성하고 원본 객체의 참조를 복사하기 때문에 원본 객체의 값이 변경되면 복사된 객체의 값도 변경됩니다. 깊은 복사의 경우 원본 객체의 값을 복사하여 새로운 객체를 생성합니다. 깊은 복사로 생성된 객체는 원래 객체와 독립적으로 작동하게 되어 원본 객체를 변경해도 복사된 객체는 변경되지 않습니다.
- 불변성을 유지하려면 어떻게 해야하나요?
- Blocking과 Non-Blocking에 대해 설명해주세요.
- ⭐ 동기와 비동기에 대해 설명해주세요.
: 동기는 한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 차례를 기다려서 순서대로 진행되는 것을 의미합니다. 반대로 비동기는 순서대로 진행되는 것이 아니라 어떤 요청이 있을 때 해당 요청이 끝날 때까지 기다리지 않고 응답에 관계없이 바로 다음 동작이 실행되는 방식을 의미합니다.
- ES6에서 새로 생긴 기능을 아는대로 말씀해주세요.
: let과 const, 화살표 함수, 모듈, rest와 spreed 연산자, 구조분해 할당
- undefined, null, undeclared를 비교해주세요.
- 자바스크립트를 멀티 쓰레드처럼 사용하는 방법이 뭔가요? / 자바스크립트에서 비동기 로직이 어떻게 동작하는지 설명해주세요. (이벤트 루프)
: 자바스크립트는 싱글 스레드이지만 이벤트 루프를 통한 비동기 방식으로 동시성을 지원합니다. 자바스크립트는 콜스택에서 비동기 함수를 만나면 바로 지워버리고 해당 비동기 함수는 Web API로 넘어갑니다. 이 비동기 함수가 실행되는 동안 콜 스택을 실행하면서 다른 작업을 처리합니다. 비동기 함수 실행을 마치면 해당 함수는 콜백 큐에 결과를 추가합니다. 이벤트루프는 콜 스택이 비어있을 때 콜백 큐에서 새로운 작업을 가져와서 콜 스택에 추가합니다. 위 과정을 반복하게 됩니다.
- 이벤트 루프란?
- 태스크 큐와 마이크로 태스트 큐에는 어떤 함수가 들어가나요?
- 태스크 큐와 마이크로 태스크 큐의 차이점
- requestAnimationFrame에 대해 설명해주세요.
: 이벤트 루프를 통해 자바스크립트에서 처리되는 비동기 작업을 관리하고 실행하게 됩니다. 콜스택과 콜백 큐를 모니터링하면서 콜 스택이 비어있을 때마다 콜백 큐에 대기히고 있던 콜백 함수를 콜 스택으로 이동시켜 실행시키게 되면서 자바스크립트에서 비동기 처리를 할 수 있습니다.
: 두 함수 모두 콜백함수가 들어간다는 점은 동일하지만 어떤 함수를 실행하느냐에 따라 어디로 들어갈지 달라집니다. 태스크 큐에는 setTimeout, setInterval, requestAnimationFrame 등이 들어가고 마이크로태스크 큐에는 Promise, Object.observe 등이 들어갑니다.
: 태스크 큐는 이벤트 루프에서 처리될 일반적인 작업이 대기하는 큐입니다. 이밴트 핸드러, setTimeOut 과 같은 비동기 함수가 여기에 속합니다. 마이크로 태스크 큐는 Promise와 같은 함수가 대기하는 큐입니다. 태스크 큐보다 우선순위가 높아서 마이크로 태스크 큐가 우선처리됩니다. 따라서 이벤트 루프는 콜 스택이 비어있을 때 마이크로 태스크 큐를 실행한 다음 태스크 큐를 실행하게 됩니다.
- 비동기적으로 실행되는 것을 동기적으로 코딩하는 방법이 있나요?
- map과 forEach, reduce에 대해 설명해주세요.
:forEach는 배열의 각 요소에 대해 지정된 함수를 실행합니다. 일반적으로 forEach는 반복문을 대신하여 사용합니다. map메소드는 배열의 각 요소를 변환하여 새로운 배열을 생성합니다. reduce는 배열의 모든 요소를 하나의 값으로 만듭니다. 변환 함수를 사용하여 계산하는데 reduce 메소드는 누적값, 현재값 등을 매개 변수로 받을 수 있습니다.
- 자바스크립트의 메모리 관리에 대해 아는 대로 설명해주세요
- 클래스에 대해 설명해주세요.
: 클래스는 객체를 생성하기 위한 템플릿입니다. es6에서 추가된 클래스는 생성자 함수를 더 쉽게 작성할 수 있는 방법으로 클래스를 사용하면 객체의 속성과 메소드를 정의할 수 있습니다. 클래스에서는 constructor 함수에서 this 키워드를 사용하여 객체의 속성을 초기화할 수 있고 인스턴스 메소드는 클래스의 프로토타입에 추가됩니다.
- 즉시 실행 함수 (IIFE)에 대해 설명해주세요.
: 즉시 실행함수는 함수를 정의하는 즉시 바로 실행하는 코드를 의미합니다. 함수 정의를 괄호로 감싸고 그 뒤에 즉시 실행을 위한 빈괄호를 추가하여 사용합니다. 이러한 즉시 실행 함수를 통해 전역 스코프를 오염시키지 않을 수 있고 함수 내부에서만 사용하는 지역 변수를 만들 때 유용합니다.
- 엄격 모드에 대해 설명해주세요.
: 해당 모드를 사용할 때 코드의 예측 가능성과 가독성이 향상되어 기존에 자바스크립트에서 묵인했던 에러들에 대해 엄격하게 검사하여 에러를 발생시킵니다. 스크립트의 시작 부분에 use strict를 선언하면 엄격 모드로 코드를 작성할 수 있습니다. 엄격 모드에서 에러가 발생되는 경우는 변수를 선언하지 않고 사용했을 때 delete 연산자로 전역 변수 또는 함수를 삭제할 때 등이 있습니다.
- 콜 스택 (Call Stack)과 힙 (Heap)에 대해 설명해주세요.
: 스택은 코드 실행 흐름에 따라 함수 호출 정보를 저장하는 영역이고 힙은 객체와 같은 동적인 데이터를 저장하는 영역입니다. 스택은 함수가 호출되면 해당 함수의 호출 정보가 스택에 저장되고 함수가 반환되면 스택에서 제거됩니다. 힙은 객체와 같은 동적으로 할당된 데이터를 저장하는 영역입니다. 힙은 메모리 주소에 직접 접근하여 객체나 배열같은 데이터는 힙에 저장되고 해당 데이터를 참조하는 변수는 스택에 저장됩니다.
- Rest 연산자와 Spread 연산자에 대해 설명해주세요.
:rest 연산자는 함수의 매개변수나 배열, 객체의 마지막 인자로 사용되며 나머지 값들을 배열로 모아서 저장합니다. 그리고 저장한 값을 배열로 사용할 수 있습니다. spread 연산자는 배열이나 객체를 펼쳐서 분리된 값으로 만듭니다. 이러한 spread 연산자는 배열을 복사하고 새로운 배열을 생성할 때 유용합니다.
- 제너레이터에 대해 설명해주세요.
: 제너레이터는 함수의 실행을 일시적으로 중지하고 이후에 해당 지점에서 다시 시작할 수 있는 기능을 제공합니다. 제너레이터는 function 키워드 뒤에 *(애스터리스크)기호를 붙여서 정의합니다. 함수 내부에서는 yield 키워드를 사용하여 함수를 멈추고 next 키워드로 필요한 시점에 다시 재개할 수 있습니다. 이러한 제너레이터를 활용하여 비동기 코드를 쉽게 작성할 수 있습니다.
- 이터러블과 이터레이터 프로토콜에 대해 설명해주세요.
:이터러블이란 Symbol.iterator 메소드를 가지고 있는 객체로 for-of 문으로 순회할 수 있으며 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용이 가능합니다. 해당 메소드를 호출하면 이터레이터를 반환합니다.이터레이터는 next 메서드라는 이터러블 요소를 탐색하기 위한 포인터를 가지고 있습니다. next 메서드의 반환값은 value와 done을 키로 갖는 객체입니다. 여기서 value는 다음 값 의미하고 done은 이터러블의 마지막 값까지 순회했을 때 true가 됩니다.
- 자바스크립트에서의 배열(Array)과 객체(Object)의 차이점은 무엇인가요?
: 배열과 객체는 모두 데이터를 저장하는 자료구조입니다. 배열은 인덱스가 있어 각 요소를 인덱스로 구분할 수 있고 객체는 각 요소에 고유한 문자열 키가 존재합니다. 따라서 배열은 인덱스가 있기 때문에 순서가 중요하나 객체는 순서가 중요하지 않습니다.
- 자바스크립트의 모듈(Module) 시스템은 무엇이며, 어떻게 사용되나요?
: 모듈은 코드를 여러 파일로 나누고 모듈 간의 의존성을 관리하는 기능입니다. 코드를 분리해서 관리할 수 있기 때문에 재사용성과 유지보수성을 높일 수 있습니다. 이러한 모듈은 es6에서 도입된 import, export 키워드로 사용할 수 있습니다. import 키워드로 가져오고 export 키워드로 내보낼 수 있습니다.
- Map과 Set
: Map과 Set은 모두 es6에서 추가된 데이터 구조입니다. Map은 Key와 value의 쌍으로 저장하는 데이터 구조이고 중복된 키값을 허용하지 않고 중복된 키를 저장하면 이전의 값을 덮어씌웁니다. 객체와 유사한 형태를 가지는데 객체와 달리 key로 모든 값을 사용할 수 있고 이터러블로 순회가 가능합니다. Set은 값만 저장하며 key가 없으며 중복된 값을 허용하지 않습니다. 배열과 유사하나 배열과 달리 인덱스로 요소에 접근할 수 없습니다.
- 화살표 함수
: 화살표함수는 함수를 단축하여 표현할 수 있어 유용합니다. 화살표함수는 일반 함수와 다른 특징이 있습니다. 첫번째는 this 바인딩입니다. 일반적인 함수는 선언될 때의 환경에 따라 동적으로 this가 바인딩되는데 화살표 함수는 항상 선언할 시점의 상위 스코프가 this로 바인딩됩니다. 두번째는 메소드에 부적절하다는 것입니다. 화살표 함수는 항상 상위 스코프를 this로 바인딩하기 때문에 메소드로 사용할 경우 메소드를 호출한 객체를 가리키지 않고 전역을 가리키게 됩니다. 마지막은 생성자함수로 사용할 수 없다는 것입니다. 생성자 함수는 prototype 프로퍼티를 가지며 prototype 프로퍼티가 가리키는 프로토타입 객체의 constructor를 사용하지만 화살표 함수는 prototype 프로퍼티를 가지고 있지 않아 생성자 함수로 사용이 불가능합니다.
- 자바스크립트의 클래스(class)와 프로토타입(prototype)의 차이점은 무엇인가요?
클래스와 프로토타입은 본질적으로 다르지 않습니다. 자바스크립트에서는 프로토타입을 활용하여 상속을 구현하는데 이 과정에서 더욱 문법을 간결하게 작성할 문법적 설탕이 클래스입니다.
- 렉시컬 스코프와 동적 스코프
: 렉시컬 스코프는 함수 선언 위치에 따라 결정되는 상위 스코프이고, 동적 스코프는 함수 호출 위치에 따라 결정되는 상위 스코프를 의미합니다. 자바스크립트는 기본적으로 렉시컬 스코프를 따릅니다. 렉시컬 환경은 환경 레코드와 외부 렉시컬 환경으로 구성되어 있습니다. 여기서 외부 렉시컬 환경은 접근할 수 있는 상위의 렉시컬 환경의 참조값을 저장하는데 이 외부 렉시컬 환경이 함수의 선언 위치에 따라 결정되기 때문에 렉시컬 스코프를 가지게 됩니다.
- 자바스크립트의 데이터 타입은 무엇이 있으며, 각각 어떤 특징이 있나요?
- 클로저(Closure)란 무엇이며, 어떻게 사용되나요?
- 이벤트 버블링(Event Bubbling)과 이벤트 캡쳐(Event Capturing)의 차이점은 무엇인가요?
- 자바스크립트의 this 키워드는 무엇이며, 어떤 상황에서 어떻게 사용되나요?
- Promise와 Async/Await의 차이점은 무엇인가요?
- 자바스크립트의 프로토타입(Prototype)은 무엇이며, 어떻게 사용되나요?
- 호이스팅(Hoisting)이란 무엇인가요? 어떻게 발생하나요?
- 자바스크립트에서의 배열(Array)과 객체(Object)의 차이점은 무엇인가요?
- 콜백(Callback) 함수란 무엇이며, 어떻게 사용되나요?
- 자바스크립트의 모듈(Module) 시스템은 무엇이며, 어떻게 사용되나요?
- 프로미스 pending 시간이 매우 길어지면?