ES6 (2)

4) 화살표 함수(Arrow function)

화살표 기호 => 로 함수를 선언. function 키워드를 생략하고 인자 블록과 본문 블록 사이에

화살표를 표기하여 사용한다.

 

기존의 코드:

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

 

화살표 함수:

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

return 키워드를 생략하면

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

 

---

 

5) 클래스(Class)

기존 자바스크립트(ES5까지)에는 클래스가 없었으나 ES6에 추가됨.

 

(1) 클래스 사용법

 

① class 키워드: 클래스 정의

② constructor() 생성자 함수 

③ new 키워드: 클래스 생성

 

자세히는 Java Script - Class 장에서 다룬다.

 

클래스를 사용한 코드:

class addUser {
	constructor(name, age) {
    	this.name = name;
        this.age = age;
    }
}

const user = new addUser('AAA', 24);

console.log(user.name); // AAA

 

---

 

6) 객체 확장 표현식(Enhanced Object property) & 구조 분해 할당(Destructuring assignment)

 

(1) 객체 확장 표현식(Enhanced Object property)

key-value(키 이름과 값) 데이터 형식의 객체를 확장하여 표현 가능.

객체 내부에서 표현식을 사용하거나 키와 키값을 편리하게 저장할 수 있음.

 

① 객체 변수를 선언 시 키값을 생략하면 자동으로 키의 이름으로 키값을 지정.

② 객체 생성 블록안에 대괄호로 묶어 그 안에 표현식을 작성 → 계산된 key 값 사용 가능.

③ function 키워드를 생략하여 함수 선언 가능.

 

기존의 코드:

const a = 0;
const b = 0;

const obj = { a: a, b: b };
console.log(obj);  // { a: 0, b: 0 }


const ord = "first";
const combined = {};
combined[ord + "Key"] = "value";
console.log(combined);  // { firstKey: 'value' }

객체 확장 표현식:

const a = 0;
const b = 0;

const obj = { a, b };
console.log(obj); // { a: 0, b: 0 }


const ord = "first";
const combined = { [ord + "Key"]: "value" };
console.log(combined); // { firstKey: 'value' };

 

 

(2) 구조 분해 할당(Destructuring assignment)

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있도록 함.

구조 분해 할당은 함수 인자값을 다루거나 JSON 데이터 변환할 때 유용하며 전개 연산자와 함께 사용됨.

 

① 배열에서 값을 추출할 때: 인덱스 순서에 맞게 변수 작성

② 변수에 =(선언 부호, 할당 연산자)를 함계 사용하여 기본값 할당 가능

③ 객체에서 값을 추출할 때 키의 이름과 동일반 변수 이름 사용

④ 객체에서 값을 추출할 때 변수에 :(콜론) 부호를 사용하여 새 변수명으로 키값을 할당 가능.

⑤ sqap을 간편하게 구현 가능.

 

기존의 코드:

const list = [1, 4];
const item1 = list[0];
const item2 = list[1];


const obj = {
	key1: "one",
    key2: "four",
};
const key1 = obj.key1;
const key2 = obj.key2;

 

ES6 구조 분해 할당:

const list = [1, 4];
const [item1, item2] = list;


const obj = {
	key1: "one",
    key2: "four",
};
const { key1, key2, key3 = "eight" } = obj;

 

---