2-1 각종 es6 문법

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

(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)