ECMAScript 2015로도 알려져있는 ES6은 ECMAScript의 가장 최신버전이다.
2009년도에 표준화된 ES5 이후로 혁신적인 기능들이 많이 업데이트 되었다고한다.
수많은 기능들이 ES6에 추가되었지만 그 중 많이사용하고 사용되는 또는 사용해본 문
법들을을 정리해보고자 한다.
Arrow Function(화살표 함수) = 전통적인 함수표현(function)을 간단하게 나타낸 식
생년월일로 나이를 계산하는 간단한 함수를 Arrow Function으로 나타내보면
기본형식
const calcAge = (birthYear) => {2022 - birthYear};
const calcAge = (birthYear) => 2022 - birthYear; {한줄일경우 생략가능}
const age = calcAge(1990)
console.log(calcAge) // 31
이렇게 코드를 한결 깔끔하게 작성 할 수 있다.
Template literals(탬플릿 레터럴)
문자열을 표현하는 방식 `` <- 백틱을 이용해 사용 할 수 있다.
<기존방식>
const name = '겨울이'
const age = 11
console.log("우리집 "+ "강아지 " + name + "의 나이는 " + age + "살 입니다.")
// '우리집 강아지 겨울이의 나이는 11살 입니다.' 우리집하고 띄우고 싶으면 console창에서도 실제로 띄워주고 "를 닫아야 한다. 이는 문자열을 표현하는데에 있어서 굉장히 불편하다
<Template litearls>
const name = '겨울이'
const age = 11
console.log(`우리집 강아지 ${name}의 나이는 ${age}살 입니다.`)
// '우리집 강아지 겨울이의 나이는 11살 입니다.' 거의 워드처럼 작성 할 수 있다. ${변수명} 을 나타내는 식이고 `백틱안에서 띄어쓰기 심지어 줄바꿈도 인식한다.`
let 과 const
자바스크립트에서 변수를 할당하는 방법에는 let const var 이렇게 3가지가 존재한다. 기존의 ES5에서 변수를 선언할 수 있는 유일한 방법은 var 뿐이였다. let과 var는 유사하게 동작하지만 엄밀히 따지면 범위가 다른데 var는 전체 외부함수까지 범위를 가지고 있지만, let은 변수를 선언한 블록과 그 내부 블록들에서 유효하다.
let, const = 블록 레벨 스코프(Block-level scope)
var = 함수 레벨 스코프(Function-level scope)
또한 범위 이외의 차이점으로는 재할당의 여부이다.
var, let은 재 할당이 가능하지만 상수변수라고도 말하는 const는 한번 할당된 이후로는 다시 값을 재할당 해줄 수 없다.
var foo = 123 // 전역변수
{
var foo = 234 // 지역변수
}
console.log(foo) // 234 전역변수 foodml 123값이 234로 덮어씌어져 출력된다.
let foo = 123 // 전역변수
{
let foo = 234 // 지역변수
}
또한 위에 코드는 글로 작성하는 것이기에 작동되는 것처럼 보이지만 한꺼번에 작성하여 테스트 해본다면 오류가 날 것이다.
Identifier 'foo' has already been declared. var는 같은 이름의 변수로 재할당이 가능하지만 let은 같은 변수 이름을 사용 할 수 없다.
ES6를 사용하는 사용자라면 var를 쓰지 않는다. var를 사용하여 변수를 할당 시 의도치않는 전역변수의 할당으로 인해 변하지 않아야될 값까지 모두 변경 될 수 있다.
console.log(foo) // 123 밖에 있는 let foo의 값이 {스코프 안에 있는}let foo 에 접근 할 수 없다.
const age = 19
// const age (X) const는 선언과 동시에 할당까지 같이 이루어져야 한다.
age = 20
console.log(age)
// 이렇게 작성해보면 아마 오류가 뜰건데 TpyeError : Assignment to constant variable. 상수변수에 할당을 해주었다는 오류이다.
let age = 19
age = 20
console.log(age) // 20이는 추후 코드를 작성 할 때 어떤 방식을 사용하여 변수를 할당해주었냐에 따라 다른 동료 내가 아닌 다른사람이 내 코드를 보았을때 이 변수는 나중에 재할당이 될 수있는 변수구나 아니면 이 변수는 const로 선언을 해주었으니 나중에 다시 재할당이 안되겠구나 하는 예측을 가능하게 해준다.
위에 언급한 기능 이외에 destructuring, map method, Module(import
export) 등 수많은 기능들이 추가 되었고, 이는 우리에게 보다 편리하고 직관적이
게 코드를 작성 할 수 있게 해주고 있다. javacript를 배울 때 가장 많이 사용하
는 언어이고 가장 많이 사용되는 언어라고 하여 배우기 시작하였지만, 아직 왜 인기
가 있고 왜 많이 사용되는지에 대한 답을 얻진 못한거같다. 다른언어사용자들의 경험
에 의하면 자바스크립트 다른언어들보다 편하다고는 한다. 묵시적선언? 이라던지 이는
추후 자바스크립트의 장점과 단점을 정리해서 공부 할 예정이다.
