ES6 문법

이보아·2024년 4월 23일

ES6란?

ECMAScript 6는 ECMAScript 표준의 가장 최신 버전입니다. 2009년도에 표준화된 ES5 이후 언어 기능의 첫 업데이트이며, ES6는 이전 버전인 JavaScript 개발자들이 보다 쉽고 효율적으로 코드를 작성할 수 있도록 개선하였습니다.

1. let, const

ES5에서 사용하는 var은 재할당, 재선언이 가능하고, *호이스팅(hoisting)을 합니다. 그러한 var을 대체해서 나온 키워드이다. const는 재할당, 재선언이 불가능 합니다. 즉,객체와 함께 사용할 때를 제외하고는 변경 불가능한 변수 입니다. let은 재할당은 가능합니다.


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

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


// var 호이스팅 
console.log(name) // undefined

var name = "name1"


// 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

*호이스팅

호이스팅이란 코드가 실행되기 전 함수나 변수가 해당 범위의 최상단에 끌어올려지는 현상을 말합니다. let과 const로 선언한 코드는 선언하기 이전에 사용하려 하면 Reference error가 발생하지만 var로 선언한 코드는 함수 스코프를 기준으로 선언되기 이전에 사용하면 호이스팅이 발생하여 선언을 끌어올리기 때문에 undefined를 반환한다.'

2. 화살표 함수(Arrow Function)

function이나 return 키워드 없이 함수를 만드는 방법이며, 함수표현식 대신 간결한 대안으로 나온 함수 표현식입니다.

// ES5
function func() {
	return true
}

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

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

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

3.삼항 연산자 (ternary operator)

에서부터 조건문, 물음표(?), 조건문이 참(truthy)일 경우 실행할 표현식, 콜론(:), 조건문이 거짓(falsy)일 경우 실행할 표현식이 배치되는 연산자이다. 해당 연산자는 if...else문의 대체재로 빈번히 사용됩니다.

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)

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


//배열
function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers)); // 6

console.log(sum.apply(null, numbers)); // 6

//객체
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)

여러 줄로 이뤄진 문자열과 문자 보간기능을 사용하게 만들어 주는 문자열 리터럴 표현식입니다.
백틱(`)과 ${}로 표현합니다


// 기존 방식
var a = 5;
var b = 10;
console.log("a,b 의합은 " + (a + b) + "입니다." );

// 템플릿 리터럴 
const a = 5;
const b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

가져오기 및 내보내기 (Import and Export)

JavaScript 응용프로그램에서 import 및 export를 사용하면 성능이 향상됩니다. import 는 함수, 객체, 원시 값을 내보낼 때 사용합니다. import는 가져가 사용할 수 있습니다. 이를 통해 별도의 재사용 가능한 구성요소를 작성할 수 있습니다.

default Export

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

export default Name

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

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)