바닐라JS

JavaScript에서 모듈화란 (ES6)

husker1114 2023. 6. 16. 21:24

javaScript를 공부하다가 최근 많이 사용하고있는 module방식으로 공부를하다가 module 방식으로 바뀌게된 시점과 과정같은게 궁금해서 정리해보려고한다.

 

일단 모듈화가 시작된 계기는 javaScript 표준규격인 ES6(ECMAScript6 의 약어)가 2015년에 출시되면서 바뀐 변화를 살펴보겠다.

 - 변수 선언 (let , const)

가변 변수인 let과 상수 변수인 const가 나왔다. var로 변수를 혼용해서 사용해 불편함을 느끼던 사람들은 ES6가 출시되면서 해소되었을 것 같다.

 - 구조 분해 할당

 (변수의 참조와 복사 정리 추후에..)

 - 함수 표현식 (화살표 함수)

 const a()=>{} 이런식으로 함수를 선언할수있게 되었다. 숙련된 사람들에게 빠르게 코드를 구현할수있게 바뀐거같다.

 함수 표현식은 호이스팅이 되지않아 선언이 되지않는다면 호출을 할 수 없다.

 반면 일반 함수 선언은 선언이 되지않아도 호이스팅이 되어 호출이 될수있다.

-객체 리터럴

  • ${} 중괄호 앞에 달러 표시를 통해 자바스크립트 표현식 사용이 가능하다.

// ES5

var str3 = 'Hello' + str1 + str2;
// ES6
 
let str3 = `Hello ${str1} ${str2}`;

-모듈화

 equire대신 import, module.exports. 여러 복잡한 이슈로 node에선 현재까지 미지원.

- Class

 기본적으로 function 키워드와 동일하나 명시적으로 객체를 나타낼 수 있게. extends가 존재한다. getter, setter.

 

ES표준언어는 매년 버전이 한개씩 나오고있다는걸 알게되었고 ES6에서 많은 기능이 추가되었고 보완,기능추가가 되고있었다.

참고 :https://62che.com/blog/web/ecmascript-and-node-version.html#es2015-es6