1. ES6 문법 (1)

 

 

변수선언 방법 3가지 https://sangwoorhie.tistory.com/24

var,  let,  const

 

전통적인 변수선언법은 var

ES6 문법에서 주로 사용되는 문법 = let, const

 

let = 변수 선언시 사용

const = 상수 선언시 사용

 

(var = 재선언, 재할당 둘다 가능 / let = 재선언 불가, 재할당 가능  / const = 재선언, 재할당 둘다 불가)

 

 

1. 함수 선언문 

function add( ) { }

 

2. 함수 표현식

var add = function ( ) { }

 

3. 화살표 함수

var add = ( ) => { }

화살표 함수에서, 중괄호 안의 값 return문이 1줄인 경우 중괄호 생략가능. 매개변수 소괄호도 생략가능.

var add = (x) => {
    return 1;
}

↓
return이 1줄이므로 아래와 같이 쓸수있다.

var add = (x) => 1;

↓
매개변수 소괄호도 생략가능

var add = x => 1;

 

4. 3항 연산자

 

기본 형태

console.log(조건 ? 'A' : 'B');

조건이 true일경우 'A', 조건이 false일 경우 'B'

 

예시)

console.log(1 === 1 ? '참' : '거짓');

조건 (1 ===  1)이 true 이므로 '참'

 

console.log(1 !== 1 ? '참' : '거짓');

조건 (1 !== 1)이 false 이므로 '거짓'

 

 

구조분해 할당 destructuring

 

배열 : 대괄호 [ ] 안의 요소들

객체 : 중괄호 { } 안의 요소들

 

구조분해 할당은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 함.

 

1. 배열

 

[1, 'new'];

let [value1, value2] = [1, 'new'];

이렇게 하면, 우항의 배열 [1, 'new'] 을 분해해서 변수 value1에 1을, 변수 value2에 'new'를 각각 할당함.

 

let [value1, value2] = [1, 'new'];
console.log('1', value1)
console.log('2', value2)

1, 1

2, new 로 출력됨.

 

 

let arr = ["value1", "value2", "value3"];
let [a, b, c] = arr;

여기서 let arr이 배열이고, 

let [a. b. c]는 변수임.

let arr = ["value1", "value2", "value3"];
let [a, b, c] = arr;
console.log(a);
console.log(b);
console.log(c);

변수 a에 "value1", 변수 b에 "value2", 변수 c에 "value3" 각각 할당.

value1

value2

value3

 

 

요소의 개수와 배열의 개수가 불일치할 경우

let arr = ["value1", "value2", "value3"]
let [a, b, c, d] = arr;

이렇게 하면 마지막 값을 배정받지 못한 d는 undefined된다.

 

아래와 같이 변수를 배정받지 못한 d가 4를 배정받을수 있도록 직접 입력할수도 있음. 하지만 여기서 입력한 4는 초기값 (이니셜 value값)으로써, 만약 배열에 "value4"가 있다면 d = 4라고 할지라도 d에는 value4가 할당됨.

 

let arr = ["value1", "value2", "value3"]
let [a, b, c, d = 4] = arr;

 

 

2. 객체

배열의 경우 순서가 중요하지만, 객체의 경우 key가 중요하다.

let user = {
    name: 'jake',
    age: 30,
    height: 186,
};

let {name, age, height} = {
    name: 'jake',
    age: 30,
    height: 186,
}; 

console.log("name => ", name);
console.log("age => ", age);
console.log("height => ", height);

위와 같이 할 시,

name => jake,

age => 30,

height => 186

으로 할당됨.  더이상 객체타입이 아닌, 일반 문자열string과 숫자열number 타입으로 나옴.

 

새로운 이름으로 할당하는 방법

let user = {
    name: 'jake',
    age: 30,
    height: 186,
};

let {name: newName, age: newAge, height: newHeight} = user;
console.log('newName => ', newName);
console.log('newAge => ', newAge);
console.log('newHeight => ', newHeight);

 

newName = 'jake'
newAge = 30
newHeight = 186

 

요소의 개수와 객체의 개수가 불일치할 경우 배열과 마찬가지로 undefined 나옴.

 

let user = {
    name: 'jake',
    age: 30,
    height: 186,
};

let {name, age, height, birthday} = user;
console.log(name);
onsole.log(age);
onsole.log(height);
onsole.log(birthday);

여기서 birthday는 할당이 안되어있으므로 undefined로 나옴. 안나오게 하려면 초기값 지정가능. 

 

아래와 같이 변수를 배정받지 못한 birthday가 'September_9th'를 배정받을수 있도록 직접 입력할수도 있음. 하지만 여기서 입력한 September_9th는 초기값 (이니셜 value값)으로써, 만약 객체에 다른 값이 있다면 birthday = 'September_9th' 라고 할지라도 객체에 있는 값이 설정됨.

 

let user = {
    name: 'jake',
    age: 30,
    height: 186,
};

let {name, age, height, birthday = 'September_9'} = user;
console.log(name);
console.log(age);
console.log(height);
console.log(birthday);