[JavaScript] ES6 문법

📌 이번 포스팅에서 배울 내용      ▶ ES6 문법           ▷ let, const           ▷ 화살표 함수           ▷ 삼항 연산자           ▷ 구조 분해 할당           ▷ 단축 속성명           ▷ 전개 구문           ▷ 나머지 매개변수           ▷ 템플릿 리터럴           ▷ default export / named export

 

---

 

ES6 (ECMAScript 6)

2015년에 발표된 JavaScript의 버전 중 하나로, 새로운 문법과 기능을 대규모로 도입하여 개발자들이 보다 쉽고 효율적으로 코드를 작성할 수 있도록 개선하였다.

 

🔥 ES6는 대규모 문법적 향상 및 변경으로 인해 자주 언급되는 내용이다.

---

let, const

기존에 존재하던  var  키워드를 대체해서 나온 변수 선언 키워드이다.

•  var  : 재할당 가능, 재선언 가능

var name = "John"
console.log(name) // John

// 재할당
name = "Jane"
console.log(name) // Jane

// 재선언
var name = "Kim"
console.log(name) // Kim

 

•  let  : 재할당 가능, 재선언 불가능

let name = "John"
console.log(name) // John

// 재할당
name = "Jane"
console.log(name) // Jane

// 재선언
let name = "Kim" // SyntaxError: Identifier 'name' has already been declared

 

•  const  : 재할당 불가능, 재선언 불가능

const name = "John"
console.log(name) // John

// 재할당
name = "Jane" // TypeError: Assignment to constant variable.

// 재선언
const name = "Kim" // SyntaxError: Identifier 'name' has already been declared

---

화살표 함수 (Arrow Function) 

 function  키워드 없이 함수를 만드는 방법이다. 코드가 한 줄일 경우  return  키워드도 생략 가능하다.

const add = (a, b) => {
	return a + b
}

const add = (a, b) => a + b

---

삼항 연산자

조건문의 결과에 따라 다른 값을 할당할 수 있는 문법이다.

조건 ? true일 경우의 값 : false일 경우의 값

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

---

구조 분해 할당 (Destructuring)

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

/* 배열 */

let [value1, value2] = [1, "new"]
console.log(value1, value2) // 1 new

let arr = ["John", "Jane", "Kim"]
let [a, b, c] = arr
console.log(a, b, c) // John Jane Kim

let [a, b, c, d] = arr
console.log(a, b, c, d) // John Jane Kim undefined

let [a, b, c, d = "Lee"] = arr
console.log(a, b, c, d) // John Jane Kim Lee

/* 객체 */

let user = { name: "John", age: 30 }
let { name, age } = user
console.log(name, age) // John 30

let { name: newName, age: newAge } = user
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) // John 30

let { name, age, gender } = user
console.log(name, age, gender) // John 30 undefined

let { name, age, gender = "male" } = user
console.log(name, age, gender) // John 30 male

---

단축 속성명

객체의 key와 value 값이 동일하면 생략 가능하다.

const name = "John"
const age = "30"

const obj = { name: name, age: age }

const obj = { name, age }

---

전개 구문 (Spread)

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

/* 배열 */

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

/* 객체 */

let user1 = { name: "John", age: 30 }
let user2 = { ...user }

user2.name = "Jane"

console.log(user1) // { name: "John", age: 30 }
console.log(user2) // { name: "Jane", age: 30 }

---

나머지 매개변수

function print(a, b, ...args) {
	console.log(...args)
}

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

---

템플릿 리터럴

여러 줄로 이루어진 문자열과 문자 보간 기능을 사용할 수 있는 표현식이다.

const user = { name: "John", gender: "male" }

let str = `
    My name is ${user.name}
    I'm male ${user.gender}
`

---

default export  /  named export

default export

• 외부 파일에서는 사용자가 원하는 이름으로 import 가능

// js file
const Name = () => {}
export default Name

// other file 
import newName from "name.js"

 

named export

• 하나의 js 파일에서 여러 개의 변수 및 클래스 export 가능
• 외부 파일에서는 js 파일에서 지정한 이름으로 import 가능
• 다른 이름을 사용하고 싶으면  as  키워드 사용

// js file
export const Name1 = () => {}
export const Name2 = () => {}

// other file
import { Name1, Name2 } from "name.js"
import { Name1 as newName1, Name2 as newName2} from "name.js"