면접질문 정리

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

var, let, const 차이점

01-1. var

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

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

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

01-2. let

let은 중복된 변수명의 사용을 허용하지 않아, 변수명의 재할당이 필요하며 수정할 필요가 있는 변수에 사용하기 좋

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

const는 중복된 변수명의 재선언과, 변수명의 재할당 모두 불가능

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

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

자바스크립트의 표준, 규격을 나타내는 용어

버전) ES5(2009년) / ES6(2015년)출시 매년 업데이트 되고 있음

취업시장에선 ES6+(ES6이후, 모던 자바스크립트) 이상을 요구하고 있음

[JS] 자바스크립트 ES5 ES6 차이Development Blog

02-1. ES5와 ES6의 차이점

레거시 코드(누군가 남기고간 기존코드)와의 차이가 있으며,

레거시 코드를 최신문법으로 변경할 수 있는가, 코드의 동작해석이 가능한가로 추측함

02-3. ES6에 추가된 기능

1. let, const 추가

Title	Description
es5	var
es6	var + let, const

//ES5
var variavle = 1;

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

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

화살표 함수가 추가되어 함수를 간결하게 나타낼 수 있어, 가독성 및 유지보수성이 올라감

매개변수가 하나일때 ()소괄호 생략가능 , {}대괄호 및 return도 생략가능

function 생략하고 => 로

ES5 vs ES6

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

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

javascript

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

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

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

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

back tic : ` `

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

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

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

6. Class(클래스)

객체 생성 방식 중 하나

7. Module(모듈)

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

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

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

9. Promise(프로미스)

기존에는 콜백함수를 사용한 콜백패턴을 사용했음 → 콜백헬을 발생시킴

이를 해결하기 위해 프로미스 도입, 프로미스 후속처리 메서드를 통해 효과적으로 에러처리 가능하게 됨

03. 리엑트 데이터 실행

함수형 컴퍼넌트 / 클래스 컴퍼넌트 → 리액트 훅

04. 콜백함수