JavaScript 총망라 (추가중)

자바스크립트는 무슨 언어인가요?

• 특수한 목적을 위해 만들어진 스크립트 언어의 하나로, 웹페이지의 동작을 위해 사용되는 언어 이다.

변수 선언, 초기화, 할당의 차이점에 대해 설명해주세요.

• 변수는 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소'이다.
  변수 선언 : 실행 컨텍스트에 변수이름을 등록하고, 자바스크립트 엔진에 변수의 존재를 알린다.
  초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고, undefined를 할당해 초기화 한다.
  할당 : 변수에 값을 저장(대입)하는 단계
  차이점 : 변수선언(선언단계+초기화단계)는 런타임(소스코드가 순차적으로 실행되는 시점) 이전에 실행되지만, 값의 할당은 런타임에 실행된다.
  

데이터 타입에 대해 설명해주세요.

• 값의 종류로, ES6는 숫자, 문자열, 불리언, undefined, null, symbol, 객체 총 7개의 타입을 가진다. 값은 생성한 목적과 용도가 다르기 때문에 타입을 나누어 관리해야한다. 또한 각 타입마다 확보해야할 메모리 공간의 크기도 다릅니다.

생성자에 대해 설명해주세요.

• 객체를 생성하는 역할을 하는 함수를 생성자 함수라고 한다. 일반 함수와 기술적 차이는 없으나 new 연산자와 사용시, 새로운 객체를 반환한다.

this에 대해 설명해주세요.

• call, apply, bind에 대해 설명해주세요.
  this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수로, 자신이 속한 객체, 자신이 생성할 인스턴스의 프로퍼티나 메서드에 참조할 수 있다.
  call, apply, bind 모두 함수의 컨택스트와 매개변수를 다루는 메서드
  call : 함수를 즉시 실행, 그 함수의 매개변수를 순서대로 전달
  apply : 매개변수가 동적으로 결정될때 사용, 함수의 매개변수를 배열 형태로 전달
  bind : 함수를 호출하지 않고 새로운 함수를 반환, 특정 객체에 대한 컨텍스트를 영구적으로 설정
  

콜백 함수에 대해 설명해주세요.

• 콜백 지옥을 해결하는 방법을 설명해주세요.
  • 콜백함수는 다른 함수에 인자로 전달되어 실행되는 함수, 비동기 프로그래밍에서 사용, 특정 작업이 완료된 후에 실행할 작업을 정의하는데 주로 사용됩니다. 콜백 지옥이란 중첩된 콜백함수가 과도하게 사용되어 코드가 복잡해지는 현상입니다. Promise를 사용하여 then 체인으로 비동기 작업을 처리하거나 async,await을 사용해 동기식 코드처럼 코드를 작성하여 콜백지옥을 해결합니다.

Promise에 대해 설명해주세요.

• Promise.all() 에 대해 설명해주세요.
  Promises는 비동기 작업의 완료 또는 실패를 처리할 수 있는 객체이다. (콜백은 완료 또는 실패를 처리할 수 없음) 프로미스는 대기, 이행, 거부 세가지 상태를 가집니다. 프로미스는 생성자 함수로 생성되어 resolve, reject 두가지 콜백 함수를 받습니다. 성공시에는 resolve를 호출하고 에러가 발생하면 reject를 호출합니다.
  Promise.all()은 여러개의 프로미스를 병렬로 실행하고, 모든 프로미스가 성공하면, 결과를 배열로 반환하는 메서드로 하나라도 실패하면 rejected상태가 됩니다.

Promise와 Callback를 비교 설명해주세요.

• callback과 promise 둘 다 자바스크립트에서 비동기 작업을 처리하기 위해 사용됩니다.

Async, Await이 뭔지 그리고 사용 방법을 설명해주세요.

async는 함수를 비동기로 선언하는 키워드, await은 promise가 resolve될 때까지(비동기 작업이 완료되기를 기다리는) 키워드이다. await은 async 함수 내부에서만 사용할 수 있습니다.

Promise와 Async, Await의 차이를 설명해주세요.

• Promise와 Async, Await 둘다 자바스크립트에서 비동기 작업을 처리하기 위한 방법입니다. Promise는 체인방식(then, catch, finally) Async,Await은 try catch, await 을 사용합니다.

AJAX에 대해 설명해주세요.

