자바스크립트 ES6 문법 완전정리

 

Javascript ES6 문법 완전정리

 

ES6 이전의 문법으로 JavaScript 코드를 작성해왔지만, 이제는 ES6 문법으로 코드를 작성하게 되었습니다. ES5와 ES6 이후의 문법을 비교했을 때 여러가지 변경사항이 존재합니다. ES6에서 새로 추가된 기능을 모두 설명하기보다는 자주 사용하는 기능위주로 살펴보겠습니다.

 

 ECMAscript 란?

ECMA스크립트(ECMAScript, 또는 ES)는 자바스크립트를 표준화 하기위해 만들어진, ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말합니다.

 

 

 

 const / let

const는 ES6에서 변수를 선언하기 위한 새로운 키워드입니다. const는 객체와 함께 사용할 때를 제외하고는 변경 불가능한 변수 입니다.변경 불가능한 값을 정의하려면, const로 상수를 정의합니다.

 

// ES5
var button = document.getElementById("button1");

// ES6
const button = document.getElementById("button2");

 

let은 새로운 값을 받을 수도 있고 재할당할수도 있습니다. 즉, 변경 가능한 변수가 생성됩니다. 과거 es5이하 문법에서는 var로 선언된 변수의 hoisting 현상이 있었습니다. es6에서는 이러한 side effect를 최소화 하기위해 변경 가능한 변수에 대해 let으로 정의합니다.

 

let name = "zucca";

name = "dev";

console.log(name); //dev

// name 변수를 let이 아닌 const로 정의한다면, 당연히 'name'변수에 'dev'는 출력되지 않고, 오류가 발생합니다.

 

 

 화살표 함수

화살표 함수는 javascript에서 함수를 정의하는 키워드 없이 함수를 만들 수 있으며, return 없이, 계산한 결과값이 반환됩니다. 

 

 

// ---------------- ES5
function func1(name) {
  return "zucca" + name;
}

console.log(myFunc(".dev"));


// ---------------- ES6

const func1 = (name) => {
  return `zucca ${name}`;
};
console.log(func1(".dev"));

// 'return' 없이 사용 가능합니다.
const func1 = (name) => `zucca ${name}`;
console.log(func1(".dev"));

// 인수가 1개인 경우, 인수를 감싸는 괄호를 생략할 수 있습니다.

let calculateDouble = (n) => n * 2;

 

 비구조화 할당 (구조분해 할당)

 

비구조화 할당 / 구조분해 할당은 객체와 배열로부터 프로퍼티를 쉽게 접근할 수 있는 문법입니다.

// ES5
const zuccaCompany = {
  company: "zucca",
  name: ".dev",
  age: 20,
};

let company = zuccaCompany.company;
let name = zuccaCompany.name;
let age = zuccaCompany.age;

console.log(company);
console.log(name);
console.log(age);


// ES6
const zuccaCompany = {
  company: "zucca",
  name: ".dev",
  age: 20,
};

let { company, name, age } = zuccaCompany;

console.log(company);
console.log(name);
console.log(age);

 

ES5 문법을 사용하여 개발하는 경우, 사용(접근)해야하는 속성이 많을수록, 새로운 변수를 생성하고 대입하는 반복작업이 필요합니다. 그런데 ES6에서는 객체의 속성을 얻기 위해 중괄호 안에 값을 넣어 간결하게 정의하고 쉽게 접근이 가능합니다.

 

 

 Spread 연산자

 

spread 연산자는 객체, 배열의 값을 복제하거나 옮길 때 사용하는 연산자입니다. 

const object = {
  a: 10,
  b: 20,
};
const newObject = { ...object };
console.log(newObject); // { a: 10, b: 20 }

const array = [1, 2, 3];
const newArray = [...arr]; // [1, 2, 3]
console.log(newArray);

 

 for ... of 반복문

 

반복하고자 하는 행위를 통해 결과값을 도출해냅니다. 반복가능한 값을 for 문 안에 정의하면 연속적인 결과값을 얻을 수 있습니다.

 

const array = [10, 20, 30];

// es5
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

// es6
for (const value of array) {
  console.log(value);
}

 

 기본 매개변수

 

ES6 문법을 사용할 경우, 기본 매개변수를 설정할 수 있습니다.

 

// es5
var foo = (a, b, c) => {
  console.log(a, b, c);
};

foo("a");
//a undefined undefined

// es6
const foo = (a, b = "b", c = "c") => {
  console.log(a, b, c);
};

foo("a");
//a b c