ES6 문법(1)

ground4ekd·2020년 11월 18일
0

자바스크립트

목록 보기
1/6
post-thumbnail

설명하기에 앞서

흔히 아는 자바스크립트는 프로그래밍 인터프리터 언어 중 하나이다. 자바스크립트에서 ES5, ES6라고 불리는 ECMAScript(ES)는 대체 무엇인지 알아보자.

ECMAScript란?

ECMAScript는 Ecma 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어로서 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공한다. 쉽게 말하자면 ECMAScript는 스크립트 언어가 어떻게 생겨야 하는지에 관한 사양인 것이다.

  • ECMA 인터네셔널(ECMA International) : 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구
  • ECMA-262 : Ecma 인터내셔널에 의해 제정된 하나의 기술 규격으로, 범용 목적의 스크립트 언어에 대한 명세를 담고 있음

Javascript? ECMAScript?

자바스크립트는 이런 ECMAScript 사양을 준수하는 범용 스크립트 언어 중 하나인 것이다.

하지만 ECMAScript의 최신버전이 나왔다고 자바스크립트가 바로 적용해야 하는 것은 아니다. 최신 ECMAScript 사양을 준수하게 업데이트 하는 건 자바스크립트 엔진을 담당하는 회사나 조직(Google, Mozilla 등)에 달려있다. 그래서 개발자들은 해당 브라우저가 어떤 버전의 ECMAScript를 지원하는지 파악해야한다.

현재 ES8, ES9 등 최신버전의 ECMAScript 가 존재하지만, 아직 많은 환경에서 ES5를 사용하고 있다. 하지만 최근에는 ES6도 많이 사용하고 있기 때문에 ES6도 선택이 아닌 필수가 배워야한다.

ES6를 지원하지 않는 브라우저들에서도 ES6 문법을 사용하기 위해, 보통 ES6 문법을 ES5문법으로 변환시켜주는 Babel 플러그인을 사용한다. (IE ......😡)


ES6 문법

const, let

ES5

ES5에서는 var 키워드를 이용하여 변수를 선언하였는데, 여기에는 두 가지 문제점이 있었다. 바로 함수 스코프와 호이스팅 문제였다. 이해하기 쉽게 코드로 살펴보자.

// function scope
function main(){
  for(var i = 0; i < 100; i++){
    console.log(i) 
  }
  console.log(i)  // 10
}

위 코드 처럼 for문이 종료되었는데도 불구하고 i변수는 여전히 사라지지 않는다. 그 이유는 i의 유효 범위(스코프)가 main 함수이기 때문이다.

console.log(value) // undefined
var value = 1

value 변수는 선언되기 전부터 undefined로 불러올 수 있다. 정의를 제일 위로 끌어올리는 호이스팅 때문인데, 이러한 성질은 직관적이지 않으며 보통의 프로그래밍 언어에서 볼 수 없기 때문에 개발자를 혼란 시킬 수 있다.

ES6

아래처럼 보통의 프로그래밍 언어 같이 결과가 나온다.

function main(){
  for(let i = 0; i < 100; i++){
    console.log(i) 
  }
  console.log(i)  // Error 발생
}
console.log(value) // Error 발생
const value = 1

const는 상수라 한번 선언하면 변경하지 못하고, let은 값을 변경 가능하다.

객체와 배열의 사용성 개선

ES6 문법은 객체와 배열 코드를 보기 쉽고 작성하기 편하게 해준다. 코드로 알아보자.


// es5 문법은 뒤에 _5를 붙이고, es6는 _6을 붙이겠다

// 단축 속성명
const name = 'codingchu'
const obj_5 = {
  name: name
}
const obj_6 = { name }
console.log(obj_6.name) // 'codingchu'

// 계산된 속성명
function makeObject_5(key, value){
  const obj = {}
  obj[key] = value
  return obj
}
function makeObject_6(key, value){
  return { [key]: value }
}

// 전개 연산자
const arr = [1, 2, 3]
const obj = { name: 'codingchu' }
const copiedArr = [...arr]   // [1, 2, 3]
const copiedObj = { ...obj } // { name: 'codingchu' }

// 배열의 비구조화
const arr = [1, 2, 3]
const [a, b, c=5, d=4] = arr  // 기본값 부여 가능 (c는 값이 있으므로 기본값이 사용되지 않는다)
console.log('c=', c, ', d=', d)  // c=3, d=4

// 객체의 비구조화
const obj = { age: 11, name: 'codingchu' }
const { age, name: myName } = obj
console.log(name)   // Error
console.log(myName) // 'codingchu'

강화된 함수 기능

ES6에서는 함수의 기능이 많이 보강 되었다.

매개변수

// 기본값 주기
function print(text='init'){
  console.log(text)
}
print()  // 'init'

// 나머지 매개변수
function print(a, ...etc){
  console.log({ a, etc }) 
}
print(1, 2, 3)  // { a: 1, etc: [2, 3] }

화살표 함수와 this 바인딩

먼저 화살표(arrow) 함수는 코드 작성을 편하게 하고 깔끔하게 보이게 한다.

const add = (a, b) => a + b;
console.log(add(1, 3))  // 4

일반적인 형태의 함수는 this가 선언된 위치에 따라 다른 객체를 참조한다.

function Something(){
  this.value = 100
  setInterval(function increase(){
    this.value++
  }, 1000)
}
const obj = new Something()

위 코드에서 setInterval에서 인수로 들어간 increase 함수는 전역 환경에서 실행되기 때문에, this.value++ 코드에서 thiswindow 객체를 참조하게 된다. 결국 obj.value100이 그대로 유지된다.

하지만 화살표 함수를 사용하게 되면 thissetInterval의 동작과 상관없이 obj 인스턴스를 참조하게 된다. 따라서 setInterval 종료 후 obj.value101이 된다.

function Something(){
  this.value = 100
  setInterval(() => {
    this.value++
  }, 1000)
}
const obj = new Something()

템플릿 리터럴

ES6에서 추가된 템플릿 리터럴(Template literals) 은 변수를 이용해서 동적으로 문자열을 생성할 수 있다.

ES5 이전

var name = 'codingchu'
var age = 11
var hello = 'name: ' + name + ', age: ' + age

ES6 Template literals

const name = 'codingchu'
const age = 11
const hello = `name: ${ name }, age: ${ age }`

멀티라인 문자열도 작성하기 편해졌다.

이전 ES5 코드와 비교해보면 코드 작성과 가독성 면에서 우수해졌다는 것을 알 수 있다.


글을 마치며

생각보다 EC6 문법이 많아서 전부 정리하지 못했다. 아직 정리못한 Promise, async/await, generator 외에도 많은 문법이 있었다. 그래서 이 글을 시작으로 계속 조금씩 정리해보려 한다.

profile
오늘 뭐라도 하나 했다는 것

0개의 댓글