항해 7일차(ES란? ES5/ES6 문법 차이)

Undong·2023년 4월 9일
0

항해구구

목록 보기
7/52
post-thumbnail

자바스크립트를 공부하면서 ES란 단어와 ES 뒤에 숫자가 들어가 있는 것을 보았다. ES가 무엇인지, 그 뒤에 붙여 있는 숫자의 의미를 무엇인지 궁금해졌다. 이제 ES로 들어가보자!!

먼저 ES를 알기 전 자바스크립트에 대해 보자!

자바스크립트

Ecma International의 프로토타입 기반의 프로그래밍 언어로, 스크립트 언어에 해당된다. 특수한 목적이 아닌 이상 모든 웹 브라우저에 인터프리터가 내장되어 있다. 오늘날 HTML, CSS와 함께 웹을 구성하는 요소 중 하나다. HTML이 웹 페이지의 기본 구조를 담당하고, CSS가 디자인을 담당한다면 JavaScript는 클라이언트 단에서 웹 페이지가 동작하는 것을 담당한다.[1] 웹 페이지를 자동차에 비유하자면, HTML은 자동차의 뼈대, CSS는 자동차의 외관, JavaScript는 자동차의 동력원인 엔진이라고 볼 수 있다

여기서 볼 수 있는 부분은 Ecma International의 프로토타입 기반의 프로그래밍 언어이다. Ecma International이 무엇이냐? What?

정보와 통신 시스템을 위한 국제적 표준화 기구라는 것을 알 수 있다.

그럼 Ecma International와 ES가 어떤 관계가 있냐?

Ecma InternationalECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다.

ES를 풀어쓴다면 ECMAScript이다. 즉 위에 설명과 같이 ECMA-262 기술 규격에 따라 정의하고 있는 스크립트라고 할 수 있다.

그럼 또 ECMA-262 기술 규격이 무엇이냐?

ECMA-6 – ASCII 기반 7비트 유색 문자 코드, ISO/IEC 646으로도 알려짐
ECMA-107 – FAT12/FAT16 파일 시스템
ECMA-119 – CD-ROM 볼륨 및 파일 구조 (ISO 9660로 알려져 있음)
ECMA-262 - ECMA스크립트 언어 규격 (자바스크립트 기반)[4]
ECMA-334 - C# 언어 규격
ECMA-335 - 공통 언어 기반 (CLI)
ECMA-341 - 전자 제품을 위한 환경 디자인 고려
ECMA-363 - 유니버설 3D 파일 포맷
ECMA-367 - 에펠: 분석, 설계, 프로그래밍 언어 (에펠 참고)
ECMA-372 - C++/CLI 언어 규격
ECMA-376 - Office Open XML 언어 규격
ECMA-378 - HVD-ROM
ECMA-388 - Ecma 오피스 오픈 XML
ECMA-402 - ECMAScript 국제화 API 사양
ECMA-404 - JSON
ECMA-408 - 다트 언어 사양
ECMA-412 - Access Systems

보면 ECMA-262이 자바스크립트 기반이라는 것을 볼 수 있는데 Ecma International에는 수 많은 규격들이 존재하는데, 그 중 하나가 ECMA-262이며 곧 ECMAScript인 것이다.

그럼 ES뒤에 붙여 있는 숫자들은 무엇이냐?

"Ecma" 다음에 오는 숫자는 해당 표준의 버전 번호를 나타낸다. 예를 들어, "EcmaScript 6"은 "ECMA-262 6th edition"을 의미하며, "6"은 해당 표준의 6번째 버전임을 나타낸다.

그럼 버전들은 무엇이 있냐?

ES1 (ECMAScript 1997)
ES2 (ECMAScript 1998)
ES3 (ECMAScript 1999)
ES4 (ECMAScript 2000)
ES5 (ECMAScript 2009)
ES6 (ECMAScript 2015)
ES7 (ECMAScript 2016)
ES8 (ECMAScript 2017)
ES9 (ECMAScript 2018)
ES10 (ECMAScript 2019)
ES11 (ECMAScript 2020)
ES12 (ECMAScript 2021)
ES13 (ECMAScript 2022)

새로운 버전이 매년 출시되고 있다. 새로운 버전은 이전 버전을 기반으로 새로운 기능 및 개선 사항을 추가하며, 이러한 기능 및 개선 사항은 자바스크립트 개발을 보다 쉽고 효율적으로 만들어 준다.

그럼 가장 유명한 버전이 무엇이냐?

ES6 (ECMAScript 2015)은 자바스크립트의 큰 업그레이드 중 하나이다. 이전 버전의 ECMAScript보다 많은 기능과 개선 사항이 도입되어 자바스크립트 코드를 더욱 간결하고 가독성 좋게 작성할 수 있게 되었다. 이에 따라, ES6이 자바스크립트 커뮤니티에서 굉장히 인기가 높았다.

그럼 ES6이 이전 버전인 ES5와 무엇이 다르냐?

변수 선언

  • ES6에서는 let, const 키워드를 사용하여 블록 유효 범위 변수를 선언할 수 있다.
  • ES5에서는 var 키워드만을 사용하여 변수를 선언할 수 있다.
    Arrow Functions
  • ES6에서는 화살표 함수를 사용하여 함수를 더 간결하고 읽기 쉽게 작성할 수 있다.
  • ES5에서는 함수 선언식과 함수 표현식을 사용하여 함수를 작성한다.
    Class
  • ES6에서는 클래스를 사용하여 객체를 생성할 수 있다.
  • ES5에서는 생성자 함수와 프로토타입을 사용하여 객체를 생성한다.
    모듈
  • ES6에서는 모듈을 사용하여 코드를 조직화하고 재사용할 수 있다.
  • ES5에서는 네임스페이스 패턴 등을 사용하여 모듈화를 수행한다.
    Promise
  • ES6에서는 비동기 처리를 위해 Promise 객체를 도입하였다.
  • ES5에서는 비동기 처리를 위해 콜백 함수를 사용한다.

그외에도 이외에도 ES6에서는 템플릿 리터럴, for...of 루프, 디폴트 매개변수, Rest 파라미터 등의 새로운 기능과 개선 사항이 추가되었다.

마무리

한 주를 되짚어 보면서 이러한 WIL를 쓴다. 이번 주자바스크립트를 공부하면서 ES에 대해 많이 봤는데 제대로 알 지 못하여서 그냥 넘어갔었는데 공부를 해보게 되서 ES에 대해 알 수 있었고, ES6가 왜 많이 사용하는지에 대해서도 알 수 있었다. 또한 하루마다 TIL를 적으면서 그 날에 대해 모르는 부분, 내가 아는 부분들도 기록하여 다시 복습할 수 있는 계기가 되었다. 이번 주를 보면 자바스크립트에 대해 공부를 많이 하게되었고, 그로 인해 배울 수 있는 점도 많았다. 다음 주는 내가 아는 부분이더라도 복습도 많이 하고 저번 주 보다 더 공부를 열심히 해야겠다. 또한 TIL도 열심히 써야겠당!!

profile
console.log("Hello")

0개의 댓글