ES6

1. 변수 선언하기

 

 ES6 이전에는 var 키워드가 변수 선언을 위한 유일한 방법이었다. ES6이후로 더 나은 기능을 제공하는 몇가지 방법이 추가되었다.

 

1.1 const

상수는 값을 변경할 수없는 변수다. var로 선언한 변수와 비교해서 보자.

 

var isChangable = true

isChangable = false

console.log(isChangable) // false

 

상수값은 변경이 불가하다. 따라서 선언된 값을 변경하려는 시도는 에러가 발생한다.

 

const isNotChangable = true

isNotChangable = false

 

 

1.2 let

자바 스크립트도 렉시컬 스코프(일정 영역내에 선언되는 변수)를 지원한다. 자바스크립트는 중괄호 { }를 사용해 코드 블록을 만든다. 함수의 경우 이런 코드 블록이 별도의 변수 영역을 이루지만, is/else 문 같은 경우는 다르다.

 

if/else 블록 안에서 변수를 새로 만들면 그 변수의 영역은 그 블록 안으로만 한정되지 않는다.

 

var global = '글로벌'

if(global) {
  var global = '로컬'

  console.log(global) // 로컬
}

console.log(global) // 로컬

 

let 키워드를 사용하면 변수 영역을 코드 블록으로 한정시킬 수 있다.

 

var global = '글로벌'

if(global) {
  let global = '로컬'

  console.log(global) // 로컬

}

console.log(global) // 글로벌

 

1.3 템플릿 문자열

 

템플릿 문자열은 문자열 연결 대신 사용가능하다. 이는 문자열 중간에 변수를 삽입할 수 있게 한다.

 

전통적인 문자열 연결은 + 기호로 문자열과 변수를 이어붙이는 방식이었다.

console.log(firstString + ', ' + secondString + ', ' + thirdString)

 

템플릿에서는 ${ }를 사용해 문자열 내에 변수를 넣을 수 있다.

 

console.log(`${firstString}, ${secondString}, ${thirdString}`)

 

1.4 디폴트 파라미터

ES6 명세에도 C++이나 파이썬 같이 default parameter가 추가되었다. 따라서 함수에서 호출하면서 값을 지정하지 않으면 디폴트 값이 사용된다.

 

function funcA(firstName='Jonghwa', lastName='Lee') {
  console.log(`${firstName} ${lastName}`) // Jonghwa Lee
}

 

2. 화살표 함수

 

화살표 함수를 사용하면 function 키워드 없이도 함수를 만들수 있으며, return을 사용하지 않아도 식을 계산한 값이 자동으로 반환 된다.

 

var printName = function(name) {
  return `당신의 이름은 ${name} 입니다`
}

console.log(printName('JL')) // 당신의 이름은 JL 입니다

var printName = name => `당신의 이름은 ${name} 입니다`

파라미터가 한개일때는 주변 괄호를 생략해도 되지만 파라미터가 두개이상일때는 괄호를 넣어줘야 한다.

 

var printName = (firstName, lastName) => `당신의 이름은 ${firstName} ${lastName} 입니다`

print('Jonghwa', 'Lee') // 당신의 이름은 Jonghwa Lee 입니다

 

반환 결과값이 한줄로 끝날경우 return 이나 괄호가 필요없지만 여러 계산식이나 처리가 들어갈 경우 본문을 중괄호로 감싸고 return 값으로 결과를 반환해 주어야 한다.

 

var printName = (firstName, lastName) => {
  if(!firstName) {
    throw new Error('이름이 존재 하지 않습니다')
  }
  
  if(!lastName) {
    throw new Error('성이 존재 하지 않습니다')
  }
  
  return `당신의 이름은 ${firstName} ${lastName} 입니다`  
}

 

화살표 함수는 this를 새로 바인딩 하지 않는다. 다음 코드에서 this는 school 객체가 아니다

var school = {
  name: ['a', 'b', 'c'],
  print: function() {
    setTimeout(function() {
      console.log(this.name.join(','))
    }, 1000)
  }
}

school.print() // can read property 'join' of undefined 오류

