[WIL] 이노베이션 캠프 2주차 회고록(ES5, ES6 차이)

ES ?

ECMAScript의 기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈인 크로스 브라우징 이슈를 해결하기 위해 JavaScript를 표준화한 것.

ES5와 ES6의 차이

변수 선언

ES5 - var 재할당과 재선언에 굉장히 자유롭고 호이스팅에 문제가 있다.

 

호이스팅이란?

코드가 실행되기 전에 변수선언/함수선언이 해당 유효범위의 최상단으로 끌어 올려진 것과 같은 현상

 

ES6 - 호이스팅 문제를 해결하기 위해 const와 let이 추가되었다.

화살표 함수

ES6부터 등장한 함수 선언법

let function = () => {}

템플릿 리터럴

백틱으로 문자열 포맷팅을 할 수 있음. ES6부터 등장함.

클래스

ES6부터 class 키워드 사용 가능.

모듈

ES5 이전에는 각 기능별로 JS파일을 나누고 개발 및 관리하는 것이 불가능 했다.
ES5에선 require를 통해 모듈화를 할 수 있었다.
ES6부터는 import/export로 모듈관리를 할 수 있다.

this

ES5 같은 경우 객체 내에 있는 메소드를 실행 시 this는 메소드가 선언된 해당 객체를 가리킨다.
하지만 객체 안에서 선언된 함수의 this는 해당 객체가 아닌 window를 바라보고 있기 때문에 함수 안에서 this.name, this.age 를 하여도 아무 값이 나오지 않는다.

이러한 경우 해결방안으로 innerInfo.call(this) 를 통해 this 를 바인딩 시켜주거나 this를 해당 변수에 담아서 var self = this 와 같은 방식으로 접근하면 사용하면 된다.

ES6에서의 this 는 자신을 둘러싸고 있는 this를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요 없다.

 

 

 

 

---

2주차를 마치며

 2주차는 프로그래밍 기초 주차로 알고리즘 공부를 하며 자바스크립트와 친해지는데에 힘썼던 주이다. 평소 파이썬이나 C++로 알고리즘 문제들을 풀고, 자바스크립트는 거의 몰랐었기 때문에 이번 주차 덕분에 많이 익숙해 질 수 있었다.
처음으로 알고리즘 그룹 스터디도 접해봤는데, 다른사람들의 코드를 보고 많이 배우고, 서로 피드백 해주고, 좋은 경험이었다. 혼자서 공부하는 것 보다, 확실히 공부의 양과 질이 더 풍부했다. 그룹스터디를 할 기회가 주어 진다면, 주저말고 참여해 봐야겠다.

 

 

---

 

참고:

 

https://juniordev-team.tistory.com/6

[JS] Javascript ES5 vs ES6 비교 문법 정리