ES6 문법

🚩 [학습 목표]

1. 자바스크립트 es6 문법에서 새로 추가된 문법에 대해 학습.
2. 일급객체로서의 함수가 어떤 의미인지, 왜 중요한지 알며 실습을 통해 활용능력을 갖출 수 있음.
3. Map과 Set에 대한 개념에 대해 학습하고, 각각에 대한 활용능력을 갖출 수 있음.

1. 각종 es6 문법 소개

ECMAScript 6 (ES6)는 JavaScript의 버전 중 하나로, 2015년에 발표됨. ES6는 이전 버전인 ES5에서 새로운 문법과 기능을 도입하여 JavaScript 개발자들이 보다 쉽고 효율적으로 코드를 작성할 수 있도록 개선.

2015년도에 대규모 문법적 향상 및 변경이 있었기 때문에, ES6가 항상 언급이 됨! 🔥
이미 배우신 문법도 있고, 안배운 문법도 있지만 여기에 ‘정리’ 한다는 생각으로 넣음

(1) let, const

기존에 변수 선언을 위해 존재하던 var를 대체해서 나온 변수 선언에 사용 되는 키워드.

선언과 할당이 무엇이었는지 중요 var, const, let의 차이를 알 수 있기 위해서는 선언과 할당의 의미를 아주 정확히 알고 있어야 함.

• 선언: 변수명을 자바스크립트 엔진에 알리는 것.
• 할당: 변수에 값을 저장하는 것 (= 할당연산자)임.

let과 const의 특징

• let: 재할당은 가능하고, 재선언은 불가능.

let value = "value1"
console.log(value) // value1

value = "value2" // 재할당 가능
console.log(value) // value2

let value = "value3" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared

• const: 재할당, 재선언이 불가능, 초기값이 없으면 선언 불가능.

const value; // 초기값 없이 선언 불가능, SyntaxError: Missing initializer in const declaration
---
const value = "value1"
console.log(value) // value1

value = "value2" // 재할당 불가능, TypeError: Assignment to constant variable.

const value = "value2" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared

• 잠깐 알아보는 var의 특징

  1. var는 재할당, 재선언이 가능.

     var name = "name1"
     console.log(name) // name1
     
     var name = "name2"
     console.log(name) // name2

  2. var는 호이스팅됨

     console.log(name) // undefined
     
     var name = "name1"

(2) 화살표 함수 (Arrow Function)

function이나 return 키워드 없이 함수를 만드는 방법. 이것도 역시 ES6에서 처음 소개된 개념.

// ES5
function func() {
	return true
}

//ES6
const func = () => true
const func = () => {
	return true
}

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

// 익명 화살표 함수
() => {}

this

function은 호출을 할 때 this가 정해짐, 화살표 함수는 선언할 때 this가 안정해짐.

(3) 삼항 연산자 (ternary operator)

condition ? expr1 : expr2

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

(4) 구조 분해 할당 (Destructuring)

구조 분해 할당이란?

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

// 배열의 경우
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(d) // 4

// 객체의 경우
let user = {name: "nbc", age: 30};
let {name, age} = user;

// let name = user.name;
// let age = user.age;

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

// 새로운 이름으로 할당
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

(5) 단축 속성명 (property shorthand)

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

const name = "nbc"
const age = "30"

const obj = {
	name,
	age: newAge
}

const obj = {
	name,
	age
}

(6) 전개 구문 (Spread)

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

// 배열
let arr = [1,2,3];

let newArr = [...arr, 4];
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)

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) 템플릿 리터럴 (Template literals)

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

백틱(``) 과 ${}`로 표현

공식문서 링크(아래)

Template literals - JavaScript | MDN

"string"
'string'
new String("string")

`string text`

`string text 
string text line2`

`string text ${value} text`

(9) named export vs default export

1. default Export

// name.js
const Name = () => {
}

export default Name

// other file 
// 아무 이름으로 import 가능
import newName from "name.js"
import NameFromOtherModule from "name.js"

1. named export

// 하나의 파일에서 여러 변수/클래스 등을 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)