ECMAScript
ES(ECMAScript)란 자바스크립트를 표준화 하기 위해 만들어진, ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어이다.
ES6 이전에는 var
를 이옹해 변수 선언을 하였다.
ES6로 넘어오면서 변수 선언 방법이 두가지가 추가 되었는데, const
와 let
이다.
var
로 선언된 변수는 함수 단위의 스코프를 가지게 되지만, let 이나 const로 선언된 변수는 블럭 스코프를 갖게 된다.
즉, let이나 const로 선언된 변수는 선언된 블럭을 벗어나면 접근하기 어려워진다.
또한 var
는 호이스팅 되는 특징을 가지고 있지만, let
과 const
는 변수가 선언되기전에 참조하려고 하면 참조 에러가 발생하게 된다.
console.log(aaa) // undefined
var aaa = 1
console.log(aaa) // 1
console.log(bbb) // 레퍼런스 에러!
let bbb = 1
console.log(ccc) // 레퍼런스 에러!
const ccc = 1
추가적으로 var
와 let
은 변수의 값을 재할당을 할 수 있다는 특징이 있지만, 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)은 문자열 중간에 변수나 함수를 호출해서 사용할 때 +, "" 조합을 사용하지 않아도 된다.
대신에 함수나 변수를 사용하는 부분에서 ${}
대괄호 안에 변수나 함수를 사용한다.
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)는 객체와 배열을 나열 해주는 것이라고 생각하면 된다.
일반적으로 얕은 복사를 하거나 요소를 하치는데 유용하다.
선언한 객체나 배열 앞에 ... 을 붙여주면 된다.
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)는 스프레드 연산자와 똑같이 생겼지만, 다른 역할을 한다.
인자의 개수가 정해지지 않았을때 인자를 받고 그것을 배열로 리턴해준다.
const aaa = (...bbb) => {
return bbb
}
aaa(1, 2, 3, "string") // [1, 2, 3, "string"]