JS | ES6 문법 - 모듈

 

/*
* 모듈 익스포트, 임포트
- 모듈은 js ES6의 미리작성해 놓은 스크립트 파일입니다.
- 변수 , 함수 ,클래스 등이 정의 되어있습니다.

- 모듈을 내보내는 방식
- 여러 값을 내보낼 때 named export 방식
- 단일 값을 내보낼 때 default export방식
*/

export const name = "이순신";
export const age = 20;

export const info = () => {
    console.log('이름 '+ name + ', 나이 '+ age);
}

let addr = "서울시";
let myInfo = () => {
    console.log(addr); 
}
export {addr, myInfo};

<script type = "module">
        //예제에서 module을 사용하려면 type을 반드시 적어야합니다
        
        //import1 - destructuring 방식
        import {name, age, info, addr, myInfo} from './index01.js';

        console.log(name); //이순신
        console.log(age); //20
        info();  //이름 이순신, 나이 20
        console.log(addr); //서울시
        myInfo(); //서울시

        console.log("---------------");
        //import2 - 엘리어스 방식
        import * as test from './index01.js';

        console.log(test.name); //이순신
        console.log(test.age); //20
        test.info(); //이름 이순신, 나이 20
        console.log(test.addr);//서울시
        test.myInfo(); //서울시

        console.log("----------------");
        //import3 - 이름붙여 가져오기
        import {name as n, age as a} from './index01.js';
        
        console.log(n); //이순신
        console.log(a); //20

        



    </script>

---

class Person {
    
    constructor(name, age){
        this.name = name; //멤버변수
        this.age = age; //멤버변수
    }

    getInfo = () => {
        return `이름${this.name} , 나이 ${this.age}`;
    }

}

//default구문은 반드시 1개여야 합니다
export default Person;

<script type = "module">
        
        import Person from './index02.js';

        const p = new Person("hong", 20);
        console.log(p.getInfo());

        

    </script>