다음 코드는 정상적으로 동작한다. 화살표 함수는 새로운 this 영역을 만들어내지 않는다.

var school = {
  name: ['a', 'b', 'c'],
  print: function() {
    setTimeout(() => {
      console.log(this.name.join(','))
    }, 1000)
  }
}

school.print() // a, b, c

 

3. 객체와 배열

 

3.1 구조 분해를 사용한 대입

 

구조 분해를 사용하면 객체 안에 있는 필드 값을 원하는 변수에 대입할 수 있다. 다음 student 객체를 보자. 이중 schoolName과 schoolYear 값을 얻어내기 위해서는 다음과 같이 한다.

 

const student = {
  name: '이철수',
  schoolYear: '3학년',
  schoolName: 'xy고등학교',
}

const {schoolName, schoolYear} = student;

console.log(schoolName, schoolYear} // xy고등학교 3학년

함수의 파라미터로 들어갈때도 .과 필드 이름을 사용하는 대신 원하는 값을 구조 분해로 가져올 수 있다.

 

var getSchoolInfo => student => {
  console.log(`${student.name} 은 ${student.schoolYear}에 다닌다`)
}

getSchoolInfo(student) // 이철수는 xy고등학교에 다닌다

var getSchoolInfo => ({name, schoolYear}) => {
  console.log(`${name} 은 ${schoolYear}에 다닌다`)
}

getSchoolInfo(student) // 이철수는 xy고등학교에 다닌다

배열을 구조 분해해서 원소 값을 변수에 대입할 수 있다.

 

var [first] = ['a', 'b', 'c']

console.log(first) // a

 

불필요한 값을 콤마(,)를 사용해 생략하는 리스트 매칭을 사용할 수도 있다. 무시하고 싶은 원소 위치에 콤마를 넣으면 된다.

 

var [,,value] = ['a','b','c']

console.log(value) // c

 

3.2 객체 리터럴 개선

 

객체 리터럴 개선은 구조 분해의 반대이다. 객체 리터럴 개선은 구조를 다시 만들어내는 과정 또는 한데 묶는 과정이라 할 수 있다.

 

const name = '철수'
const schoolYear = 3

// 기존 방식 
// const student = {name: name, schoolYear: schoolYear}

// 개선된 객체 리터럴
const student = {name, schoolYear}

console.log(student) // {name: '철수', schoolYear: 3}

 

3.3 스프레드 연산자

 

스프레드 연산자는 세 개의 점(...)으로 이루어진 연산자로, 몇 가지 다른 역할을 담당한다. 먼저 스프레드 연산자를 사용해 배열의 내용을 조합 할 수 있다.

 

const array1 = ['a', 'b', 'c']
const array2 = ['d', 'e']
const array3 = [...array1, ...array2]

console.log(array3) // ['a', 'b', 'c', 'd', 'e']

기존의 array를 사용할때 server 같은 함수를 호출해 사용하면 기존의 array값을 변경하는 경우가 있는데 스프레드 연산자로 이러한 문제를 해결 할 수 있다.

var array = ['a', 'b', 'c']
var [last] = array.reverse()

console.log(last) // 'c'
console.log(array.join(', ')) // c, b, a

-------------------------------------------

var array = ['a', 'b', 'c']
var [last] = [...array].reverse()

console.log(last) // 'c'
console.log(array.join(', ')) // a, b, c

 

스프레드 연산자를 사용해 배열의 나머지 원소를 나눠서 얻을 수 있다.

 

const array = ['a', 'b', 'c']
const [first, ...rest] = array

console.log(rest.join(', ')) // b, c

스프레드 연산자를 사용해 함수의 인자로 배열을 모을 수도 있다.

 

function getArray(...args) {
  console.log(args.join(', '))
}

getArray('a', 'b', 'c', 'd') // a, b, c, d

 

스프레드 연산자를 객체에 사용할 수도 있다. 

const student = {
  name: '이철수',
  schoolYear: '3학년',
}

const schoolName = 'xy 고등학교'

const studentInfo = {
  ...student,
  schoolName
}

console.log(studentInfo) // {name: '이철수', schoolYear: '3학년', schoolName: 'xy 고등학교'}