[JavaScript 기본상식 2] ES6의 특징

진성·2022년 6월 2일
0

ECMAScript

ES(ECMAScript)란 자바스크립트를 표준화 하기 위해 만들어진, ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어이다.

ES6의 특징

1. 변수 선언 방법의 변화

ES6 이전에는 var를 이옹해 변수 선언을 하였다.
ES6로 넘어오면서 변수 선언 방법이 두가지가 추가 되었는데, constlet 이다.
var로 선언된 변수는 함수 단위의 스코프를 가지게 되지만, let 이나 const로 선언된 변수는 블럭 스코프를 갖게 된다.
즉, let이나 const로 선언된 변수는 선언된 블럭을 벗어나면 접근하기 어려워진다.

또한 var는 호이스팅 되는 특징을 가지고 있지만, letconst는 변수가 선언되기전에 참조하려고 하면 참조 에러가 발생하게 된다.

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

console.log(bbb) // 레퍼런스 에러!
let bbb = 1 

console.log(ccc) // 레퍼런스 에러!
const ccc = 1

추가적으로 varlet은 변수의 값을 재할당을 할 수 있다는 특징이 있지만, const는 재할당을 할 수 없다.

let aaa = 1
aaa = 2
console.log(aaa) // 2

const bbb = 1
bbb = 1 // 타입 에러!

주의해야 할 부분은 배열이나 객체를 const로 할당하게 되면 요소의 추가는 가능하다.
하지만 따로 선언한 새로운 배열이나 객체를 재할당 할 수 없다.

const arr1 = [1, 2, 3]
const arr2 = [3, 2, 1]
arr.push(4)
console.log(arr1) // 4
arr1 = arr2 // 에러!

const obj1 = {
  a: 1,
  b: 2
}
obj1.c = 3
console.log(obj1) // { a: 1, b: 2, c  3} 
const obj2 = {
  a: 2,
  b: 1
}
obj1 = obj2 // 에러!

Template Literals

템플릿 리터럴(Template Literals)은 문자열 중간에 변수나 함수를 호출해서 사용할 때 +, "" 조합을 사용하지 않아도 된다.

대신에 함수나 변수를 사용하는 부분에서 ${} 대괄호 안에 변수나 함수를 사용한다.

const apple = "사과"

console.log(apple + "는 5개 있습니다.")

console.log(`${apple}는 5개 있습니다.`)

화살표 함수

자바스크립트에는 함수를 선언할 때 방식이 세가지가 존재한다.
함수 표현식, 함수 선언식, 화살표 함수가 존재한다.

화살표 함수를 사용하게 되면 코드를 조금 줄일 수 있는 장점이 존재한다.

const myNumber = (a, b) => (a + b)

myNumber(1, 2) // 3

화살표 함수를 사용할 때 몇 가지 규칙이 존재한다.

화살표 함수의 내용에 한 줄 이상의 코드를 작성하려면 중괄호와 return을 사용해야 한다.

const myNumber = (a, b) => { 
  const par = a + b
  return par + 5
}

myNumber(1, 2) // 8

화살표 함수는 자신만의 this를 가지지 않는 특징이 있다.
자세한 내용은 이전의 포스팅한 this binding을 참고하면 좋을 것 같다.


Spread Operator

스프레드 연산자(Spread Operator)는 객체와 배열을 나열 해주는 것이라고 생각하면 된다.
일반적으로 얕은 복사를 하거나 요소를 하치는데 유용하다.
선언한 객체나 배열 앞에 ... 을 붙여주면 된다.

const obj1 = {
  a: 1,
  b: 2,
}
const obj2 = { ...obj1 }
console.log({...obj1}) // {a: 1, b: 2}
// obj1과 obj2는 다른 메모리 주소를 참조한다.
console.log(obj2) // {a: 1, b: 2,}

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]

const arr3 = [...arr1, ...arr2]
console.log(arr3) // [1, 2, 3, 4, 5, 6]

객체나 배열은 메모리 주소를 참조하기에 스프레드 연산자를 사용하면 간단하게 얕은 복사를 사용할 수 있다.
자세한 내용은 이전에 포스팅한 Shallow Copy & Deep Copy를 참고하면 좋을 것 같다.


Rest Parameter

나머지 매개변수(Rest Parameter)는 스프레드 연산자와 똑같이 생겼지만, 다른 역할을 한다.
인자의 개수가 정해지지 않았을때 인자를 받고 그것을 배열로 리턴해준다.

const aaa = (...bbb) => {
  return bbb
}
aaa(1, 2, 3, "string") // [1, 2, 3, "string"]

출처 : [JavaScript] 자바스크립트 ES6 특징들

profile
풀스택 진행중...

0개의 댓글