[JS] ES6의 특징

cabbage·2023년 1월 10일

JS

목록 보기
3/43
post-thumbnail

자바스크립트의 ES6의 특징에 대해 정리하겠습니다.

자바스크립트 ES6

ECMAScript 2015는 자바스크립트의 두 번째 주요 개정판입니다. ECMAScript 2015는 ES6, ECMAScript 6 라고도 합니다.

ES6의 새로운 기능들

  • let 키워드
  • const 키워드
  • 화살표 함수
  • ... 연산자
  • For/of
  • Map 객체
  • Set 객체
  • Classes
  • Promises
  • Symbol
  • Default Parameters
  • Function Rest Parameter
  • String.includes()
  • String.startsWith()
  • String.endsWith()
  • Array.from()
  • Array.keys()
  • Array.find()
  • Array.findIndex()
  • 새로운 Math 메소드
  • 새로운 Number 프로퍼티
  • 새로운 Number 메소드
  • 새로운 Global 메소드
  • Object entries
  • 자바스크립트 모듈

자바스크립트 let

let 키워드를 사용하면 블록 스코프를 갖는 변수를 선언할 수 있습니다.

var x = 10;

{
  let x = 2;
}

자바스크립트 const

const 키워드를 사용하면 상수를 선언할 수 있습니다. 상수는 let 변수와 유사하지만, 값을 변경할 수 없다는 점이 다릅니다.

var x = 10;
{
  	const x = 2;
}

화살표 함수

화살표 함수는 함수 표현식의 단축 문법입니다. function, return, 중괄호가 필요하지 않습니다.

// ES5
var x = function(x, y) {
  return x * y;
}

// ES6
const x = (x, y) => x * y;

화살표 함수는 자신만의 this를 갖지 않습니다. 객체 메소드를 정의할 때 잘 맞지 않습니다.

화살표 함수는 호이스팅되지 않습니다. 사용하기 전에 반드시 정의되어야 합니다.

var를 사용하는 것보다 const를 사용하는 것이 안전합니다. 함수 표현식은 항상 상수 값이기 때문입니다.

함수가 단일 문장이라면 return 키워드와 중괄호 {}를 생략할 수 있습니다. return 키워드와 중괄호를 항상 유지하는 것이 좋은 습관일 수 있습니다.

const x = (x, y) => { return x * y; }

스프레드(...) 연산자

... 연산자는 배열과 같은 이터러블(iterable)을 요소로 펼칩니다.

const cars1 = ["Saab", "Volvo", "BMW"];
const cars2 = ["Saab", "Volvo", ...["BMW"]];

... 연산자는 함수 호출에 대한 전달인자로 이터러블을 펼치는 데 사용할 수도 있습니다.

const numbers = [23, 55, 21, 87, 56];
let maxValue = Math.max(...numbers);

For/Of 루프

자바스크립트 for/of 루프는 이터러블한 객체의 값들을 반복합니다.

for/of를 사용하면 배열, 문자열, 맵, 노드리스트 등과 같은 이터러블한 데이터 구조를 반복할 수 있습니다.

for/of 루프는 다음과 같은 문법을 갖습니다:

for (variable of iterable) {
  // code block
}
  • variable - 매 반복마다 다음 프로퍼티의 값이 변수에 할당됩니다. 변수는 const, let, var를 사용해서 선언할 수 있습니다.
  • iterable - 이터러블한 프로퍼티를 갖는 객체입니다.

배열 반복하기

const cars = ["BMW", "Volvo", "Mini"];
let text = "";

for (let x of cars) {
  text += x + " ";
}

문자열 반복하기

let language = "JavaScript";
let text = "";

for (let x of language) {
    text += x + " ";
}

자바스크립트 Maps

객체를 키로 사용할 수 있다는 점이 Map의 중요한 기능입니다.

const fruits = new Map([
	["apples", 500],
  	["bananas", 300],
  	["oranges", 200]
]);

자바스크립트 Sets

// Create a Set
const letters = new Set();

// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

자바스크립트 Classes

자바스크립트의 클래스는 자바스크립트 객체를 위한 템플릿입니다. class 키워드를 사용해서 클래스를 생성합니다. constructor()라는 메소드를 항상 추가하세요.

class ClassName {
	constructor() {}
}
class Car {
	constructor(name, year) {
      this.name = name;
      this.year = year;
    }
}
  • 위 예제는 Car라는 클래스를 생성합니다.
  • 클래스는 "name"과 "year"라는 두개의 초기 프로퍼티를 갖습니다.

자바스크립트의 클래스는 객체가 아닙니다. 자바스크립트 객체를 위한 템플릿입니다.

클래스 사용하기

클래스가 있다면, 객체를 생성하기 위해 클래스를 사용할 수 있습니다.

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

자바스크립트 Promises

Promise는 "생산하는 코드"(Producing Code)와 "소비하는 코드"(Consuming Code)를 연결하는 자바스크립트 객체입니다. "생산하는 코드"는 시간이 조금 걸릴 수 있고 "소비하는 코드"는 언제나 그 결과를 기다려야 합니다.

// Prmoise Syntax
const myPromise = new Promise(function(myResolve, myReject) {
	// "Producing Code" (May take some time)
  
  	myResolve();  // when successful
  	myReject();   // when error
});

