ES6 (1)

1. ES6 문법(ES2015)

 

⭐ES6문법

ES(ECMAScript)란 자바스크립트의 표준을 말하며

자바스크립트가 다양한 웹 브라우저에서 공통적으로 잘 작동되도록 표준이 필요해지면서 만들어진 것.

ES6가 가장 큰 변화가 있는 표준.

 

 

1) const & let (불변 변수와 가변 변수)

 

(1) const 

불변 변수 선언을 위한 키워드로,

객체와 함께 사용할 때 말고는 값을 다시 할당할 수 없는 변수. (배열이나 객체의 값을 변경하는 것은 가능하다)

보통 const를 사용하며 var 사용보다는 const나 let을 사용.

 

(2) let

가변 변수 선언을 위한 키워드,

즉, 변경 가능한 변수를 생성할 수 있다. const와 달리 재할당이 가능한 변수.

 

---

 

2) 템플릿 문자열(Template String)

문자열 안에 변수, 연산식을 혼합하여 사용한다.

 

(1) 작은따옴표( ' ' ) 대신 백틱( ` )으로 문자열 표현.

(2) 템플릿 문자열에 $를 사용하여 변수나 식 포함 가능.

 

기존의 코드:

var fruit = { name: '망고', price: 9900 };
var getFruit = function(fruit) {
	return fruit.price + '원';
};
var mine = '선택한 과일은 ' + 'fruit.name + '입니다. 가격은 ' + getFruit(fruit) + '입니다.';

템플릿 문자열:

var fruit = { name: '망고', price: 9900 };
var getFruit = function(fruit) {
	return ${fruit.price}원;
};
var mine = `선택한 과일은 ${fruit.name}입니다. 가격은 ${getFruit(fruit)}입니다.`;

 

---

 

3) 전개 연산자(Spread Operator)

나열형 자료를 추출, 연결할 때 사용.

사용하려면 배열 또는 객체, 변수명 앞에 마침표 세개(...) 입력.

 

기존의 코드:

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const combined = arr1.concat(arr2);

 

전개 연산자:

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const combined = [...arr1, ...arr2];

 

 

또다른 예시로 객체의 경우,

기존의 코드:

const obj1 = { one: 1, two: 2 };
const obj2 = { three: 3, four: 4 };

var combined = Object.assign({}, obj1, obj2);

 

전개 연산자:

const obj1 = { one: 1, two: 2 };
const obj2 = { three: 3, four: 4 };

var combined = {...obj1, ...obj2};

 

---