TIL) ES5=>ES6 변경된 부분

chloe·2020년 12월 28일
0

TIL

목록 보기
24/81
post-thumbnail

ES6에 추가된 점

1.var =>Const,let 추가

ES5까지의 자바스크립트에서는 var를 이용해서 변수를 정의했고 그게 유일한 방법이었다.

ES6에서는 Const,let이라는 새로운 변수 정의 방법이 생겼다.

var가 가진 문제가 무엇이었을까?

1) 함수 스코프

var의 첫 번째 문제는 정의된 변수가 함수 스코프를 가진다는 것이다. 스코프란 변수가 사용될 수 있는 영역을 말한다. 또한 var는 함수 스코프이기에 for 반복문에서 정의된 변수가 반복문이 끝난 이후에도 계속 남는 문제점이 있다.

2)호이스팅

var로 정의된 변수는 그 변수가 속한 스코프의 최상단으로 끌어올려진다. 이를 호이스팅이라고 함.

console.log(myVar);//undefined
var myVar=1;

호이스팅의 결과
var myVar=undefined;
console.log(myVar);//undefined
myVar=1;

3)var 변수는 재정의가 가능하다. (버그로 이어지기 쉽다)

var의 문제를 해결하는 const,let

const,let은 블록 스코프다.

블록스코프에서는 블록을 벗어나면 변수를 사용할 수 없다.

블록 스코프에서 if문의 블록 안에서 정의된 변수는 if문을 벗어나면 참조할 수 없다.

console.log(foo);//참조 에러
const foo =1;
똑같은 경우에 var는 에러가 나지 않는다.

const는 변수를 재할당 불가능하게 만든다.

재할당 불가능한 변수는 프로그램의 복잡도를 상당히 낮춰주기에 되도록이면 재할당 불가능한 변수를 사용하는게 좋다.

2.화살표함수 등장

화살표 함수를 이용해 함수를 정의하는 방법이 추가되었다.
🧐 일반함수와 화살표함수는 어떤 점이 다를까?
1) This
우선 그전에 this를 알 필요가 있다.
this는 현재 실행 문맥을 뜻한다. 즉 호출한 것이 누구냐는 것이다.

가장 큰 차이는 일반함수는 자신만의 데이터를 가질 수 있지만 화살표함수는 그렇지 못하다.
화살표함수는 this를 통해서 자기 소유의 데이터를 가질 수 없다. 호출은 가능하지만 생성은 불가능하다.
화살표 함수의 this는 바인딩되지 않고 바로 상위 스코프의 this와 같지만 기존의 일반 함수는 this가 동적으로 바인딩된다.

2)생성자 함수 사용가능여부
화살표 함수는 new 사용 불가(생성자 함수로 사용불가)
말그대로 클래스나 객체의 생성자로 사용 불가능하다. 그와 동시에 new붙여서 생성할 수 없다. 일반 함수는 생성자 함수로 사용할 수 있다.

3)arguments 사용가능 여부

일반 함수에서는 함수가 실행될 때 암묵적으로 arguments 변수가 전달되어 사용할 수 있었지만 화살표함수에서는 arguments변수가 전달되지 않는다.

3.프로미스 등장

비동기 상태를 값으로 다룰 수 있는 객체

profile
Front-end Developer 👩🏻‍💻

0개의 댓글