# 면접질문 정리

## 01. var / let / const 의 차이점?

{% embed url="<https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90>" %}

### 01-1. var

{% hint style="warning" %}
**var**는 **같은 변수명으로 재선언해도 오류가 나지 않아,** 간단한 테스트에는 편리하지만 코드량이 많아진다면 어디에서 어떻게 사용되는지 파악이 어렵고 값이 바뀔 우려가 있음
{% endhint %}

```javascript
var name = 'west'
console.log(name) //west

var name = 'silver'
console.log(name) //silver 변수명 재선언 가능
```

### 01-2. let

{% hint style="warning" %}
**let**은 **중복된 변수명의 사용을 허용하지 않아**, 변수명의 **재할당이 필요**하며 수정할 필요가 있는 변수에 사용하기 좋
{% endhint %}

```javascript
let name = 'javascript'
console.log(name) //javascript

let name = 'jquery'
console.log(name)
// Uncaught SyntaxError: Identifier 'name' has already been declared
// 변수명 재선언 불가

name = 'react'
console.log(name) //react 변수명 재할당 가능
```

### 01-3. const

{% hint style="warning" %}
**const**는 중복된 변수명의 **재선언**과, 변수명의 **재할당** **모두 불가능**

ㄴ 재할당이 필요없는 상수와 객체에 사용
{% endhint %}

```javascript
const name = 'javascript'
console.log(name) //javascript

const name = 'jquery'
console.log(name) 
// Uncaught SyntaxError: Identifier 'name' has already been declared
// 변수명 재선언 불가

name = 'react'
console.log(name) 
//Uncaught TypeError: Assignment to constant variable.
// 변수명 재할당 불가능
```

## 02. ES란?

> ES = ECMAScript&#x20;
>
> > **자바스크립트의 표준, 규격을 나타내는 용어**&#x20;
> >
> > 버전) ES5(2009년) / ES6(2015년)출시 매년 업데이트 되고 있음&#x20;
> >
> > 취업시장에선 ES6+(ES6이후, 모던 자바스크립트) 이상을 요구하고 있음

{% embed url="<https://hbsowo58.tistory.com/407>" %}

### 02-1. ES5와 ES6의 차이점

> 레거시 코드(누군가 남기고간 기존코드)와의 차이가 있으며,
>
> 레거시 코드를 최신문법으로 변경할 수 있는가, 코드의 동작해석이 가능한가로 추측함

### 02-3. ES6에 추가된 기능

#### 1. let, const 추가

| Title | Description      |
| ----- | ---------------- |
| es5   | var              |
| es6   | var + let, const |

```javascript
//ES5
var variavle = 1;

//ES6
let sum = 2;
const result = 3;
```

#### 2. Arrow function(화살표 함) 추가

> 화살표 함수가 추가되어 함수를 간결하게 나타낼 수 있어, 가독성 및 유지보수성이 올라감
>
> 매개변수가 하나일때 ()소괄호 생략가능 , {}대괄호 및 return도 생략가능

{% hint style="info" %}
function 생략하고 => 로
{% endhint %}

{% tabs %}
{% tab title="ES5 vs ES6" %}

```javascript
//ES5
function sum(a,b){
return a+b;
}

//ES6
const sum = (a,b) => a+b;
```

{% endtab %}

{% tab title="javascript" %}

```javascript
arr.map((el) => {
    document.write(el, "<br>");
});
```

{% endtab %}
{% endtabs %}

#### 3. Defalt Parameter(디폴트 매개변수) 추가

> 기존 함수의 매개변수에 초깃값을 작성하려면 함수 내부에서 로직이 필요했던 것을 로직 없이도 작성 가능하게 보완

#### 4. Templete Literal(템플릿 리터) 추가

{% hint style="info" %}
**back tic : \` \`**&#x20;

**${}** 함수를 통해 자바스크립트 표현식 삽입가능
{% endhint %}

#### 5. Multi-line string(멀티라인 문자)

> 관리가 불편했던 라인을 넘어간 문자열을 보완하여 백틱(back tic)을 사용하게 되면 자동 관리해 줌

#### 6. Class(클래스)

> 객체 생성 방식 중 하나

#### 7. Module(모듈)

> 재사용하기 위한 코드 조각으로, 세부사항은 캡슐화 시키고 API 부분만 외부에 노출시킨 코드

#### 8. Destructuring assignment(비구조화/구조분해 할당)

> 객체나 배열에서 사용해서 개별변수에 할당하는 것을 의미

#### 9. Promise(프로미스)

> 기존에는 콜백함수를 사용한 콜백패턴을 사용했음 → 콜백헬을 발생시킴&#x20;
>
> 이를 해결하기 위해 프로미스 도입, 프로미스 후속처리 메서드를 통해 효과적으로 에러처리 가능하게 됨

## 03. 리엑트 데이터 실행

{% hint style="info" %}
함수형 컴퍼넌트 / 클래스 컴퍼넌트 → 리액트 훅
{% endhint %}

## 04. 콜백함수
