ES6 문법 정리

 

템플릿 문자열

 

var book = {
	name: '리액트 프로그래밍 정석',
	location: 'A-2'
}

var msg = '도서 ' + book.name + '의 위치는 ' + book.location + '입니다.'

 

기존 자바스크립트에서는 문자열을 연결하려면 병합연산자(+)를 사용해야 했다.

위의 예시에서 msg라는 문자열 변수 하나를 만들기 위해 무려 4개의 병합연산자가 들어간다.

 

var book = {
	name: '리액트 프로그래밍 정석', 
	location: 'A-2'
}
var msg = `도서 ${book.name}의 위치는 ${book.location}입니다.`

 

템플릿 문자열은 작은따옴표대신 백틱(`)으로 문자열을 표현한다.

템플릿 문자열에서 변수, 함수, 식 등을 사용하기 위해서는 ${}로 감싸주면 된다.

 

 

전개연산자

나열형 자료를 추출하거나 연결할 때 사용한다.

즉, 객체나 배열의 값을 하나 하나 넘기는 용도로 사용할 수 있다.

배열이나 객체, 변수명 앞에 마침표 세 개(...)를 입력하는 방식으로 사용할 수 있으며 배열, 객체, 함수 인자 표현식([],{},()) 안에서만 사용할 수 있다. 

 

 

 

화살표함수

인자블록(())과 본문블록({}) 사이에 =>를 표기함으로써 사용할 수 있다.

따라서 function 표현에 비해 구문이 짧고 가독성이 좋다.

 

 

 

라이브러리 의존성 관리

import { 사용할 모듈 이름 } from '라이브러리위치/라이브러리이름.js'

 

기존 문법에서는 script 태그를 이용해 라이브러리를 관리했지만 ES6 문법부터는 사용할 모듈을 import하는 방식으로 이용 가능하다.

 

 

배열 함수

1. forEach()

  주어진 함수를 배열 요소 각각에 대해 실행하는 함수이다.

 

  구문

  arr.forEach( callback( currentvalue[ , index[ , array ] ] )[ , thisArg ] )

 

  매개변수

• callback : 각 요소에 대해 실행할 함수
• currentvalue : 처리할 현재 요소
• index : 처리할 현재 요소의 인덱스
• array : forEach()를 호출할 배열
• thisArg : callback을 실행할 때 this로 사용할 값

 

2. map()

  배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

 

  구문

  arr.map( callback( currentValue[ , index[ , array ] ] )[ , thisArg ] )

 

  매개변수

• callback : 각 요소에 대해 실행할 함수
• currentvalue : 처리할 현재 요소
• index : 처리할 현재 요소의 인덱스
• array : map()를 호출할 배열
• thisArg : callback을 실행할 때 this로 사용할 값

 

3. reduce()

  배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

  리듀서 함수는 누산기, 현재 값, 현재 인덱스, 원본 배열의 네 개의 인자를 가진다.

 

  구문

  arr.reduce( callback[ , initialValue ] )

 

  매개변수

• callback : 각 요소에 대해 실행할 함수
• accmulator : callback의 반환값을 누적. callback 이전 반환값 또는 callback의 첫번째 호출, initialValue의 값.
• currentValue : 처리할 현재 요소
• currentIndex : 처리할 현재 요소의 인덱스. initialValue가 있는 경우는 0, 아니면 1부터 시작.
• array : reduce()를 호출한 배열
• initialValue : callback의 최초 호출에서 첫번째 인수에 제공하는 값. 없으면 배열의 첫번째 요소 사용.

 

 

비동기함수

비동기처리를 위해 사용한다.

비동기처리란 작업 시간이 많이 필요한 작업을 처리하느라 다른 작업들이 대기하고 있는 상태라면 다른 작업을 먼저 진행하고 미뤄진 작업과 그 작업과 연관된 작업을 이후에 처리하는 방식이다.