[ES6] 문법

ES(ECMAScript) : 자바스크립트의 표준, 규격을 나타내는 용어

템플릿 문자열

기존
var str = str1 + ' ' + str2;
var product = { name : '도서', price: '3000원' }
var strr = '제품' + product.name + '의 가격은 ' + product price;

템플릿 문자열 -> 백틱 사용
var str = ${str1 + ' ' + str2} or ${str1} ${str2}
var strr = 제품 ${product.name}의 가격은 ${product.price}

전개 연산자(spread operator)

나열형 자료를 추출하거나 연결할 때 사용
사용방법 배열, 객체, 변수명 앞에 ... 입력 ((), {}, [] 안에서만 사용)

var arr1 = ['one', 'two', 1];
var arr2 = ['three', 'four'];

//1
var combined = [...arr1, ...arr2]; // ['one, 'two', 1, 'three', 'four']  -> concat과 같은 역할

//2
var [first, second] = arr1; //기존 first = 'one'
var [first, ...other] = arr1; // fisrt='one', other=['two', 1]

//3
function func(arguments) {   // 기존. 배열이 아니라 객체 형태로 출력됨
  console.log(arguments);
  console.log(Array.prototype.slice.call(arguments));
  //배열로 하려면 Array.prototype.slice.call 사용
  
}
func(1, 2, 3); // [Arguments] {'0':1, '1':2, '2':3 }
				// ['1', '2', '3']

function func(first, ...args){   //전개 연산자 사용
  // 모든 인자값이 배열로 args에 할당됨
  console.log(first); // 1
  console.log(args);  // ['2', '3']
}

//4 객체
var obj1 = { one:1, two:2 }
var obj2 = { three:3, four:4 }
var combinedObj = { ...obj1, ...obj2 } // { one:1, two:2, three:3, four:4 }

var { one: myOne } = obj1;
console.log(myOne);  // 1. obj1에 있는 one의 값이 myOne이라는 변수명으로 저장됨. 

가변변수 & 불변변수

let 가변변수 (읽거나 수정 가능)
const 불변변수

배열, 객체를 불변 변수로 선언하면 값을 변경할 수 있음. => 변수내의 항목이 변경되는 것은 못막음.

• 배열 가변 내장 함수(push, splice, pop, shift) 사용 X
  => 배열 불변 내장 함수(concat(), slice())로 대신 구현

let lnum = 1;
lnum = 2;  //2로 값 변경됨

const cnum = 1;
cnum = 2; //오류

const arr = [];
arr = [1,2,3]; //오류
arr.push(1,2,3); console.log(arr);  // 변경되지만 이렇게 하지 않음. [1,2,3]

const arr1 = [0];
const arr2 = arr.concat(1,2,3);  
// 기존 arr 배열의 값은 변하지 않고 새로운 배열로 반환됨. arr = [0], arr2 = [0,1,2,3]

arr2.slice(0,1) // [0]. index0부터 1개 잘라와라

const len = arr.length; // 4
const arr3 = arr.slice(1, len) // [1,2,3]. len을 생략해도 1부터 마지막까지 잘라옴

const arr4 = {
	...arr.slice(0,1), 0.3, 0.4, 0.5, ...arr.slice(2),
}; // [0, 0.3, 0.4, 0.5, 2, 3] 1은 삭제되고 나머지값들은 추가됨

const obj = { 
  a: 1, 
  b: 2, 
};
obj.a = 3; //가능하지만 이렇게 하지 않음. 

const obj2 = { //이렇게 함. 
	...obj, 
  	a: 3, //앞의 a값을 덮어씌움
};

클래스

기존 JS 클래스 표현 방법
함수를 생성자 형태로 선언한 다음 상속이 필요한 변수나 함수를 prototype 객체 에 할당하는 방법 사용
prototype 객체 : new 연산자로 생성되는 객체 안에서 this 연산자의 함수 및 변수 선언 위치를 참조할 수 있는 요소