자바스크립트 ES6 문법 정리

ES6 (ECMAScript 6) 이란?

• var, let, const

• 화살표 함수 (Arrow Function)

• Desstructing

• Rest / Spread Operator

• for/of

• Map / Set

• 템플릿 리터럴 (Template Literals)

• 클래스 (class)

• Promise

• Default Parameter

• 모듈 가져오기 / 내보내기 (import / export)

1. var, let, const

1. 함수 스코프로 for, if, while 문 등에서 임시로 정의한 변수들이라고 하더라도, 동일한 함수 내에 있으면 블록이 끝나더라도 지속적으로 해당 변수에 접근할 수 있다.

function loop() {
	for(var i = 0; i < 5 i++) {
		console.log(i); // 0 ~ 4
	}
	console.log('finished for loop');
	// var 는 함수 스코프로 for 문이 종료되더라도 참조 가능
	console.log(i); // 4
}

 loop();

2. 호이스팅 과정으로 인해 정의를 하기 전에 var 로 선언된 변수를 참조할 수 있는 문제가 발생한다. (이전 호이스팅 포스팅 참조)

console.log(value); // undefined
var value = 10;

3. 변수의 재정의가 가능하다.

var value = 10;
var value = 20;
console.log(value); // 20

4. 변수의 재할당이 가능하다. (상수 사용 불가)

var value = 10;
console.log(value); // 10
value = 20;
console.log(value); // 20

1. 함수 스코프 → 블록 스코프

function loop() {
for (let i = 0; i < 5; i++) {
		console.log(i); // 0 ~ 4
	}
	console.log('finished loop');
	console.log(i); // reference error
}

loop();

2. 선언 전 참조 방지

console.log(value); // reference error
let value = 10;

3. 재정의 불가

let value = 10;
let value = 20; // syntax error

4. 재할당 불가 (const 키워드만)

let value1 = 10;
value1 = 20;
console.log(value1); // 20
const value2 = 10;
value2 = 20; // type error
console.log(value2);

2. 화살표 함수 (Arrow Function)

function func1() {
	console.log('Daniel, 25');
}

const arrowFunc1 = () => {
	console.log('Daniel, 25');
};

function func2(name) {
	console.log(name + ', 25');
}

// 파라미터가 1개 일 때는 소괄호 생략 가능 (선택사항)
// 함수 바디가 1줄 일 때는 중괄호 생략 가능
const arrowFunc2 = name => console.log(name + ', 25');

function func3(name, age) {
	console.log(name + ', ' + age);
}

const arrowFunc3 = (name, age) => {
	console.log(name + ', ' + age);
};

3. Destructing (구조 분해 할당)

• 객체
객체는 키 값을 이용하여 변수에 값을 할당할 수 있다. 이 과정에서 키의 순서는 중요하지 않다. 만약 변수명을 키 값과 다르게 가져가고 싶은 경우 키: 새로운 변수명 형식으로 적어주면 새로운 변수명에 값을 할당할 수 있다.

const information = { name: 'Daniel', age: 25 };

const { name, age } = information;
console.log(name); // Daniel
console.log(age); // 25

const { name: newName, age: newAge } = information;
console.log(newName); // Daniel
console.log(newAge); // 25

• 배열
객체는 키값으로 값을 접근하는 반면에, 배열은 무조건 앞에서부터 순차적으로 꺼내와야 한다.

const arr = [10, 20, 30];
const [num1, num2, num3] = arr;
console.log(num1); // 10
console.log(num2); // 20
console.log(num3); // 30

4. Rest / Spread 연산자

• Rest

// destructing
const arr = [1, 2, 3, 4, 5];
const [num1, num2, ...restNumbers] = arr;
console.log(restNumbers); // [3, 4, 5]

// 함수 매개변수
function func1(arg1, arg2, ...args) {
	console.log(arg1, arg2, args);
}

func1(1, 2, 3, 4, 5); // 1, 2, [3, 4, 5]

• Spread

const arr = [1, 2, 3, 4, 5];
const newArr = [...arr, 6, 7, 8];
console.log(newArr); // [1, 2, 3, 4, 5, 6, 7, 8]

5. for / of

const arr = [1, 2, 3, 4, 5];
for (const e of arr) {
  console.log(e); // 1, 2, 3, 4, 5
}

const str = 'JavaScript';
for (const s of str) {
  console.log(s); // J, a, v, a, S, c, r, i, p, t
}

6. Map / Set

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3],
]);
map.set('d', 4);
console.log(map); // 'a' => 1, 'b' => 2, 'c' => 3, 'd' => 4
map.set('a', 5);
console.log(map.get('a')); // 5

const set = new Set([1, 2, 3]);
console.log(set); // { 1, 2, 3 }
set.add(1);
set.add(4);
set.add(5);
console.log(set); // { 1, 2, 3, 4, 5 }

7. 템플릿 리터럴 (Template Literals)

let name = 'Daniel';
let age = 25;
console.log('name: ' + name + ', age: ' + age);
console.log(`name: ${name}, age: ${age}`);

let str = `name: ${name}, age: ${age}`;

console.log(str);

8. 클래스 (class)

// class 클래스명
class Person {
  // 2 args 생성자
  constructor(name = 'None', age = 0) {
    this.name = name;
    this.age = age;
  }

  // setter
  setName(name) {
    this.name = name;
  }

  setAge(age) {
    this.age = age;
  }

  // getter
  getName() {
    return this.name;
  }

  getAge() {
    return this.age;
  }

  // public function
  displayInfo() {
    console.log(`name: ${this.name}, age: ${this.age}`);
  }
}

let p1 = new Person();
let p2 = new Person('Daniel', 25);
p1.displayInfo();
p2.displayInfo();

9. Promise

const isEven = number =>
new Promise((resolve, reject) => {
	if (number % 2 === 0) {
		resolve('val is even number'); // go to then block
	} else {
		reject('val is odd number'); // go to catch block
	}
});

// 2는 짝수이기 때문에 resolve
isEven(2)
  .then(result => {
    console.log(result); // val is even number
  })
  .catch(err => {
    console.log(err);
  });

// 3는 홀수이기 때문에 reject
isEven(3)
  .then(result => {
    console.log(result);
  })
  .catch(err => {
    console.log(err); // val is odd number
  });

10. Default Parameter

function func1(a, b, c = 3) {} // O
function func2(a = 1, b, c) {} // X
function func3(a, b = 2, c) {} // X
function func4(a, b = 2, c = 3) {} // O

11. 모듈 가져오기 / 내보내기 import / export

{
  ...
  "type": "module"
  ...
}

function add(a, b) {
  return a + b;
}

function substract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
}

export function divide(a, b) {
  if (b === 0) {
    throw new Error('Cannot divide by zero');
  }
  return a / b;
}

export { add, substract };

import { add, substract, multiply, divide } from './calc.js';

console.log(add(1, 2));
console.log(substract(1, 2));
console.log(multiply(1, 2));
console.log(divide(1, 2));

// import * as calculator from './calc.js';

// console.log(calculator.add(1, 2));
// console.log(calculator.substract(1, 2));
// console.log(calculator.multiply(1, 2));
// console.log(calculator.divide(1, 2));

결론