[면접 질문 정리] - Javascript 관련 질문

Javascript

자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다.  개발자가 별도의 컴파일 작업을 수행하지 않고 타입을 지정하지 않는 인터프리터 언어(Interpreter language)이다. 또한, 자바스크립트는 명령형(imperative), 함수형(functional), 프로토타입 기반(prototype-based) 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다. 자바스크립트는 클래스 기반 객체지향 언어보다 효율적이면서 강력한 프로토타입 기반의 객체지향 언어이다.

 

 

var a = '1' + 2 +3
var b = 2 + 3 + '1'
var c = 2 +'2' +3

// '123' '51' '223'

Null과 undefined

undefined은 변수를 선언하고 값을 할당하지 않은 상태, 즉, 자료형이 없는 상태입니다.

null은 변수를 선언하고 빈 값을 할당한 상태입니다.

따라서 typeof를 통해 자료형을 확인해보면 null은 object로, undefined는 undefined가 출력되는 것을 확인할 수 있습니다.

 

 

const let var

var 키워드의 문제점은 크게 세 가지가 존재합니다. 변수 중복 선언하고 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다. 변수 호이스팅이 됩니다.

이러한 단점을 보완한 것이 let과 const 입니다.

이 둘 모두 재선언이 불가능하며 블록 레벨 스코프를 따릅니다..

Const는 선언과 동시에 값을 할당해야 하며 재할당이 불가능하고,

Let 은 재할당이 가능합니다.

 

 

비동기 동기

비동기(Asynchronous) 함수란 쉽게 설명하면 호출부에서 실행 결과를 가다리지 않아도 되는 함수입니다. 반대로 동기 함수(Synchronous) 함수는 호출부에서 실행 결과가 리턴될 때 까지 기다려야 하는 함수입니다.

 

비동기 처리를 사용하려면?

콜백함수와 promise, async와 await을 사용하면 된다. 

비동기 함수 (1) : callback 함수

콜백 함수란

1. 다른 함수의 인자로써 이용되는 함수.

2. 어떤 이벤트에 의해 호출되어지는 함수.

 

콜백 지옥(Callback Hell)

콜백 지옥은 JavaScript를 이용한 비동기 프로그래밍시 발생하는 문제로서, 함수의 매개 변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상을 말한다.

 

문제점

단순한 코드를 작성할 때는 위와 같이 전통적인 방식으로 콜백 함수를 통해 비동기 처리를 해도 큰 문제가 발생하지 않습니다. 하지만, 콜백 함수를 중첩해서 연쇄적으로 호출해야하는 복잡한 코드의 경우, 계속되는 들여쓰기 때문에 코드 가독성이 현저하게 떨어지게 됩니다. 자바스크립트 개발자들 사이에서 소위 콜백 지옥이라고 불리는 이 문제를 해결하기 위해 여러가지 방법들이 논의 되었고 그 중 하나가 Promise 입니다.

 

비동기 함수 (2) : Promise

promise

 

- 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.

- 현재에는 당장 얻을 수는 없지만 가까운 미래에는 얻을 수 있는 어떤 데이터에 접근하기 위한 방법을 제공합니다. 

- Callback의 단점을 개선하는 방법

- Promise는 then()과 catch() 메서드를 통해서 동기 처리 코드에서 사용하던 try-catch 블록과 유사한 방법으로 비동기 처리 코드를 작성할 수 있도록 해줍니다.

 

 

 

비동기 함수 (3) : async / await 

async / await

Promise의 이러한 불편한 점(디버깅, 예외처리, 들여쓰기 가독성)들을 해결하기 위해 ES7(ES2017)에서 async/await 키워드가 추가되었습니다. async/await 키워드를 사용하면 비동기 코드를 마치 동기 코드처럼 보이게 작성할 수 있습니다. 코드 흐름을 이해 하기 쉽다.

 

await 키워드는 async 키워드가 붙어있는 함수 내부에서만 사용할 수 있으며 비동기 함수가 리턴하는 Promise로 부터 결과값을 추출해줍니다. 즉, await 키워드를 사용하면 일반 비동기 처리처럼 바로 실행이 다음 라인으로 넘어가는 것이 아니라 결과값을 얻을 수 있을 때까지 기다려줍니다. 따라서 일반적인 동기 코드 처리와 동일한 흐름으로 (함수 호출 후 결과값을 변수에 할당하는 식으로) 코드를 작성할 수 있으며, 따라서 코드를 읽기도 한결 수월해집니다.

 

호이스팅의 단점 : 호이스팅을 적극 활용해야 할까요?

 

호이스팅

- 호이스팅은 변수를 선언하고 초기화했을 때, 선언 부분이 최상단으로 끌어올려지는 현상을 말한다.

- 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미

- 모든 선언이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징이다. 

 

