JavaScript ES5 와 ES6 달라진 점 01

자바스크립트를 처음 배울 때는 대체로 ES5로 배웠던 것 같다. 알고리즘 코드를 리뷰하면서 같은 코드를 다르게 표현하는 방법을 보게 되었고, ES5와 ES6의 표현의 차이가 크다는 것을 알았다. 공부 좀 미리한 친구들은 ES6 버전으로 긴 코드를 팍팍 줄여 작성하고 있었음.

 

두 가지 모두 알고 있어야 한다는데 현재의 나는 화살표 함수가 굉장히 헷갈리는 중.

이제라도 주요 달라진 점을 정리하고 공부 하면서 추가해 나가려고 합니다.

 

---

변수 선언

var : 함수 스코프를 가지므로 블록과 관계 없이 접근할 수 있음.

let : 사용법은 var 문과 같지만 블록 스코프를 가지며, 블록 밖에서는 변수에 접근할 수 없음.

const : let 과 동일한 블록 스코프를 가지며, 한 번만 할당할 수 있는 변수(상수)를 선언함. 

if(true) {
  var x = 3;
}
console.log(x); //3

if(true) {
  const y = 3;
}
console.log(y); //Uncaught ReferenceError: y is not defined
//y 값의 블록 범위를 벗어났으므로 오류 발생.

 

유효 범위를 벗어나면 위와 같이 에러가 발생, 이제 var는 let과 const가 대체한 느낌이다.

노마드코더나 다른 코딩 강좌들을 보면 기본적을 const를 사용하는 것 같다. 다른 값을 대입해야 하는 상황에서만 let을 쓰고, 목적이 있을 경우에만 var를 사용하는 듯.

const 문으로 선언한 상수 값은 수정할 수 없지만, 상수 값이 객체 또는 배열인경우는 프로퍼티를 수정할 수 있음.

//변수가 여러 개일 때는 쉼표로 구분하여 동시 선언이 가능함
let a, b, c;
let a = 1, b = 2, c = 3;

 

템플릿 문자열

let num1 = 1;
let num2 = 2;
let sum = 3;

let resultES5 = num1 + '더하기 ' + num2 + '는 \'' +  sum + '\'';
console.log(resultES5); //1더하기 2는 '3'

let resultES6 = `${num1}더하기 ${num2}는 '${sum}'`;
console.log(resultES6); //1더하기 2는 '3'

resultES5와 resultES6 의 결과 값은 같다.

${변수} 형식으로 변수를 더하기 기호 없이 문자열에 넣을 수 있다. 플레이스홀더 같은 것.

기존에는 문자열 안에 '따옴표' 를 넣는게 번거롭고 가독성도 떨어졌지만, ES6 에서는 백틱(`)을 사용하기 때문에 큰 따옴표, 작은 따옴표와 함께 사용할 수 있다.

 

 

화살표 함수

화살표 함수에서는 function 선언 대신  => 기호로 함수를 선언함.

function add1(a, b) {
  return a + b;
}

const add2 = (a, b) => {
  return a + b;
};

const add3 = (a, b) => a + b;

const add4 = (a, b) => (a + b);

add1, add2, add3, add4 모두 같은 기능을 하는 함수다.

 

function not1(x) {
    return !x;
}

const not2 = x => !x;  //매개변수가 하나이면 괄호 생략 가능

not1, not2도 같은 기능을 한다.

 

---

 

심심하니까 고양이 사진이라도