ES6 ?
ECMA라는 국제 기구에서 만든 표준문서인 ECMAScript(=ES)의 6번째 개정판 문서에 있는 표준 스펙
한줄로 설명하자면, 위와 같이 설명할 수 있다.
여기서 ECMA는 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구이고,
ECMAScript는 ECMA 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어 이다.
ECMA-262는 표준의 이름이고, ECMAScript는 ECMA-262에서 정의된 하나의 사양을 의미하며 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공한다.
그리고 JavaScript는 ECMAScript 사양을 준수하는 범용 스크립팅 언어이다.
찾아보니 둘의 관계가 좀 모호하고 .. 표준, 사양, 언어 이러한 용어들이 혼용돼서 엄청 헷갈린다. 그렇구나 싶다가도 다른 글 읽으면 내가 이해한게 아닌가? 싶고 아무튼 아직도 확실하게는 모르겠..다..
일단은
ECMAScript = 스크립트 언어가 지켜야할 사양
JavaScript = ECMAScript를 준수하고 있는 언어
이렇게 이해했다.
(그런데 또 ECMAScript는 JavaScript의 표준화를 위해 만들어졌다고 한다. 그러니까 JavaScript의 표준화를 위해 ECMAScript를 만들었는데, 그렇게 되니 당연히 JavaScript는 ECMAScript를 준수하고 있었고 .. 뭐 그래서 헷갈리게 되는 것 같다.)
아무튼 이 ECMAScript는 필요에 따라 개정을 하게 되는데, ES6가 그 개정판 중 하나인 것이다. 그러면서 새로 추가된 문법들이 있는데 ... 그게 이제부터 정리해 볼 내용이고, 지금은 모듈 가져오기/ 내보내기 문법을 정리해보려고 한다
JavaScript Module
ES6 모듈
모듈 : 애플리케이션을 구성하는 개별적 요소로 재사용한 코드 조각을 의미한다.
일반적으로 파일 단위로 분리하며 필요에 따라 명시적으로 모듈을 로드하여 사용한다.
모듈은 기능별로 분리되어 작성되므로 코드의 단위를 명확히 분리하여 애플리케이션을 구성할 수 있으며 재사용성이 좋아서 개발 효율성과 유지보수성을 높일 수 있다.
자바스크립트는 모듈 기능이 존재하지 않아 AMD, CommonJS, UMD 방식의 모듈 시스템을 사용하였지만 ES6에서 모듈에 대한 표준을 도입했다.
ES6 모듈 기능을 사용하지 않으면 분리된 자바스크립트 파일이 하나의 전역을 공유하게된다.
// foo.js
var x = 'foo';// bar.js
var x = 'bar';<!DOCTYPE html>
<html>
<body>
<script src="foo.js"></script>
<script src="bar.js"></script>
</body>
</html>이러한 자바스크립트 파일이 있을 때 HTML에서 2개의 자바스크립트 파일을 로드하면 로드된 자바스크립트는 하나의 전역을 공유한다. 따라서 foo.js에서 선언한 변수 x와 bar.js에서 선언한 변수 x는 중복 선언되며 의도치 않게 변수 x의 값이 덮어씌여진다.
ES6 모듈은 파일 자체의 스코프를 제공한다. 즉 독자적인 모듈 스코프를 갖는다. 모듈 내에서 var 키워드로 선언한 변수는 더 이상 전역변수가 아니며 window객체의 프로퍼티도 아니다. 따라서 모듈 내에서 선언한 변수는 모듈 외부에서 참조할 수 없다.
// foo.mjs
var x = 'foo';
console.log(x); // foo
// 변수 x는 전역 변수가 아니며 window 객체의 프로퍼티도 아니다.
console.log(window.x); // undefined// bar.mjs
// 변수 x는 foo.mjs에서 선언한 변수 x와 스코프가 다른 변수이다.
var x = 'bar';
console.log(x); // bar
// 변수 x는 전역 변수가 아니며 window 객체의 프로퍼티도 아니다.
console.log(window.x); // undefined
<!DOCTYPE html>
<html>
<body>
<script type="module" src="foo.mjs"></script>
<script type="module" src="bar.mjs"></script>
</body>
</html>export 키워드
모듈은 독자적인 모듈 스코프를 가지기 때문에 모듈 안에서 선언한 모든 식별자는 기본적으로 해당 모듈 내에서만 참조할 수 있다.
만약 모듈 안에 선언한 식별자를 외부에 공개하여 다른 모듈들이 참조할 수 있게 하려면 export 키워드를 사용하며 선언된 변수, 함수, 클래스 모두 export할 수 있다.
사용법
선언문 앞에 export키워드를 사용하거나 export 대상을 하나의 객체로 구성하여 한 번에 export 한다.
// lib.mjs
// 변수의 공개
export const pi = Math.PI;
// 함수의 공개
export function square(x) {
return x*x;
}
// 클래스의 공개
export class Person {
constroctor(name) {
this.name = name;
}
}
// 변수, 함수, 클래스를 하나의 객체로 구성하여 공개
export { pi, sqaure, Person };import 키워드
모듈에서 공개(export)한 대상을 로드할 때 사용한다.
모듈이 export한 식별자로 import하며 ES6 모듈의 파일 확장자를 생략할 수 없다.
// app.mjs
// 같은 폴더 내의 lib.mjs 모듈을 로드한다.
import { pi, square, Person } from './lib.mjs';
console.log(pi);
// 모듈이 export한 식별자를 각각 지정하지 않고 하나의 이름으로 한꺼번에 import
// 이 때 import 되는 식별자는 as 뒤에 지정한 이름의 객체 프로퍼티로 할당된다.
import * as lib from './lib.mjs';
console.log(lib.pi);
// 이름을 변경하여 import 할 수 도 있다.
import { pi as PI, square as sq, Person as P } from './lib.mjs';
console.log(lib.pi); default 키워드
모듈에서 하나만을 export할 때 사용 가능하다. 단 default를 사용하는 경우 var, let, const는 사용할 수 없다.
export default square // O
export default const foo = () => {}; // SyntaxError: Unexpected token 'const'default 키워드와 함께 export한 모듈은 {} 없이 임의의 이름으로 import 한다.
import square from './lib.mjs';
console.log(sqaure(3));Reference
https://wormwlrm.github.io/2018/10/03/What-is-the-difference-between-javascript-and-ecmascript.html
https://frogand.tistory.com/104