코드의 가독성과 유지보수를 위해서 호이스팅이 일어나지 않도록 한다!

 

 

 

 

클로저 

클로저란?

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.

외부 함수보다 중첩 함수가 더 오래 유지되는 경우,
중첩 함수는 이미 생명 주기가 다한 외부 함수의 변수를 참조할 수 있으며,
이러한 중첩 함수를 "클로저(closure)"라고 한다.

전역 변수의 사용을 억제하고, 정보를 은닉하기 위해 사용한다. 

클로저는 은닉성이라는 강점을 지니고 있다.

 

 

이벤트 버블링

 이벤트 버블링에 대해 말씀해주세요

 - 이벤트 버블링은 어떤 요소에 대한 이벤트가 발생했을 때, 해당 요소의 최상위 부모까지 이벤트가 전달되어지는 과정이다. HTML 구조상 자식 요소에 발생한 이벤트가 상위 부모요소에 영향을 미치는 것이다. 이벤트 캡쳐링과 정반대이다. (최상위 부모에서 이벤트 발생 요소까지 이벤트 전달 되는 것) 
 이벤트 버블링이나 캡처링을 차단 하고 싶을때 e.stopPropagation을 호출하면 이벤트 전파를 막고 해당 이벤트만 실행시킬 수 있다. 

 

 

This

JavaScript 예약어로 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성된다.

this 용법

• 일반 함수 호출
  전역 객체 바인딩된
• 메서드 호출
  메서드를 호출한 객체 가리킴
• 생성자 함수 호출
  생성자 함수가 생성할 인스턴스를 가리킴
• apply/call/bind 메서드에 의한 호출

this는 기본적으로 window이지만,

객체 메서드, bind call apply, new일 때 this가 바뀐다.

그리고 이벤트리스너나 기타 document라이브러리처럼 this를 내부적으로 바꿀 수도 있으니

항상 this를 확인해봐야 한다. 이벤트 리스너 :  this를 소환하면 이것은 바로 e.currentTarget이라는 뜻

​

여러분이 선언한 function의 this는 항상 window라는 것 알아두자.

(strict 모드에서는 undefined !!)

​

this 값은 런타임에 결정된다

함수를 선언할 때 this를 사용할 수 있다.

다만, 함수가 호출되기 전까지 this엔 값이 할당되지 않는다.

​

함수를 복사해 객체 간 전달할 수 있다.

함수를 객체 프로퍼티에 저장해 object.method()같이 ‘메서드’ 형태로 호출하면 this는 object를 참조한다.

​

화살표 함수는 자신만의 this를 가지지 않는다는 점에서 독특하다.

화살표 함수 안에서 this를 사용하면, 외부에서 this 값을 가져온다.

 

this와 관련된 call, apply, bind의 차이

- call과 apply, bind 모두 함수의 this를 명시적으로 바인딩 할 때 사용됩니다. 

 

call과 apply는 함수를 실행하고 함수의 첫 번째 인자로 전달하는 값에 this를 바인딩합니다. 

apply는 인자를 배열의 형태로 전달됩니다. 

bind는 첫 번째 인자에 this를 바인딩하지만 새로운 함수를 반환합니다.

 

 

프로토타입

프로토타입(prototype)

자바스크립트의 모든 객체는 최소한 하나 이상의 프로토타입(prototype)이라는 객체를 가지고 있습니다.

모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받습니다.

이때 상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라고 합니다.

 

 

불변성

불변성

변수를 const로 선언하거나 Object.freeze() 메서드를 사용하면 불변성의 객체를 만들 수 있다. 객체 내부의 객체까지 불변하게 만들려면 deep freeze 해야 한다.

 

 

얕은 복사와 깊은 복사

얕은 복사(Shallow Copy)란 객체를 복사할 때 원본 값과 복사된 값이 같은 참조(=메모리 주소)를 가리키는 것이다.

깊은 복사(Deep Copy)는 복사된 객체가 다른 주소를 참조하며 내부의 값만 복사된다.

 

 

기본 자료형

기본 : number, string, boolean, undefined,null

객체 : object - function, array, 등등 모든 자료형

 

Boolean, Number, String, null, undefined, Symbol과 같은 타입들은 불변성을 유지하는 타입들이고 Object타입들은 변경가능한 값들입니다.

자바스크립트의 number 타입은 다른 언어와 차이점이 무엇인가?

다른언어는 다양한 숫자 타입이 있지만, JS number 타입은 모든 수를 실수로 처리한다.

 

 

==와 ===의 차이점

• • 동등 비교(==) 연산자는 좌항과 우항을 비교할 때, 암묵적 타입 변환을 통해 타입을 일치시킨 후, 같은 값인지 비교한다. 따라서 타입이 다르더라도 암묵적 타입 변환 후에 같은 값이라면 true를 반환한다.
  • 일치 비교(===) 연산자는 좌항과 우항의 피연산자가 타입이 같고, 값이 같은 경우에 한하여 true를 반환한다.
  • ⇒ 동등비교(==)는 예측하기 어려운 결과를 만들어내므로, 일치 비교(===) 연산자를 사용하는 것이 권장된다.

 

