ES6 문법

ECMAScript 6 (ES6)는 JS 버전 중 하나로, 쉽고 효율적으로 코드 작성이 가능하도록 개선되었다.

 

1) Let, Const

 - Let : 재할당은 가능하고, 재선언은 불가능하다.

 - Const : 재할당, 재선언이 불가능, 초기값이 없으면 선언이 불가능하다.

 - var : 재할당, 재선언이 가능하다.

 > 호이스팅이 가능하다.

 

2) arrow function 

 - function이나 return 키워드 없이 함수를 만드는 방법이다.

// 2 arrow function

// ES5

function func() {

    return true

}

//ES6

const func = () => true

const func = () => {

    return true

}

() => {}

parm => {}

(parm1, parm2, ...parms) -> {}

// 익명 화살표 함수

() => {}

function은 호출할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해진다.

 

3) 삼항 연산자

//3 3항 연산자

console.log(true ? "참" : "거짓") // 참

console.log(false ? "참" : "거짓") // 거짓

4) 구조분해할당

배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법이다.

- 배열의 경우

// {1} 배열의 경우

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

console.log(value1); // 1

console.log(value2); // "new"

let arr = ["value1", "value2", "value3"];

let [a,b,c] = arr;

console.log(a,b,c) // value1 value2 value3

let [a,b,c] = arr; 은 아래와 동일!

let a = arr[0];

let b = arr[1];

let c = arr[2];

let [a,b,c,d] = arr

console.log(d) // undefined

let [a,b,c,d = 4] = arr

console.log(a)

console.log(b)

console.log(c)

console.log(d) // 4

 - 객체의 경우

// 객체의 경우

// 구조분해할당

let user = {name: "nbc", age: 30, birthDay : "yesterday"};

let {name, age} = user;

let name = user.name;

let age = user.age;

console.log(name, age) // nbc 30

//새로운 이름으로 할당 newName, newAge로 다시 할당!

let {name: newName, age: newAge} = user;

console.log(name, age) // ReferenceError: name is not defined

console.log(newName, newAge) //nbc 30

let {name, age, birthDay} = user;

console.log(birthDay) // undefined

let {name, age, birthDay = "today"} = user;

console.log(birthDay) // today

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%EA%B8%B0%EB%B3%B8%EA%B0%92_2

구조 분해 할당 - JavaScript | MDN

 

5) 단축 속성명

객체의 key와 value 값이 같아면, 생략 가능하다.

// 단축 속성명 (property shorthand)

const name = "nbc";

const newAge = "30";

const obj = {

    name, // name : name 동일할 경우 생략 가능

    age: newAge

}

//key value가 똑같을 경우 const obj = {name, age}; 로 적을 수 있다.

const obj = {

    name,

    age

}

6) 전개 구문

- 배열이나 객체를 전개하는 문법

// 전개 구문

// 배열이나 객체를 전개하는 문법이에요. 구조분해할당과 함께 정말 많이 사용됩니다.

배열

let arr = [1,2,3];

let newArr = [...arr, 4];

console.log(...arr)

console.log(newArr) // [1,2,3,4]

// 객체

let user = {name: "nbc", age: 30};

let user2 = {...user}

user2.name = "nbc2"

console.log(user.name) // nbc

console.log(user2.name) // nbc2

7) 나머지 매개변수

// 나머지 매개변수(rest parameter)

...args 나머지를 찍어준다.

function func (a, b, ...args) {

    console.log(...args)

}

func(1, 2, 3) // 3

func(1, 2, 3, 4, 5, 6, 7) // 3 4 5 6 7

8) 템플릿 리터럴

// (8) 템플릿 리터럴 (Template literals)

//여러 줄로 이뤄진 문자열과 문자 보간기능을 사용하게 만들어 주는 문자열 리터럴 표현식이에요.

//백틱(`) 과 ${}로 표현합니다.

const testValue = "안녕하세요!";

console.log(`hello world ${testValue}`);

9) export

// name.js

const Name = () => {

}

export default Name

// other file

// 아무 이름으로 import 가능

import newName from "name.js"

import NameFromOtherModule from "name.js"

// 하나의 파일에서 여러 변수/클래스 등을 export 하는 것이 가능

export const Name1 = () => {

}

export const Name2 = () => {

}

// other file

import {Name1, Name2} from "name.js"

import {newName} from "name.js" // x

// 다른 이름으로 바꾸려면 as 사용

import {Name1 as newName, Name2} from "name.js"

// default export 처럼 가져오려면 * 사용

import * as NameModule from "name.js"

console.log(NameModule.Name1)