항해 99 WIL2

심채운·2022년 7월 24일
0

JavaScript

목록 보기
13/14

JavaScript의 ES란?

ES란 ECMAScript의 약자이고, ES는 자바스크립트 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법을 규정하는 것이다. 각 브라우저 제조사는 ECMAScript사양을 준수해서 브라우저에 내장되는 자바스크립트 엔진을 구현한다.

ES5/ES6 문법 차이

JS는 프로그래밍 언어라고 하기엔 부족한 부분들이 많다고 말이 많았지만 ES6이후부터 인정받기 시작했고, 전성기를 누린다 라고 많은 개발자들이 말한다.
ES5는 2009년에 출시 된 것이고, ES6는 2015년에 출시 된 것이다. 말 그대로 버전이 업그레이드 하는걸로 생각하면 편하다. 그치만 왜 우리는 ES5와 ES6의 차이를 알아야 하는 것인가? 이유는 js의 전성기는 ES6와 ES5로 나뉘기 때문이고, 또 하나는 레거시 코드(누군가 남기고 간 기존코드)를 최신 문법으로 리팩토링 해야하고, 코드의 동작을 해석해 유지보수 가능여부가 중요하기 때문이다.

ES6부터 도입된 기능

  • let, const 키워드 추가
    - 기존은 var(함수레벨 스코프) 키워드만 사용해 재할당이 가능하게 했다. 단점을 보완하기 위해 블록 레벨 스코프를 가지며 재할당이 가능한 let, 상수인 const를 추가했다.
  • 화살표 함수
    - 화살표 함수가 추가되 함수를 간결하게 나타낼 수 있다. 가독성 및 유지 보수성이 올라갔다. 화살표 함수의 도입에 따라 기존 함수와 this의 바인딩이 달라 따로 공부가 필요하다.
  • Default parameter 추가
    - 기존에 함수의 매개변수에 초기값을 작성하려면 함수 내부에서 로직이 필요했지만 ES6에는 추가 됨.
//es 5
var bmi = function(height,weight){
	var height = height|| 184;
	var wight = weight || 84;
  	return weight/(height * height/10000);
}
//es 6
const bmi = function(height = 184, weight = 84){
  return weight / (height * height/10000);
}
  • 보간법 ( Template literal)추가
    - ``(백틱)와 $를 사용해 문자열 관리가 편해짐
`${name}님의 나이는 ${age}입니다.`
  • Multi-line string
    - 문자열이 라인을 넘어가게 되면 관리가 불편해 \n 줄 바꿈과 덧셈 연산자를 사용해야 했는데 ES6 부터 백틱(``)을 사용하게 되면서 여러 라인의 문자열 따로 관리하지 않고 그냥 Enter를 눌러서 사용해도 된다.

  • Class
    - 자바스크립트는 프로토타입 기반의 프로그래밍 언어인데 다른 객체지향 프로그래밍의 영향을 받아 class라는 개념으로 객체를 생성하는 방법이다. js에서 class는 객체를 생성하는 함수이다 라고 생각하면 이해하기 편하다.

  • 모듈
    - 모듈은 재사용하기 위한 코드 조각을 의미하고, 세부사항은 캡슐화시키고, API부분만 외부에 노출시킨 코드들이다. 모듈은 모듈 스코프를 가지며, export, import 키워드로 사용한다.

  • 구조분해할당
    - 비구조화 라고도 하며 객체, 배열에서 원하는 값만 추출해 낼 수 있도록 구조를 분해하는 것이다. (전개연산자 즉 spread문법도 추가되면서) 가독성과 성능이 더 높은 코드 구현이 가능해졌다.

profile
불가능, 그것은 사실이 아니라 하나의 의견일 뿐이다. - 무하마드 알리

0개의 댓글