ES6 이상의 버전을 브라우저에서 인식하지 못한다면 어떻게 해결해야 하는지?

최신 자바스크립트의 호환성 문제를 해결하는 방법에 대한 질문

브라우저 별로 구동원리 또는 JS엔진 등의 차이가 있기 때문에 브라우저 호환성 이슈가 발생하는데, 이러한 차이를 최소화해 런타임 환경에 맞게 최적화 하는 작업을 크로스 브라우징이라고 하는데, Javascript의 호환성에 따른 충돌이나 부작용을 줄이기 위한 방법으로는 Babel이라는 도구를 사용하면 됩니다. 바벨은 주로 ES5 이상 버전의 코드를 현재 및 과거의 브라우저와 같은 환경에서 호환되는 버전으로 변환하는데 사용되는 도구로, IE나 다른 브라우저에서 동일한 기능을 제공하고 side-effect를 최소한으로 줄일수 있습니다.

바벨 공식 웹사이트에서는 바벨을 다음과 같이 정의한다.

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

바벨은 주로 ECMAScript 2015+ 코드를 현재 및 과거의 브라우저와 같은 환경에서 호환되는 버전으로 변환하는데 주로 사용되는 도구입니다.

babel은 컴파일러 인가 ? 트랜스파일러인가

Babel은 빌드 단계에서 Javascript를 다른 언어로 변환하는 것이 아닌 어플리케이션에서 설정된 환경에 맞게 또는 현재 사용하고 있는 대중적인 브라우저 스펙 또는 호환성에 맞는 하위 버전의 Javascript로 변환한다는 의미에서 Babel은 트랜스파일러라고 할 수 있습니다.

 

 

동적타입언어의 단점

변수의 값을 추적하기 어렵다.

유연성은 높지만 신뢰성은 떨어진다.

 

 

데이터 타입이 필요한 이유

• 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해서

 

JavaScript는 무슨 언어인가?

JavaScript는 싱글 스레드이면서 논 블록킹 언어이다.

스레드
어떠한 프로그램 내에서, 특히 프로세스 내에서 실행되는 흐름의 단위를 말한다.

싱글 스레드
스레드가 하나밖에 존재하지 않아 한번에 하나의 작업만 할 수 있다.

싱글 스레드 논 블록킹
자바스크립트는 비동기 처리를 통해 싱글 스레드이지만 블록킹 되지 않게 한다.
하나의 요청이 완료될 때까지 기다리지 않고 동시에 다른 작업을 수행함으로써(비동기) 문제를 해결한다.

비동기 처리
특정 로직의 실행이 끝날때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것

=> 멀티 스레드가 아닌 이유는 동시성 문제(동시에 공유된 자원에 접근하는 경우)를 해결하기 까다롭기 때문.

 

 

Execution Context (실행 컨텍스트) 란

실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다.
자바스크립트는 동일한 환경에 있는 환경 정보들을 모은 실행 컨텍스트를 콜스택에 쌓아올린 후 실행하여 코드의 환경과 순서를 보장할 수 있게 됩니다.

풀어서 설명하면 스택의 경우 FILO (First In, Last Out) 의 구조이기에 순서를 보장, 콜스택 내부에 쌓인 실행 컨텍스트의 정보를 통해 환경을 보장할 수 있는 것이라 생각합니다.

여기서 환경이란 전역공간이 될 수 있고, 함수 즉 함수 내부의 환경이 될 수 있습니다.

 

 

자바스크립트 동작 원리(이벤트 루프)

 이벤트 루프란? 

    - 싱글 스레드 기반의 언어인 자바스크립트는 이벤트 루프를 이용해서 비동기 방식으로 동시성을 지원한다. 이벤트 루프는 콜스택과 콜백큐의 상태를 체크하여, 콜 스택이 빈 상태가 되면 콜백 큐의 첫번째 콜백을 콜 스택으로 밀어주는 역할을 한다. 즉, 자바스크립트 엔진이 코드 조각을 하나씩 처리할 수 있도록 작업을 스케쥴하는 동시에 JS에서 비동기 작업을 처리할 수 있게 해준다. 모든 비동기 방식의 API들(setTimeout, ajax 등)은 이벤트 루프를 통해 콜백 함수를 실행한다고 볼 수 있다.

 

• 일반적인 작업은 Call Stack에서 이루어짐
• 시간이 소요되는 작업들(setTimeout, 이벤트, HTTP 요청 메서드 등)은 Web API에서 대기하다가 Callback Queue로 보내진다.
• Call Stack이 비워져 있을때만 Callback Queue에 저장되어있던 작업들을 Call Stack으로 보낸다.

 

 

 

