[JavaScript] ES6+ 문법

ECMAScript 란

ECMAScript는 ECMA internation이라는 국제 표준 기구에서 관리하는 자바스크립트의 표준이다.

JavaScript 의 파편화

넷스케이프 커뮤니케이션즈에서 JavaScript를 개발한 이후 MS에서 JScript를 개발했는데 문제는 JavaScript 와 JScript는 표준화되지 못하고 적당히 호환되었다. MS는 자사 브라우저에서만 동작하는 기능을 추가 했고, 이로 인해 브라우저에 따라 웹 페이지가 동작하지 않는 크로스 브라우징 이슈가 발생했고, 모든 브라우저에서 동작하는 웹 페이지를 개발하는 것이 무척 어려워졌다.

Cross Browsing : 웹사이트나 웹 애플리케이션이 다양한 웹 브라우저와 기기에서 의도한 대로 일관되게 작동하도록 만드는 작업

JavaScript 의 표준화

모든 브라우저에서 동일하게 동작하는 표준화된 JavaScript에 대한 필요성이 제기되기 시작하였고, 이를 위해 넷스케이프 커뮤니케이션즈는 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구인 ECMA internation에 JavaScript 표준화를 요청했다.
1997년 ECMA-262 라 불리는 ECMAScript 1이 만들어 졌는데, JavaSciprt라는 이름은 상표권 문제로 ECMAScript가 표준 명칭으로 사용되었다

1. 변수 선언

ES5 까지 var를 사용했지만 JavaScript의 신뢰성과 예측 가능성을 높이기 위해 ES6이후로 const, let를 사용하게 되었다

• var 재정의 및 재선언 가능 (Function Scope)
• let 가변변수로 재정의 가능, 재선언 불가능 (Block Scope)
• const 불변변수로 재선언과 재정의 모두 불가능 (Block Scope)

// ------------------- var -------------------
var a = 1
console.log(a) // 1
var a = 2
console.log(a) // 2

// ------------------- let -------------------
let b = 1
console.log(b) // 1
b = 2
console.log(b) // 2
let b = 3 // SyntaxError: Identifier 'b' has already been declared

// ------------------- const -------------------
const c = 1
console.log(c) // 1
c = 2 // TypeError: Assignment to constant variable.
const c = 3 // // SyntaxError: Identifier 'c' has already been declared

2. 템플릿 리터럴 (Template literals)

템플릿 리터럴 (Template literals) 은 ES6부터 새롭게 도입된 문자열 표기법으로, 백틱(``)을 사용한다
문자열 안에 변수나 표현식을 삽입할 때는 ${} 구문을 사용한다.

const a = "JS"

console.log("Hello" + a) // ES5 방식
console.log(`Hello ${a}`) // ES6+ 방식

const x = 10
const y = 5
console.log(`${x} + ${y} = ${x + y}`) // 10 + 5 = 15

3. 화살표 함수 (Arrow Function)

화살표 함수 (Arrow Function) 는 함수 표현식을 더 간결하게 작성할 수 있는 ES6 문법이다

// 일반 함수 표현식
function sum(a, b) {
	return a + b
}

// 화살표 함수
const sum = (a, b) => a + b

특징

// 1. 매개변수가 하나일 경우, 괄호 생략 가능
const greet = name => `Hello, ${name}`

// 2. 매개변수가 없을 경우, 괄호는 생략할 수 없고 반드시 비워서 작성
const sayHi = () => 'Hi!'

// 3. 함수 본문이 한 줄일 경우, 중괄호({}) 와 return을 생략할 수 있음
const double = x => x * 2

// 4. 함수 본문이 여러 줄일 경우, 반드시 중괄호({}) 를 사용하고 return을 명시해야 함
const sum = (a, b) => {
  const result = a + b
  return result
}

4. Export / Import

JavaScript에서는 모듈을 내보내고 다른 파일에서 재사용할 수 있다
모듈을 내보내는 방법으로 named export 와 default export가 있다

Named Export

• 한 파일에서 여러개의 모듈을 내보낼 때 사용한다
• import 할 때 중괄호({}) 를 사용해야 하며, 이름이 정확히 일치해야한다
• as 키워드로 이름을 변경해서 import 할 수도 있다
• • as 를 사용하면 모든 모듈을 한 번에 객체로 import할 수 있다

// export.js
export const name = "JS"
export const age = 30

// import.js
import { name, age } from "./export.js"
import { name as myName, age as myAge } from "./export.js"
import * as person from "./export.js"

Default Export

• 파일당 하나의 기본값만 export 할 수 있다
• import 할 때 중괄호 없어도 되며, 이름도 마음대로 지정 가능하다

