[ WIL ] ( Week 2 주차) JavaScript의 ES란? ES5/ES6 문법 차이

 

ES6 관련된 JS기초문법 학습내용
2023.07.29 - [2. JS문법 종합] - [ JavaScript 문법 종합반 2주차 (1)] ES6문법, 구조분해할당
2023.07.31 - [2. JS문법 종합] - [ JavaScript 문법 종합반 2주차 (2)] ES6문법, 단축속성명, 전개구문, 탬플릿 리터럴
 

---

 
ES6란? 
ES6는 ECMAScript 6의 줄임말로, 자바스크립트의 표준 버전 중 하나이다. ES6는 2015년에 발표되었으며, ES5 이후로 언어 기능에 대한 첫 번째 주요 업데이트 되었다. ES6는 자바스크립트 개발자들에게 많은 새로운 기능과 문법을 제공했다.
 
"Es버전은 매년 버전이 갱신되고있다."
ES6는 2015년에 만들어졌는데, 이때 자바스크립트에 엄청난 패러다임의 변화가 있어 보통 사람들은 ES6기준으로 (그 이전은 구버전  ES6부터는 신버전이라고 함) 설명한다. 그래서 ES6라고 하면 ES6~현재 ES버전 까지를 통 들어 말한다.
 

참고한 관련 YOUTUBE :

YOUTUBE < 눈물코딩 > ES6 관련 영상

 

---

 

그래서, ES6의 장점은?
 

let과 const 키워드를 도입하여 블록 스코프를 지원하고, 변수의 재선언이나 재할당을 방지할 수 있다. 이는 변수의 유효 범위를 제어하고, 코드의 가독성과 신뢰성을 높이는 데 도움이 된다.

화살표 함수를 사용하여 함수를 간결하고 읽기 쉽게 선언할 수 있다. 화살표 함수는 function 키워드 대신 => 기호를 사용하며, this 바인딩을 자동으로 상위 스코프와 동일하게 설정한다. 화살표 함수는 내장 함수인 map, filter, reduce 등과 함께 사용하기에도 편리하다.

템플릿 리터럴을 사용하여 문자열을 생성하고 연결하는 새로운 방법을 제공한다. 템플릿 리터럴은 백틱 (`)으로 감싸고, 문자열 내에서 변수나 표현식을 ${}으로 삽입할 수 있다. 또한, 템플릿 리터럴은 줄 바꿈이나 공백을 그대로 유지하므로, 다중 줄 문자열을 만들기에도 유용하다.

클래스를 도입하여 객체 지향 프로그래밍을 위한 새로운 문법을 제공한다. 클래스는 객체의 틀을 정의하고, 생성자, 메서드, 속성 등을 포함할 수 있습니다. 또한, 클래스는 상속, 캡슐화, 다형성 등의 객체 지향적인 특징을 지원합니다. 클래스는 class 키워드로 선언하고, new 키워드로 인스턴스를 생성할 수 있다.

모듈을 도입하여 코드를 재사용하고 관리하기 쉽게 만들 수 있다. 모듈은 import와 export 키워드를 사용하여 다른 파일에서 정의된 변수나 함수를 불러오거나 공개할 수 있다. 모듈은 코드의 의존성을 낮추고, 네임스페이스 충돌을 방지하고, 코드의 구조화와 분리에 도움이 된다.

프로미스를 도입하여 비동기 작업의 결과를 나타내는 객체를 제공한다. 프로미스는 pending, fulfilled, rejected라는 세 가지 상태를 가집니다. 프로미스는 then, catch, finally와 같은 메서드를 사용하여 비동기 작업의 성공, 실패, 종료에 대한 콜백 함수를 등록하거나 체이닝 할 수 있습니다. 프로미스는 콜백 지옥을 피하고, 가독성과 유지보수성을 높이는 데 도움이 된다.

나머지 매개변수와 확산 연산자를 도입하여 배열이나 객체의 요소나 속성들을 개별 값으로 추출하거나 펼칠 수 있다. 나머지 매개변수는 함수를 정의할 때 매개변수 앞에 … 을 붙여서, 정해지지 않은 개수의 인자들을 배열로 받을 수 있게 해 준다. 확산 연산자는 배열이나 객체 앞에 …을 붙여서, 그 안의 요소나 속성들을 개별 값으로 펼칠 수 있게 해준다. 이렇게 하면 배열이나 객체를 복사하거나 병합하는 등의 작업을 쉽게 할 수 있다.
 

 

 

ES6는 과연 장점만 있을까? 

- ES6는 구형 일부 브라우저를 지원하지 않는다는 단점이 있다. ( 대표적인 예로 IE ) 단점을 아래에서 자세히 살펴보자!

 

호환성이 낮다. ES6는 최신 브라우저에서 대부분 지원되지만, 구형 브라우저에서는 지원되지 않거나 부분적으로만 지원된다. 따라서, ES6로 작성된 코드를 구형 브라우저에서 실행하려면 트랜스파일러나 폴리필과 같은 도구를 사용해야 한다. 코드의 용량이 커지거나 성능이 저하될 수 있는 문제를 불러일으킬 수 있다.

복잡성이 높다. ES6는 많은 새로운 기능과 문법을 도입했기 때문에, 기존의 자바스크립트와는 다른 스타일로 코드를 작성해야 할 수 있다. 예를 들어, 클래스나 모듈은 자바스크립트의 프로토타입 기반 상속과는 다른 방식으로 객체 지향 프로그래밍을 구현한다. 또한, 화살표 함수나 프로미스와 같은 기능은 this 바인딩이나 비동기 처리와 같은 중요한 개념을 이해해야만 올바르게 사용할 수 있다.
 
 

---

 

ES6와 ES5의 문법을 비교해 보면?

 
변수 선언: ES5에서는 var 키워드만 사용하여 변수를 선언할 수 있었다. var는 함수 스코프를 가지므로, 블록 내에서 선언된 변수도 블록 밖에서 접근할 수 있었다. 또한, var는 변수의 재선언이나 호이스팅을 허용하므로, 의도치 않은 결과나 오류를 발생시킬 수 있었다. ES6에서는 let과 const 키워드가 추가되었습니다. let과 const는 블록 스코프를 가지므로, 변수의 유효 범위를 제한할 수 있습니다. let은 재할당이 가능한 변수를 선언하고, const는 재할당이 불가능한 상수를 선언한다.

함수 선언: ES5에서는 function 키워드를 사용하여 함수를 선언하거나 표현식으로 할당할 수 있었다. function은 this 바인딩을 동적으로 결정하므로, 함수 내부에서 this가 가리키는 객체가 달라질 수 있었습니다. ES6에서는 화살표 함수가 추가되었다. 화살표 함수는 => 기호를 사용하여 함수를 간결하게 표현할 수 있다. 화살표 함수는 this 바인딩을 정적으로 결정하므로, 함수 내부에서 this가 가리키는 객체가 변하지 않는다.
 
문자열 생성: ES5에서는 문자열을 생성하거나 연결하기 위해 큰따옴표 ("")나 작은따옴표 (‘’)를 사용했다. 문자열 내에 변수나 표현식을 삽입하려면 문자열 연결 연산자 (+)를 사용하거나, 함수를 호출하여 값을 반환해야 했다. ES6에서는 템플릿 리터럴이 추가되었다. 템플릿 리터럴은 백틱 (`)으로 감싸고, 문자열 내에서 변수나 표현식을 ${}으로 삽입할 수 있다. 또한, 템플릿 리터럴은 줄 바꿈이나 공백을 그대로 유지하므로, 다중 줄 문자열을 만들기에도 유용하다.

