Home ES6에 추가된 기능
Post
X

ES6에 추가된 기능

게시 2023/07/05 업데이트 2025/01/15
By Psmin
8 m읽는 시간

ES6에서 추가된 기능들을 알아보자.

비구조화 할당 Destructuring assignment

배열이나 JSON 객체의 프로퍼티를 해체하여 그 값을 개별 변수에 담을 수 있게 해주는 자바스크립트 표현식입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// ES5
let users = ["홍길동", "김철수", "박민재"];

let user1 = users[0];
let user2 = users[1];
let user3 = users[2];

let user = {
  name: "홍길동",
  age: "20",
};

let name = user.name;
let age = user.age;

// ES6
let [user1, user2, user3] = ["홍길동", "김철수", "박민재"];

let { name, age } = {
  name: "홍길동",
  age: "20",
};

비구조화 할당에서 중첩된 JSON 객체에서 원하는 값을 꺼내오고 싶은 경우, 다음과 같이 중괄호를 사용하여 원하는 값을 꺼내올 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

const user = {
  name: "홍길동",
  age: 20,
  gender: "남",
  address: {
    city: {
      ward: {
        wardName: "Gangnam",
      },
      cityName: "Seoul",
    },
  },
};

const {
  name,
  age,
  gender,
  address: {
    city: {
      ward: { wardName },
      cityName,
    },
  },
} = user;

… 연산자 Three dots Operator

  1. 잔여 연산자 (Rest Operator)

    비구조화 할당에 의해 선택되지 않은 남은 열거형 속성 키를 할당해줍니다.

    즉, 반복 가능한 대상에서 선택되지 않은 나머지 원소들을 배열로 추출해준다.

    1
2
3
4
5
6
7
8
9
10
11
12
13

    let [user1, ...users] = ["홍길동", "김철수", "박민재"];

console.log(user1); // 홍길동
console.log(users); // [ '김철수', '박민재' ]

let { name, ...props } = {
  name: "홍길동",
  age: "20",
  gender: "남",
};

console.log(name); // 홍길동
console.log(props); // { age: '20', gender: '남' }

  2. 전개 연산자 (Spread Operator)

    비구조화 할당문이 아닌 곳에서 사용되는 점 3개 연산자를 전개 연산자라 합니다.

    전개 연산자는 객체의 속성을 모두 전개해 새로운 객체로 만듭니다.

    • 값 전체 복사

      1
2
3
4
5
6
7
8
9
10
11
12
13

      const arr = [1, 2, 3];
const copy1 = [...arr];

const user = {
  name: "홍길동",
  age: 20,
  gender: "남",
};

const copy2 = { ...user };

console.log(copy1); // [1, 2, 3]
console.log(copy2); // { name: '홍길동', age: 20, gender: '남' }

    • 새로운 값 할당

      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

      const arr = [1, 2, 3];
const copy1 = [...arr, 4];

const user = {
  name: "홍길동",
  age: 20,
  gender: "남",
};

const copy2 = {
  ...user,
  age: 25,
};

console.log(copy1); // [ 1, 2, 3, 4 ]
console.log(copy2); // { name: '홍길동', age: 25, gender: '남' }

객체 프로퍼티 초기화 단축

ES6에선 객체 프로퍼티 이름이 로컬 변수 이름과 같으면 콜론과 값 없이 작성해도 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// es5
function getAddress(country, city, street) {
  const myAddress = {
    country: country,
    city: city,
    street: street,
    str_num: 888,
    postcode: "9999",
  };
}

// es6
function getAddress(country, city, street) {
  const myAddress = {
    country,
    city,
    street,
    str_num: 888,
    postcode: "9999",
  };
}

for .. of 문

ES6에서 추가된 반복문인 for .. of문은 배열의 내용을 출력할 수 있고 내부에서 break문도 사용 가능합니다.

1
2
3
4
5
6
7
8
9

let years = [2002, 2013, 2016, 2023];

for (let year of years) {
  console.log(year);

  if (year == 2013) {
    break;
  }
}

includes

ES6에선 includes를 활용하면 배열에 특정값이 있는지를 깔끔하게 확인할 수 있습니다.

1
2
3
4
5
6

let years = [2001, 2010, 2015, 2018];
const fruits = ["apple", "banana", "potato"];

// es6
console.log(years.includes(2014)); // false
console.log(fruits.includes("apple")); // true

Map, Set

es6부터는 javascript에서도 Map과 Set을 지원합니다.

  1. Map

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

    let map = new Map([["id", "test"]]);
// map 선언 ( 앞이 key, 뒤가 value가 된다 )

map.set("testId", "test");
// map에 key와 value 추가 ( 역시 앞이 key, 뒤가 value가 된다 )

console.log(map); // Map { 'id' => 'test', 'testId' => 'test' }

console.log(map.get("testId")); // test
// key에 해당하는 value 출력

console.log(map.size); // 2
// map 크기 출력

console.log(map.has("testId")); // true
// map에 특정 key가 있는지 확인

console.log(map.entries()); // [Map Iterator] { [ 'id', 'test' ], [ 'testId', 'test' ] }
// map안의 모든 요소를 key, value 형태의 array로 집어넣은 iterator 반환

console.log(map.keys()); // [Map Iterator] { 'id', 'testId' }
// map안의 모든 key를 반환

console.log(map.values()); // [Map Iterator] { 'test', 'test' }
// map안의 모든 value를 반환

console.log(map.delete("testId"));
// map 안에서 특정 key에 해당하는 key-value쌍 삭제

map.clear();
// map안의 모든 값 삭제

  2. Set

    배열과 유사한 순회 가능한 객체로 배열처럼 value로만 이뤄져있지만, 값이 키와 동일하게 설정되어있습니다.

    값은 중복될 수 없으며, 중복될 경우 가장 앞의 값을 제외하고 삭제된다

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    const set = new Set([1, 1, 1, 1, 1, 1, 1, 2, 4, 4, 4, 3, 3, 3]);
// set 선언

set.add(4);
set.add(5);
// set에 값 추가

console.log(set); // Set { 1, 2, 4, 3, 5 }

console.log(set.size); // 5

// Set은 중복을 허용하지 않는다

set.delete(5);
// Set에서 특정 값 삭제

set.clear();
// Set의 모든 값 삭제

템플릿 리터럴 Template Literal

템플릿 리터럴이란 내장된 표현식을 허용하는 문자열 리터럴입니다.

여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다.

백틱(` `) 을 사용해 표현하며 플레이스 홀더를 이용하여 표현식($ {expression})을 넣을 수 있습니다.

플레이스 홀더 안에서의 표현식과 그 사이의 텍스트는 함께 함수로 전달되고 함수는 단순히 해당 부분을 단일 문자열로 연결시켜 줍니다.

1
2
3
4
5
6
7
8
9

//기존 문자열 출력 방식
let data = expression;

console.log("data is" + data);

//변경
let data = expression;

console.log(`data is ${data}`);

참조

Knowledge, NodeJS
ES6
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.

Recent Update
Link