ES6_1강

  문법(1)

1. let, const 키워드

var 한 가지만 사용하던 변수 선언에 추가된 키워드이다.

 

* 호이스팅(hosing) : 사용을 먼저, 선언은 나중에

 

2. 템플릿 리터럴

let a = 10; -> 10을 리터럴

 

`(back tick)을 사용하여 변수의 값을 리터럴처럼 사용한다.

변수의 값을 출력할 때는 '${변수}'를 입력한다.

 

ex)

/ES5
var str1 = ', ';
var str2 = 'World!';
var str3 = 'Hello' + str1 + str2;
//출력 : Hello, World!

//ES6
let str1 = ', ';
let str2 = 'World!';
let str3 = `Hello${str1}${str2}`;

 

3. 구조 분해 할당(Spread)

객체나 배열에서 사용하는 기법으로, 객체나 배열을 해체한 후 개별값을 새로 할당하는 과정(방식)을 말한다.

 

ex)

// 배열 분해
const arr = [1, 2, 3];
console.log(arr[0]); // 개별적인 사용
let a1 = arr[0];
let a2 = arr[1];
let a3 = arr[2];
let [one, two, three] = arr;
console.log(one, two, three); // 1 2 3

//객체 분해
const employee = {
	company: "ICIA",
	name: "Hong",
    age: 23
}
let { company: comp, name, age } = employee;
console.log(comp); // ICIA

 

4. Spread Operator(...)

배열이나 객체를 새로운 배열이나 객체로 복제한다. (새로운 값 추가)

 

let arr1 = [1,2,3,4];
let arr2 = arr1; //새로운 배열이 아니라 같은 배열.

위 코드는 한 배열의 이름이 두 개가 된 상황이다.

 

ex)

let arr1 = [1, 2, 3, 4];
let arr2 = arr1; // 얕은 복사(shallow copy)

arr2[2] = 5;
console.log(arr1);  // 1 2 5 4

let arr3 = [];
for (let i = 0; i < arr1.length; i++) {
	arr3.push(arr1[i]); // 깊은 복사(deep copy)
}
    
arr3[2] = 15;
console.log(arr1); // 1 2 5 4
console.log(arr3); // 1 2 15 4

arr4 = [...arr1];
arr4[3] = 100;
console.log(arr1); // 1 2 5 4
console.log(arr4); // 1 2 5 100

arr5 = [5, ...arr1, 6];
console.log(arr5); // 5 1 2 5 4 6

employee2 = { ...employee };//객체 복제
employee2.company = '중앙';
console.log(employee); // {company: 'ICIA', name: 'Hong', age: 23}
console.log(employee2); // {company: '중앙', name: 'Hong', age: 23}

function sumNumber(...args) { // 가변 파라미터 처리 => 개수와 상관없이 사용 가능
    let sum = 0;
    for(let v of args) {
        sum += v;
    }
    return sum;
}
console.log(sumNumber(1, 2, 3, 4)); // 10

 

5. Default Parameter(기본 매개변수)

함수의 인자를 넘겨줄 때, 기본값 설정이 가능하다. 함수를 실행할 때 매개변수에 값을 넣지 않으면 설정한 기본값을 사용한다.

 

참고) 함수 표현식 : 변수에 함수를 넣는 방식

const func = function(p) { .... };
func(pp); // 사용 방식은 일반적인 함수와 동일.

이는 hoisting을 방지한다.

 

ex)

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

let res1 = add1();
console.log(res1); // 1