타입스크립트란?

타입을 명시하지 않는 자바스크립트와 달리, 타입스크립트를 통해 정적 타입을 명시하여 사용할 수 있다.

타입스크립트의 장점

타입스크립트는 코드에 목적을 명시하고, 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거할 수 있다.

프로젝트가 크고, 복잡할수록 타입스크립트가 가진 강점이 점점 더 강해진다.

 

 

HTML 렌더링 중에 JavaScript가 실행되면 렌더링이 멈추는 이유?

렌더링 엔진은 HTML 한 줄씩 순차적으로 파싱하며 DOM을 생성해 나가다가 JavaScript를 만나면 DOM 생성을 임시 중단한다.

DOM 생성을 임시 중단하고, 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘기게 되는데, 파싱이 끝나면 다시 렌더링 엔진에 제어권을 넘겨 중단된 부분부터 HTML 파싱을 재개하며 DOM 트리를 생성한다.

 

 

use strict 은 무엇이고, 장단점이 무엇인가요?

‘use strict’는 전체 스크립트나 개별 함수에 엄격 모드를 사용하는데 사용되는 명령문입니다. Strict 모드는 JavaScript 다양한 자바스크립트를 제한하는 방법입니다.

장점:

• 실수로 전역변수를 만드는 것이 불가능합니다.
• 암묵적으로 실패한 예외를 throw하지 못하는 할당을 만듭니다.
• 삭제할 수 없는 속성을 삭제하려고 시도합니다. (시도 효과가 없을 때까지)
• 함수의 매개변수 이름은 고유해야합니다.
• this는 전역 컨텍스트에서 undefined입니다.
• 예외를 발생시키는 몇 가지 일반적인 코딩을 잡아냅니다.
• 헷갈리거나 잘 모르는 기능을 사용할 수 없게 합니다.

단점:

• 일부 개발자는 익숙하지 않은 기능이 많습니다.
• function.caller와 function.arguments에 더 이상 접근할 수 없습니다.
• 서로 다른 엄격한 모드로 작성된 스크립트를 병합하면 문제가 발생할 수 있습니다.

 

 

JS ES6 문법에 추가된 것들을 아는대로 설명하세요

   - String Literal, 객체 비구조화, 객체 리터럴, for .. of, Spread Operator, Rest Parameter, Arrow Function, Default Params, let & const, import & export, Map & Set 

 

 

웹팩과 바벨은 무엇인가?

- 바벨은 모든 실행환경에서 자바스크립트가 정상적으로 동작할 수 있도록 ES6 코드를 ES5코드로 변환해주고, 리액트의 JSX, TS 까지 변환해주는 자바스크립트 컴파일러이다. 특정 버전이상에만 실행되는 코드 or 특정 브라우저에서는 실행되지 않는 코드들을 정상적으로 동작하게 만들어준다. 
 웹팩은 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음 이를 브라우저에서 사용할 수 있는 번들로 묶고 패킹하는 모듈 번들러(Module bundler)다. 모듈 번들러는 여러개의 나누어져 있는 파일들을 하나로 만들어주는 라이브러리이고, 웹페이지를 보여주기 위해 수많은 파일을 서버에 개별적으로 요청하는 것이 아닌 하나로 줄여서 요청하여 코드를 압축하고 최적화해준다.  

 

 

 

 

 

AJAX에 대해 자세히 설명하세요(+장단점)

   - 자바스크립트를 이용하여 비동기식으로 XML을 이용해 서버와 통신하는 방식이다. 최근에는 XML보다 JSON을 많이 사용한다. 웹 페이지 전체를 업데이트 하는게 아니라 부분적으로 업데이트를 하기 위해 사용한다. 따라서 장점은 SPA와 마찬가지로 웹페이지를 업데이트시 새로고침 없이 필요한 부분만 업데이트 되어서 UX가 향상된다. 그러나 단점으로는 SEO가 까다롭고, 동적화면에서 History 관리와 북마크가 어려울 수 있다.

 

 

화살표 함수와 일반함수의 차이점

  - 화살표함수는 함수를 간단하게 표현할 수 있는 ES6문법이다. 일반 함수는 this가 동적으로 바인딩되는 반면, 화살표 함수는 바로 상위 스코프의 this와 같다. 또한, 화살표함수는 프로토타입 프로퍼티를 가지고있지않기때문에 생성자 함수로 사용이어렵고, (일반함수는 생성자 함수로 사용 가능) 일반함수에서는 함수가 실행될때 암묵적으로 arguments변수가 전달되어 사용할 수 있지만, 화살표 함수에서는 arguments변수가 전달되지않는다. 객체 프로토타입으로 메소드를 선언할 때에는 화살표 함수는 적합하지않다.