원래 이렇게 사용할 수 있었던 것처럼 익혔을 때가 되서야 ES6 문법에 대해서 써보려고한다.
(늦어도 너무 늦었다...)
ES6의 새로운 문법에 대해 모든 것을 설명할 필요는 없어보인다! 왜냐면, 이미 많은 Velog에 잘 설명되어 있기에
나는 그중에 내가 제일 많이 사용하는, 제일 유용하게 사용되는 녀석들 몇몇만 골라서 설명해보려고 한다.
| Arrow function
Javascript에서 함수를 표현할 때, 이전에는
function hello () {
return 'hello'+name;
}
hello('kojongdev')이런식으로 앞에 function을 붙여서 표현해줬다면, ES6 문법이 도입 되었을 때부터는
const hello = (name) => {
return `hello ${name}`;
}
hello('kojongdev')이렇게 표현할 수 있게 되었다!
코드를 보았을 때는 이 둘의 차이를 확실하게 알 수 없다.
내가 느꼈던 가장 큰 차이점은 this의 동작이 다르다는 것이다.
ES5 문법에서는 자신을 마지막으로 품고있는 scope를 this라고 판단하고,
Arrow Function에서는 처음 바인딩 된 스코프를 this라고 인식한다.
요것에 대한 예를 들자면 아래와 같다.
function before (){
return {
x: 1,
y: function() {
console.log('before y: ', this.x);
}
}
}
const after = () => {
return {
x: 1,
y: function() {
console.log('after y: ', this.x);
}
}
}
before.call({x:10}).y();
after.call({x:10}).y();
==> before y: 1
==> after y: 10글로 이해하는 것보다는 코드로 보는게 훨씬 이해가 쉬울 것 같다.
| const, let
모든 변수를 var로 선언했던 적이 있었다.
짧은 코드로 만들어진 프로그램에서는 크게 문제점을 느끼지 못했으나, 프로그램이 점점 커지고 코드양이 늘어나면서
변수의 선언에 대해서도 신경을 써야 된다는 걸 크게 깨닫고 그때부터는 적어도 let이라고 쓰자라는 마인드로 코드를 짰던 것 같다.
const와 let에 대해 설명해보겠다.
먼저 둘다 블럭단위 변수이다. 한 scope 내에서만 동작이 된다.
예를 들자면
const constlet = () =>{
setTimeout (()=>{
let temp = 'scope 안에서만'
console.log('in :', temp)
})
console.log('out :', temp)
}
위 코드를 돌려보면 아래에서는 temp를 가져올 수 없는 현상이 발생한다.
이처럼 하나의 scope 쉽게 말해 {} 안에서 선언한 변수는 {}안에서만 사용할 수 있다는 것이다!
그럼 왜 const와 let으로 나누어 놓았느냐면,
const 같은 경우에는 재할당이 불가능하며, let은 변수를 재할당할 수 있다.
따라서 변하지 않을 값에는 const를 사용하고, 변하는 값에는 let을 사용한다 생각하면 쉽게 이해할 수 있을 것이다!
| ``(백틱) or Template Literals
백틱이라는 문자를 처음 들어보는 사람들도 적지않을 것 같다.
(적어도 처음에 나는 그랬다... 쓸줄은 아는데 말할수가 없다..)
주저리주저리 글로 설명하는 것보다 코드 한번이면 아주 금방 이해 될 것이라 생각된다.
//백틱을 사용했을 때
const backtic = (name) => {
return `안녕하세요 저는 ${name}입니다.`;
}
//백틱을 사용하지 않았을 때
const backtic = (name) => {
return '안녕하세요 저는 ' + name + '입니다.';
}
위에서 볼 수 있듯이 문자열에서 변수를 사용할 수 있게된다!
위의 예제처럼 하나의 변수일 때는 크게 차이를 못느낄 수 도 있는데, 많은 변수를 문자열에 포함하다보면 '+'를 쓰는게
여간 귀찮은 일이 아닐 수 없다.
쓰다보면 간결해지는 코드들을 확인할 수 있을 것이다.
| 배열 or 객체 비구조화
어떻게 말로 설명해야 할까 하다가 이것도 말로 설명하는 것보다는 코드로 쓰는게 좋을 것 같다는 판단을 내렸다..
const kojongdev = {
age: 29,
gender: male,
birthday: '03/17'
}
// 이전 문법
let age = kojongdev.age;
let gender = kojongdev.gender;
let birthday = kojongdev.birthday
// ES6
let {age, gender, birthday} = kojongdev위에서 볼 수 있듯이, 이전에는 변수마다 값을 할당해주어야 했는데, ES6에서는 해당 객체의 속성을 바로 가져올 수 있게 되었다.
하나만 예를 들면 간결한 것을 많이 느낄 수 없지만, 앞으로 모든 코드에 적용하게 된다면 꽤나 깔끔한 코드가 될 것이다.
Spread operator(스프레드 연산자)
스프레드 연산자는 기존의 배열을 복사하거나, 가져올 때 편리하게 사용할 수 있는 방법이다.
예를 들자면
// example 1
const temp1 = [1,2,3,4,5,6]
const temp2 = [...temp1]
// example 2
const temp1 = [1,2,3,4,5,6]
const [ t1, t2, ...t_other ] = temp1
// t_other = [3,4,5,6]쉽게 말해 배열을 돌면서 값을 가져온다고 생각하면 쉬울 것 같다!
나는 주로 배열 복사할 때 사용하거나, 함수에서 배열을 받을 때 사용하는 경우가 많은 것 같다.
이외 다른 문법들
ES6 에 다른 문법들도 많이 있다.
시작할 때 말했듯이 오늘은 내가 주로 사용하는 것들을 위주로 정리해본 것이다.
class나 promise/fetch/async-await, 모듈 선언에 관한 것들을 이해 못했다면 다른 문서들을 한번 더 보는 것도 좋을 것 같다!
이미 너무 많은 문서에서 정리되어 있어서 생략한 것이긴 한데, 시간이 된다면 몇가지는 더 정리해봐야 할 것 같다.
이상 끝!
