ES6(ECMAScript 2015)

ES6(ECMAScript 2015)

공식 문서

var, let, const

• var
  • 변수, 전역 스코프(함수레벨), 재선언 및 재할당 가능
• let
  • 변수, 해당 스코프(블록레벨), 재선언 불가능, 재할당 가능
• const
  • 상수, 해당 스코프(블록레벨), 재선언 및 재할당 불가능

객체 {} 또는 배열 []로 선언했을 경우 객체의 속성과 배열의 요소는 변경 가능

Scope

대부분의 프로그래밍 언어는 Block-level scope이나 JavaScript는 Function-level scope

• 함수 레벨 스코프(Function-level scope)

  • 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조 불가
  • 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수

• 블록 레벨 스코프(Block-level scope)

  • 모든 코드 블록(함수, 제어문, 조건문, try-catch문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 블록 외부에서는 참조 불가능
  • 코드 블록 내부에서 선언한 변수는 지역 변수

Property Shorthand (단축 속성명)

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

Concise Method (간결한 메소드)

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

method_name: function() {
  ...
}

// Concise Method
method_name() {
  ...
}

Destructuring Assignment (구조 분해 할당)

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

// 배열
const arr = ["value1", "value2", "value3"];

// ES6 이전
{
  const value1 = arr[0];
  const value2 = arr[1];
  const value3 = arr[2];
}

// ES6 이후
{
  const [value1, value2, value3] = arr;
}

// 객체
const user = {
  id: "id",
  name: "name",
};

// ES6 이전
{
  let id = user.id;
  let name = user.name;
}

// ES6 이후
// 객체의 property와 변수명이 같을 경우
{
  let { id, name } = user;
}

// 객체의 property와 변수명이 다를 경우
{
  let { id: new_id, name: new_name } = user;
}

Spread Syntax (전개 구문)

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

배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수(함수로 호출할 경우) 또는 요소(배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체를 확장시킬 수 있다.

Spread operator의 경우 값 복사가 아닌 주소를 가져오기 때문에 값을 바꿀 경우 모두 변경

// 1. ... 연산자는 iterable(배열과 같은)을 잘게 쪼갠다
const cars1 = ["Saab", "Volvo", ..."BMW"];
const cars2 = ["Fiat", "Toyota"];

const combined = [cars1, ...cars2];
console.log(combined);

// 2.
const numbers = [23, 55, 21, 87, 56];
let maxValue = Math.max(...numbers); // max 함수는 Fuction Rest Parameter 사용
console.log(maxValue);

Default Parameter

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

function myFunction(x, y = 10) {
  // 두 번째 파라미터 값이 없거나 undefined이면, y는 10으로 넘어온다
  return x + y;
}

let result = myFunction(5);
console.log(result);

Template String

문자열에 변수를 포함시킬 때 좀 더 직관적이고 편하게 사용하기 위한 기능

변수를 넣고자 하는 부분에 ${ var } 키워드를 사용해 변수를 넣어 준다.

문자열 사용시 큰따옴표("") 대신 백틱(``)을 사용

백틱 내부의 줄 바꿈은 그대로 적용

// Template Literals (Template Strings, ES 5)

// 1. 백틱으로부터 벗어나려면 역슬래시 \ 사용
let result = `\`` === "`";
console.log(result);
result = `\${1}` === "${1}";
console.log(result);

// 2. 여러 줄 입력 가능
console.log("문자열 첫번째 줄\n문자열 두번째 줄");
console.log(`문자열 첫번째 줄
문자열 두번째 줄`);

// 3. 문자열 보간(String Interpolation)
const a = 5;
const b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

// 3-1. CSS class 이름 동적으로 변경할 때 사용
const isLargeScreen = function () {
  return false;
};
const item = {
  isCollapsed: true,
};

const classes = `header ${isLargeScreen() ? "" : `icon-${item.isCollapsed ? "expander" : "collapser"}`}`;

console.log(classes);

// 4. Tagged template
const person = "Mike";
const age = 28;

function myTag(strings, personExp, ageExp) {
  const str0 = strings[0]; // That
  const str1 = strings[1]; // is a
  const str2 = strings[2]; // .

  const ageStr = ageExp > 99 ? "centenarian" : "youngstar";

  return `${str0}${personExp}${str1}${ageStr}${str2}`;
}

const ouput = myTag`That ${person} is a ${age}.`;
console.log(ouput);

Arrow Finction (화살표 함수)

기존 함수의 선언 function name(param) {};의 형식을 축양하여 사용

함수의 이름이 없는 익명 함수이므로 변수에 담아서 사용, const name = (param) => {};

// 매개변수가 없을 경우
() => {};

// 매개변수 한 개 있을 떄, 소괄호 생략 가능
param = > {};

// 매개변수 여러 개 있을 때, 소괄호 생략 불가능
(param1, param2) => {};

// function body
(param) => {
  return param;
};

// body의 내용이 한 줄일 경우 {} 생략 가능, 결과 값이 자동으로 return
(param) => param;

// 객체 return 시 () 사용
() => {
  return {};
}

() => ({});

// body가 여러 줄일 경우 {}, return 생략 불가능
(param) => {
  const param2 = param1 + 10;
  return param2;
};

module

ESM (ECMAScript Module, ECMA215, ES6) : 자바스크립트 자체 모듈

ES2015 모듈은 기본적으로 JavaScript코드를 담고 있는 파일

import 또는 export 구문을 사용

브라우저 지원 여부 확인

project의 규모가 커지면서 코드를 여러 파일과 폴더로 나누어 작성하고 파일간에 효율적으로 불러올 수 있도록 해주는 시스템 필요

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

구형 브라우저의 경우 module을 지원하지 않는 문제 발생 가능

webpack, parcel등의 모듈 번들러를 통해 변환과정을 거친 뒤 사용

module scope

모듈의 가장 바깥쪽에서 선언된 이름은 전역 스코프가 아니라 모듈 스코프에서 선언된다.

모듈 스코프에 선언된 이름은 export 해주지 않으면 해당 모듈 내부에서만 접근 가능

따라서 여러 모듈의 가장 바깥쪽에서 같은 이름으로 변수, 함수, 클래스를 선언하더라도, 서로 다른 스코프에서 선언되기 때문에 이름의 충돌이 발생하지 않는다.

export & import

module scope에 선언된 이름은 export 구문을 통해 다른 파일에서 사용 가능

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

export된 이름을 다른 파일에서 import구문을 통해 가져온 뒤 사용 가능

이름을 선언하는 구문 앞에 export를 붙이면 선언과 동시에 export 개별적으로 가능

파일의 마지막에 export를 선언하면 한 번에 export 가능, export { name1, name2 }

export default를 통해 모듈을 대표하는 하나의 값을 지정하고 모듈을 가져올 때 {}를 사용하지 않아도 된다.

객체형식으로 하게 되면 한 번에 import 가능