[항해99] Week02. WIL – ECMAScript, ES란? ES5/ES6 문법 차이

👩🏻‍💻 Weeky I Learned 📚

 

⭐ ECMAScript 란?

JavaScript를 공부하다보면 ECMAScript 라는 단어를 한번쯤은 보게 될 겁니다. 두 용어가 믹스되어서 사용되기 때문에 헷갈리기 쉽습니다. 오늘 그 두 가지 용어의 차이를 알아보려고 합니다.

 

ECMA 인터내셔널 👉🏻 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구입니다

브라우저가 생겨나고 서로 사용자를 끌어내기 위해 혼란스러울 시기에 MS의 IE가 JScript 라는 이름으로 자바스크립을 더해서 만들어냅니다. 이 때 이미 Javascript는 존재하고 있었는데 두 가지의 스크립트는 시간이 흐를수록 달라져가고 더욱 혼란을 가중하자 ECMA 인터내셔널에서 이런 스크립트 언어에 대한 표준을 내리게 됩니다.

이 뿐만 아니라 다른 표준안도 정하기 때문에 그와 구분하기 위해서 뒤에 숫자를 붙였는데 그것이 바로 ECMA262입니다. 스크립트 기술 규격으로 스크립트 언어에 대한 표준을 정의한 규칙입니다.

 

스크립트 언어(Script Language) 란?

독립된 시스템에서 작동하도록 특별히 설계된 프로그래밍 언어입니다. 스크립트 언어의 특징으로는 응용 프로그램과는 독립적이고 사용자가 직접 프로그램을 의도에 따라 동작시킬 수 있다는 것입니다. 여기서 ECMAScript를 연결시킬 수 있습니다.

ECMA262 기술 규격에 의해 정의 된 스크립트가 바로 ECMAScript입니다. 숫자가 붙은 것이 표준 이름이지만 하나의 사양을 뜻하는 것이고. ECMAScript는 스크립트 언어가 준수해야하는 규칙, 세부 사항 등을 제공합니다. ECMAScript는 문서로 작성되어 있습니다.

 

EMCA262 전문 보러가기

 

 

JavaScript(자바스크립트) 란?

자바스크립트는 ECMAScript 사양을 준수하는 스크립트 언어입니다. ECMAScript를 보면 어떤 스트립트 언어를 만들 수 있고요, 자바스크립트를 보면 어떤 스크립트 언어를 쓸 수 있는지를 알 수 있습니다. 쉽게 이야기해보자면 자바스크립트는 ECMAScript에서 파생된거라고 보시면 이해를 도울 수 있을 것 같습니다. ECMAScript는 스펙, JavaScript는 언어!

파생된다고 하니 헷갈리시겠지만, 다시 한번 말하지만 만들어진 것은 JavaScript가 먼저입니다.
JavaScript 가 1996년도에 만들어졌고, 그 다음 해에 JavaScript 표준화를 위해서 ECMAScript가 만들어졌습니다.
서로가 서로를 기반으로 하고 있기 때문에 혼용되어 사용되는게 아닐까 싶습니다.

 

 

⭐ ES5 vs ES6 문법 차이

ES6 란, ECMA262 의 제 6판 입니다. 사양의 주요 변경 사항 및 개선 사항을 명세합니다. 책이 개정판이 나오듯이 계속 발전해나가는 거죠. 동의어로는 ES2015, ECMAScript 2015 가 있습니다.

ES3 1999년도에 나온 자바스크립트로 대중적으로 제일 많이 아는 형태입니다. 함수 단위의 스코프, 프로토타입, 클로저 등 자바스크립트의 기본이 되는 것들이 담겨있습니다.

ES5는 2009년에 나왔습니다. 기본적으로 IE9부터 지원을 합니다.

이 때 다양한 것들이 많이 개선되었는데요.

• 배열과 관련해서 새로운 메소드들이 많이 생겼습니다. forEach, map, filter, reduce 등 반복 순환하는 메소드들이 생겼고요.
• 객체의 프로퍼티를 설정할 수 있다는 것이 큰 변화였습니다. 객체를 생성/수정/복사하는 표준 메소드들(Object.create(), Object.defineProperty(), Object.freeze(), Object.assign() 등등)과 getter/setter 등 Object.keys 메소드를 쓰면 for in 메소드도 대체할 수 있게 됩니다.
• strict 모드도 이때 탄생했습니다. 문법을 말그대로 stric 하게 체크하는 모드입니다. 코드의 안전화를 위해서 등장했습니다.(에러방지)
• bind()메소드 – 이건 this 대신에 쓸 수 있는 메소드입니다. 어떤 함수를 새로 써야할 때~ 유용하죠
• JSON(JavaScript Object Notation)
  XML형태로 데이터를 주고 받던 방식으로 JSON으로 경량화 되었습니다.

 

ES6로 넘어오면서도 많은 것들이 변화했습니다.

• const, let의 등장과 함수 단위 스코프에서 블록 단위 스코프로 변경되었습니다
  var 이라는 global한 변수 키워드를 썼었는데, const와 let이 등장하고 블록 단위 스코프로 변하면서 변수를 선언할 때 네이밍때문에 혼란을 빚는 일이 적어졌습니다. const는 상수를 선언 할 때, 선언과 동시에 할당을 무조건 해야하고 let은 var과 거의 같은데 단위가 블록으로 바꼈다는 점만 다르답니다
• 화살표 함수의 등장. 애로우 펑션으로 호출할 수 있습니다.
• Promise의 등장
• Default, Rest 파라미터
• Spread 연산자 등장

 

이후에 또 ES7 -10 까지 꾸준하고 나오고 있습니다

ES7에서는 제곱이 간편해지고~ ** 이게 제곱을 뜻합니다

ES8는 padStart() 메소드 등장으로 앞 / 뒤 수정이 편해지고, entries() 객체도 배열로 변경할 수 있고, values()만 조회도 가능합니다

ES9는 rest , spread – 배열을 해체하던 것처럼 객체도 해체 할 수 있게 됩니다. Promise에 then,catch 외에도 finally가 추가되었습니다. promise 성공, 실패 여부와 상관없이 무조건 실행시켜주는 메서드입니다

ES10는 flat()으로 중첩된 배열 제거도 가능! 데이터 정리도 할 수 있습니다

 

 

 

💜 회고

항해99 합류하기 전부터 꾸준하게 공부하는게 답이라는 생각에 조금씩 풀어보고 있던 프로그래머스. 알고리즘 주차에서 보게 될 줄은 몰랐는데, 문제가 길어진다 싶으면 피했던 문제도 이제는 당당하게 맞서서 읽어보고 생각이라는 걸 할 수 있게 된 것 같다. 그저 피고 싶던 알고리즘 문제에 대한 자신감도 생겼고, 역시나 다시 한번 꾸준히 공부를 해줘야 감을 잃지 않고 메소드나 로직에 대한 이해도도 깊어지고 빨라진다는 생각이 들었다. 같이 공부했던 분들이 함께 하루에 한 개씩이라도 풀자고해서 그룹으로 공부해도 너무 좋을 것 같다.