객체 생성: ES5에서는 객체를 생성하기 위해 중괄호 ({ })를 사용하거나, 생성자 함수를 정의하고 new 키워드로 인스턴스를 생성할 수 있다. 객체의 속성이나 메서드를 정의할 때에는 콜론 (:)과 function 키워드를 사용해야 했다. ES6에서는 클래스가 추가되었다. 클래스는 객체의 틀을 정의하고, 생성자, 메서드, 속성 등을 포함할 수 있다. 또한, 클래스는 상속, 캡슐화, 다형성 등의 객체 지향적인 특징을 지원한다. 클래스는 class 키워드로 선언하고, new 키워드로 인스턴스를 생성할 수 있다.

배열 및 객체 비구조화: ES5에서는 배열이나 객체의 요소나 속성을 개별 변수로 추출하기 위해 인덱스나 점 (.) 또는 대괄호 ([ ]) 연산자를 사용해야 했습니다. 이는 코드가 길어지거나 가독성이 떨어질 수 있는 문제가 있다. ES6에서는 배열 및 객체 비구조화가 추가되었다. 배열 및 객체 비구조화는 배열이나 객체의 요소나 속성을 개별 변수로 추출하는 새로운 문법이다. 배열 비구조화는 대괄호 ([ ]) 안에 변수 이름을 나열하고, 객체 비구조화는 중괄호 ({ }) 안에 속성 이름을 나열합니다. 이렇게 하면 배열이나 객체의 값들을 간단하게 할당하거나 교환할 수 있다.
 

---

 

참고 URL : https://codingapple.com/unit/es6-3-arrow-function-why/
                  https://www.w3schools.com/js/js_es6.asp

 

---

프로그래밍 기초 1주차가 끝이났다.
팀원들과 같이 하는 일이 많은 주차였다.
다른사람들에 비해 내가 부족함이 많이 보여서
나 자신을 많이 질책했던 한 주 였던것 같다. 
다들 많이 도와주셔서 고마움 + 미안함이 동시에 공존했다!
배운것도 많았고, 앞으로 배울것도 많다.
멘탈 관리 잘 해야지 다음주도 잘 부탁해 나자신 !!!!!!