[JavaScript] ES6 문법

1. Property Shorthand

// ES6 이전
const id = "idid",
    name = "namename",
    age = 30;

const user = {
    id: id,
    name: name,
    age: age,
};

console.log(user);

// ES6 이후
const id = "idid",
    name = "namename",
    age = 30;

const user = {
    id,
    name,
    age,
};

console.log(user)

객체를 정의할 때 객체의 key값과 value에 할당할 변수명이 같을 경우 value를 생략할 수 있다.

 

---

2. Concise Method

const user = {
    // info: function () {
            // ...
    // }
    info() { // Concise Method
        ...
    }
}

객체 내에서 좀 더 간결하게 메서드를 사용.

 

---

3. Destructuring Assignment

 

구조 분해 할당.

 

배열이나 객체에 입력된 값을 개별적인 변수에 할당하는 간편한 방식 제공.

 

• 객체

// 객체
let id = user.id;
let name = user.name;
let age = user.age;
let className = user.className;

// ES6 : Destructuring Assignment
let { id, name, age, className} = user;

 

• 배열

// 배열
const fruits = ["apple", "banana", "strawberry", "bear", "pineapple"];

// ES6 이전
const f1 = fruits[0];
const f2 = fruits[1];
const f3 = fruits[2];
const f4 = fruits[3];
const f5 = fruits[4];
console.log(f1, f2, f3, f4, f5);}

// ES6 이후
const [f1, f2, f3, f4, f5] = fruits;
console.log(f1, f2, f3, f4, f5);

 

• 매개변수

// 매개변수
function f1({ id, name, age }) {
    console.log("아이디 : " + id);
    console.log("이름 : " + name);
    console.log("나이 : " + age);
}
f1(user);

 

• 변수명을 객체의 property명과 다르게 만들 경우

// 변수명을 객체의 property명과 다르게 만들 경우.
let { id: user_id, name: user_name, age: user_age } = user;
console.log(user_id, user_name, user_age);

 

---

4. Spread Syntax

 

반복 가능한(iterable) 객체에 적용할 수 있는 문법.

 

배열이나 문자열 등을 풀어서 전개 시킬 수 있다.

 

// 배열에서 스프레드 구문 사용
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // arr2는 [1, 2, 3, 4, 5]

// 객체에서 스프레드 구문 사용
let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 }; // obj2는 {a: 1, b: 2, c: 3}

주의할 점은 Spread syntax는 얕은 복사다.

 

한 곳에서 값을 수정하면 모든 곳에서 값이 수정된다.

 

---

5. Default Parameter

 

함수에 전달된 파라미터가 undefined이거나 전달되지 않았을 경우, 설정한 값으로 초기화됨.

// ES6 이후
function print1(msg = "안녕하세요") {
    console.log(msg);
}
print1("야옹"); // 야용
print1(); // 안녕하세요

 

---

6. Template String

 

2023-01-16 node.js_3

 

---

7. Arrow Function

 

함수의 이름이 없는 익명 함수이므로 변수에 담아서 사용.

// 매개변수가 없을 경우.
() => {};
// 매개변수가 한 개 있을 경우. (param)의 소괄호 생략 가능.
(param) => {};
// 매개변수가 여러 개 있을 경우. (param1, param2)의 소괄호 생략 불가능.
(param1, param2) => {}

 

---

가. return 생략

 

• body의 내용이 한 줄일 경우

// body의 내용이 한 줄일 경우
(x) => {
    return x + 10;
};
(x) => x + 10;

// object return시
() => {
    return { id: "idid" };
};
() => ({ id: "idid" });

// body가 여러 줄일 경우 생략 불가.
(x) => {
    const y = x + 10;
    return y;
};

body가 여러 줄일 경우 생략 불가.

 

// Arrow Function에서는 this가 바인딩 되지 않음.
const user = {
    id: "idid",
    age: 20,
    info: () => console.log(this.id, this),
};
user.info() // undefined undefined

Arrow Function에서는 this가 바인딩되지 않는다.

 

---

8. Module

 

코드를 여러 파일과 폴더로 나누어 관리하기 위해서 필요.

 

<script type="module" src="app.js"></script>

구형 브라우저의 경우 module을 지원하지 않는 문제 있어서 webpack, parcel 등의 모듈 번들러를 통해 변환과정을 거친 뒤 사용.

 

---

가. export

 

변수, 함수, 클래스 export 가능.

export const a1 = "123"
export { a1, a2, a3, a4 }
export default a5
export default function () { }

• export : 여러 값들을 내보낸다.
• export default : 모듈당 하나의 값만 내보낸다. import할 때 특정 이름으로 가져올 필요가 없다.

 

---

나. import

// export
import { a1, a2, a4 } from './somewhere.js'
// export default
import a5 from './somewhere.js'

 

---