• Asyschronous Javascript And Xml
  1999년 등장한 기법으로, 자바스크립트를 통해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있도록 한다. AJAX 등장 이전에는 웹페이지에 변경이 생기면 전체페이지를 리렌더링 해야 했었다. 하지만 AJAX를 통해 변경되는 부분만 전송받아 부분적으로 렌더링할 수 있게 되었습니다.

var, let, const 차이를 설명해주세요.

• var : var로 선언한 변수는 호이스팅을 통해 선두로 끌어 올려진 것처럼 동작한다.
  let : let은 var의 단점을 보완하기 위해 등장한 변수 선언 키워드로, 변수 중복 선언금지, 변수 호이스팅 안됨, 블록레벨 스코프의 특징을 가진다.
  const 는 상수를 선언하기 위해 사용되며, let과 다르게 선언과 동시에 초기화해야한다. let과 다르게 재할당이 불가능하다.

TDZ에 대해 설명해주세요.

• 선언만 되고, 초기화 되지 않은 변수들이 머무는 공간이다. var, let, const, function, class등은 모두 호시스팅 되지만, let, const, class는 호이스팅 되지 않는 것처럼 작동하는데, TDZ에 있다가 초기화되어야만 TDZ에서 나와서 사용이 가능해진다.

함수 선언형과 함수 표현식의 차이에 대해 설명해주세요.

• 함수선언형은 function 키워드를 사용하고, 호이스팅이 작동한다.
  함수 표현식은 함수가 변수에 할당되는 형태로, 호이스팅은 되지만 변수에 할당 되기전에는 호출이 불가능한다.

이벤트 버블링과 캡처링에 대해 설명해주세요.

• 이벤트 버블링 : 이벤트가 하위요소(자식)에서 상위요소(부모)로 전파되는 방식
  이벤트 캡처링 : 이벤트가 상위요소(부모)에서 하위요소(자식)로 전파되는 방식

이벤트 위임에 대해서 설명해주세요.

• 하위 요소의 이벤트를 부모 요소에서 한 번만 처리하도록 하는 기법으로 버블링 특성을 활용하여 이벤트 리스너를 상위 요소에 등록하는 방식입니다. 동적으로 추가되는 요소에 대해 이벤트를 등록하기 위해 사용합니다.

이벤트 위임의 동작 방식에 대해서 설명해주세요.

• 부모 요소에 이벤트 리스너를 등록 후, 이벤트가 발생하면 버블링을 통해 부모 요소로 전달 된다. 이벤트 객체를 이용해서 실제 클릭된 자식 요소를 판별한다.

호이스팅과 발생하는 이유에 대해 설명해주세요.

• 자바스크립트는 코드 실행전에 변수 선언과 함수 선언을 메모리에 먼저 등록하기 때문에 발생한다.

스코프 (Scope)에 대해 설명해주세요.

• 변수와 함수가 접근할 수 있는(영향을 끼칠 수 있는) 유효 범위를 말합니다.

스코프 체인에 대해 설명해주세요.

• 중복된 함수에서 변수를 찾을 때, 현재 스코프에서 찾지 못하면 상위 스코프(부모)로 올라가면서 탐색하는 구조입니다.

클로져(Closure)에 대해 설명해주세요.

• 외부 함수의 변수에 접근할 수 있는 내부 함수를 의미합니다. 함수가 생성될 때, 자신이 선언된 스코프의 변수를 기억하고, 함수가 실행된 이후에도 그 변수를 계속 참조할 수 있는 특성을 말합니다. 클로저는 외부에서 직접 변수에 접근하는 것을 막아, 데이터 은닉 및 캡슐화를 구현합니다. 하지만 계속해서 메모리에 데이터를 남기는 메모리 누수를 발생시킬 수 있습니다.

실행 컨텍스트에 대해 설명해주세요.

• 실행 컨텍스트란 자바스크립트 코드가 실행될때, 생성되는 환경이다.
  생성 단계 : 변수와 함수 선언을 먼저 등록(호이스팅), var는 undefined로 초기화, let과 const는 TDZ에 배치
  초기화 단계 : this, argument 설정, 변수에는 값이 할당되고, 함수는 실행될 준비
  실행 단계 : 실제 코드가 실행

렉시컬 환경(Lexical Environment)에 대해 설명해주세요.

자바스크립트에서 일어나는 데이터 형변환에 대해 설명해주세요.

• 자바스크립트는 Number(),String(),Boolean()과 같은 명시적 형변환과 자바스크립트가 자동으로 형을 변환하는 암묵적 형 변환이 있습니다.