차세대 자바스크립트

let & const

let과 const는 기본적으로 var을 대체합니다. 

let은 var 과 기능이 똑같이 변수 선언하고 재할당 할 경우 사용합니다

const는 변수를 할당하지만 재할당 하지 않을 경우에 사용합니다, 만약 재할당 할 경우 오류가 뜹니다

 

ES6 Arrow Functions (화살표 함수)

Arrow Functions은 자바스크립트에서 함수를 생성하는 다른 방식입니다.

일반적인 함수 선언

function callMe(name) { 
    console.log(name);
}

다음과 같이도 가능

const callMe = function(name) { 
    console.log(name);
}

화살표 함수로 작성

const callMe = (name) => { 
    console.log(name);
}

argument가 없는경우 빈 괄호만 넣는다

const callMe = () => { 
    console.log('Max!');
}

argument가 딱 하나만 있는 경우 괄호를 생략 가능

const callMe = name => { 
    console.log(name);
}

여러개인 경우

const callMe = (name, age) => { 
    console.log(name, age);
}

value를 return 할때 다음과 같이 짧게 작성가능

const returnMe = name => name

다음과 같다

const returnMe = name => { 
    return name;
}

Exports & Imports

두가지 export유형 default(unnamed) 랑 named가 있다

default => export default ... ;

named => export const someData = ... ;

default export는 다음과 같이 import한다

import anyName from './any/path/file.js';

여기서 anyName은 마음데로 정할 수 있다

named export는 다음과 같이 한다

import {anyData} from './path/to/file.js';

한번에 여러 named도 import 가능

import {anyData} , anyData2} from './path/to/file.js';

Spread Operator

Spread 연산자는 "..."을 사용한다

배열에서 요소를 가져오거나 객체에서 property(속성)을 가져올때 사용한다 깊은복사라고 보면 된다

배열에 사용한 경우

const oldArray = [1, 2, 3];
const newArray = [...oldArray, 4, 5]; // This now is [1, 2, 3, 4, 5];

객체에 사용한 경우

const oldObject = {
    name: 'Max'
};
const newObject = {
    ...oldObject,
    age: 28
};
/* newObject는 다음과 같다
{
    name: 'Max',
    age: 28
}
*/

Destructuring(구조분해할당)

'구조분해할당' 이라고도 하는데 다음과 같이 사용한다

const array = [1, 2, 3];
const [a, b] = array;
console.log(a); // prints 1
console.log(b); // prints 2
console.log(array); // prints [1, 2, 3]

객체예시

const myObj = {
    name: 'Max',
    age: 28
}
const {name} = myObj;
console.log(name); // prints 'Max'
console.log(age); // prints undefined
console.log(myObj); // prints {name: 'Max', age: 28}

Destructuring은 인자를 가진 함수를 처리할때 유용

const printName = (personObj) => {
    console.log(personObj.name);
}
printName({name: 'Max', age: 28}); // prints 'Max'

같은 코드를 다음과 같이 작성가능

const printName = ({name}) => {
    console.log(name);
}
printName({name: 'Max', age: 28}); // prints 'Max')

코드의 길이가 줄었다

age까지 받고 싶은 경우

const printName = ({name, age}) => {
    console.log(name, age);
}
printName({name: 'Max', age: 28}); // prints 'Max, age')

'name, age' property를 가져와 변수 name, age에 할당하고 편하게 사용가능