// "Consuming Code" (Must wait for a fulfilled Prmoise)
myPromise.then(
	function(value) { /* code if successful */ },
  	function(error) { /* code if some error */ }
);

Promise를 사용하는 예제

const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

Symbol 타입

자바스크립트 Symbol은 Number, String, Boolean처럼 원시 데이터타입입니다. Symbol은 다른 어떤 코드도 갑작스럽게 접근할 수 없는 독특한 "숨겨진" 식별자를 나타냅니다.

예를 들어, 서드파티 코드에 포함된 person 객체에 person.id 프로퍼티를 서로 다른 개발자들이 추가하는 경우, 각자의 값들이 꼬일 수 있습니다. Symbol()을 사용해서 독특한 식별자를 생성하면 이 문제를 해결할 수 있습니다.

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

let id = Symbol('id');
person[id] = 140353;
// Now person[id] = 140353
// but person.id is still undefined

Symbol은 항상 유니크합니다. 같은 값으로 두 개의 Symbol을 생성해도 다른 값을 갖습니다.

Symbol("id") == Symbol("id");  // false

Default Parameter Values

ES6는 함수의 파라미터가 기본 값을 갖는 것을 허락합니다.

function myFunction(x, y = 10) {
  // y is 10 if not passed or undefined
  return x + y;
}
myFunction(5); // will return 15

Function Rest Parameter

rest 파라미터(...)를 사용하면 불명확한 개수의 전달인자들을 하나의 배열로 취급할 수 있습니다.

function sum(...args) {
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}

let x = sum(4, 9, 16, 25, 29, 100, 66, 77);

String.includes()

includes() 메소드는 문자열이 특정 값을 포함하는 경우 true를 반환하고, 포함하지 않는 경우라면 false를 반환합니다.

let text = "Hello world, welcome to the universe.";
text.includes("world")    // Returns true

String.startsWith()

startsWith() 메소드는 문자열이 특정 값으로 시작하는 경우 true를 반환하고, 시작하지 않는 경우라면 false를 반환합니다.

let text = "Hello world, welcome to the universe.";
text.startsWith("Hello")   // Returns true

String.endsWith()

endsWith() 메소드는 문자열이 특정 값으로 끝나는 경우 true를 반환하고, 끝나지 않는 경우라면 false를 반환합니다.

var text = "John Doe";
text.endsWith("Doe")    // Returns true

Array.from()

Array.from() 메소드는 length 프로퍼티를 갖는 어떠한 객체 또는 이터러블한 객체로 부터 배열 객체를 반환합니다.

Array.from("ABCDEFG")   // Returns [A,B,C,D,E,F,G]

Array keys()

keys() 메소드는 배열의 키를 갖는 배열 이터레이터(Iterator) 객체를 반환합니다.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

let text = "";
for (let x of keys) {
  text += x + "<br>";
}
// '0<br>1<br>2<br>3<br>'

Array find()

find() 메소드는 테스트 함수를 통과하는 첫 번째 배열 요소의 값을 반환합니다. 아래 예제는 18 보다 큰 첫 번째 요소를 찾습니다.

const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

테스트 함수가 세개의 전달인자를 받는 것에 주목하세요.

  • 아이템 값
  • 아이템 인덱스
  • 배열 자체

Array findIndex()

findIndex() 메소드는 테스트 함수를 통과하는 첫 번째 배열 요소의 인덱스를 반환합니다. 아래 예제는 18 보다 큰 첫 번째 요소의 인덱스를 찾습니다.

const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

테스트 함수가 세개의 전달인자를 받는 것에 주목하세요.

  • 아이템 값
  • 아이템 인덱스
  • 배열 자체

새로운 Math 메소드

ES6는 Math 객체에 아래의 메소드들을 추가했습니다.

  • Math.trunc()
  • Math.sign()
  • Math.cbrt()
  • Math.log2()
  • Math.log10()

새로운 Number 프로퍼티

ES6는 Number 객체에 아래의 프로퍼티들을 추가했습니다.

  • EPSILON
  • MIN_SAFE_INTEGER
  • MAX_SAFE_INTEGER

새로운 Number 메소드

ES6는 Number 객체에 2개의 새로운 메소드들을 추가했습니다.

  • Number.isInteger()
  • Number.isSafeInteger()

새로운 global 메소드

ES6는 2개의 새로운 global number 메소드들을 추가했습니다.

  • isFinite()
  • isNaN()

Object entries()

배열 이터레이터를 생성하고, key/value 페어를 반복하는 예제입니다.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();

for (let x of f) {
  document.getElementById("demo").innerHTML += x;
}

entries() 메소드는 key/value 페어를 갖는 배열 이터레이터 객체를 반환합니다.

[0, "Banana"][1, "Orange"] [2, "Apple"][3, "Mango"]

entries() 메소드는 원본 배열을 바꾸지 않습니다.

모듈

모듈은 두 가지 다른 방법으로 임포트됩니다.

named export에서 임포트하기
person.js 파일로부터 named export를 임포트하는 방법입니다.

import { name, age } from "./person.js";

default export에서 임포트하기
message.js 파일로부터 default export를 임포트하는 방법입니다.

import message from "./message.js";

참고

profile
cabbage
캐비지 개발 블로그입니다. :)
이전 포스트

[JS] null과 undefined

다음 포스트

[JS] ==와 ===의 차이점

0개의 댓글