// export.js
export default function greet() {
  console.log("Hello")
}

// import.js
import greetFn from "./export.js"

5. Class

ES6에서 class 구문을 사용할 수 있게 됬다

class Person{
	constructor () {
    	this.name = "홍길동",
        this.age = 20
    }
}

const a = new Person()

6. 구조분해할당 (Destructing)

구조분해할당은 객체나 배열의 값을 개별 변수로 쉽게 꺼내어 할당할 수 있는 문법으로 가독성과 코드 간결성을 높혀준다

객체 구조분해할당

객체에서 값을 꺼낼 떄는 중괄호({}) 를 사용하며, key와 같은 이름의 변수로 꺼낼 수 있고, 다른 이름으로도 변경할 수 있음

const person = { name : "홍길동", age : 20 }

// 키와 동일한 이름으로 변수 선언
const { name, age } = person
console.log(name) // "홍길동"
console.log(age)  // 20

// 변수 이름 변경 → 키 : 변수이름
const { name: myName, age: myAge } = person
console.log(myName) // "홍길동"
console.log(myAge)  // 20

배열 구조분해할당

배열에서 값을 꺼낼 때는 대괄호([])를 사용하며, 앞에서부터 순서대로 변수에 할당된다

const fruits = ['apple', 'banana', 'orange']

const [a, b, c] = fruits
console.log(a) // "apple"
console.log(b)  // "banana"
console.log(c)  // "orange"

7. Rest Operator / Spread Operator

Rest Operator (나머지 매개변수)

• 함수의 인자나 배열, 객체에서 나머지 값들을 하나로 묶어 배열 또는 객체로 저장한다
• 함수 매개변수에서 마지막에 위치해야되며 하나만 사용할 수 있다

// args에 모든 인자가 배열로 전달
function func1(...args) {
  console.log(`[${args}]`) // [1,2,3,4,5]
}
func1(1, 2, 3, 4, 5)

// 일부 인자 분리 + 나머지 묶기
function func2(arg1, arg2, ...arg3) {
  console.log(`arg1: ${arg1}, arg2: ${arg2}, arg3: [${arg3}]`) 
  //  arg1: 1, arg2: 2, arg3: [3,4,5]
}
func2(1, 2, 3, 4, 5)

Spread Operator (전개 구문)

• 배열 또는 객체의 값을 낱개로 전개한다
• rest와 모양은 같지만, 반대의 개념이다

const arr = [1, 2, 3, 4, 5]
console.log(...arr) // 1 2 3 4 5

const str = "javascript"
console.log(...str)  // j a v a s c r i p t

8. for ... of

• iterable 객체의 값을 순회한다
• for ... in 은 객체의 key를 순회하고, for ... of 는 값을 순회한다

const arr = [1, 2, 3]
for (const num of arr) {
	console.log(num)
}

9. Map / Set 자료구조

Map

key-value 쌍을 저장

const m = new Map()
m.set('name', 1)
console.log(m.get('name')) // 1

Set

중복이 없는 값들의 집합

const s = new Set([1, 2, 3])
s.add(3)
console.log(s) // Set(3) {1, 2, 3}

10. Symbol

• 유일한 값 생성 (충돌 방지용 식별자)
• 주로 객체의 비공개 속성에 사용

const id = Symbol('id')
const user = { [id]: 123 }
console.log(user[id]) // 123

11. Promise

proimse는 비동기 처리 객체로, 복잡한 콜백이 무한이 반복되는 (콜백 지옥) 문제를 해결하고 더 깔끔하고 예측 가능한 비동기 코드를 작성할 수 있게 도와준다

const promise = new Promise((resolve, reject) => {
	// 비동기 작업
    if (성공) {
    	resolve("작업 성공")  // resolve 성공했을때 호출
    } else {
    	reject("작업 실패")  // reject 실패했을때 호출
    }
})

const p = new Promise((resolve, reject) => {
	setTimeout(()=> {
    	resolve("작업 완료")
    },1000)
})
p	
	// then 작업 성공 시 실행되는 콜백
	.then(result => console.log(result))  // "작업 완료"
    // catch 작업 실패 시 실행되는 콜백
    .catch(error => console.error(error)) // 에러 발생 시 실해
    // 항상 실행
    .finally(() => console.log("작업 종료")) // "작업 종료"

콜백 지옥

getUser(id, user => {
  getPosts(user, posts => {
    getComments(posts, comments => {
      console.log(comments);
    })
  })
})

Promise 체이닝

getUser(id)
  .then(getPosts)
  .then(getComments)
  .then(console.log)
  .catch(console.error)