JAVASCRIPT - 중급 9편

* Destructuring

1. Array 안에 있는 데이터를 변수에 담기

var [a,b,c] = [2,3,4]; // 같은 자리에 맞춰서 a=2, b=3, c=4를 가진 변수가 된다
var [a,b=10,c] = [2,,4]; // default 파라미터가 주어질 때 공백을 사용하면 제외한 나머지 변수에 담긴다

2. Object 안에 있는 데이터를 변수에 담기

var { name, age } = { name : 'kim', age : 30 } // 변수와 Object에 자리가 아닌 key값이 일치할 때 변수에 담긴다

3. 변수를 Object에 담기

var name = 'kim';
var age = 30;
//var person = { name : name , age : age }; 밑에 코드와 동일 ( key와 value 가 동일할때 생략 가능 )
var person = { name , age };

4. 함수 파라미터 변수

function 함수( { name, age }){
  console.log(name);
  console.log(age);
}
var obj = { name : 'Kim', age : 20 };
함수(obj);
----파라미터 다른 방법----
function 함수( [name, age] ){
  console.log(name);
  console.log(age);
}
var array = [ 'Kim', 30 ];
함수( ['Kim', 30] );

---

예시

// 내가 푼방식
let personInfo = {
  body: {
    height: 190,
    weight: 70
  },
  size: ["상의 Large", "바지 30인치"],
};
var { height, weight, upperSize, underSize } =
    { height : personInfo.body.height,
     weight : personInfo.body.weight,
     upperSize : personInfo.size[0],
     underSize : personInfo.size[1]
    }
--------------
// 더 좋은 방식
let personInfo = {
  body: {
    height: 190,
    weight: 70
  },
  size: ["상의 Large", "바지 30인치"],
};
let {
  body: {
    height,
    weight
  },
  size: [upperSize, underSize]
} = personInfo;

* Import & Export

export default 변수명 : JS파일에서 특정 변수를 다른 파일에 보냄

다른 파일에서 import 변수명(JS파일에 변수명과 같지 않아도 가능) from '경로'

// (library.js)
var a = 10;
var b = 20;
var c = 30;
export { a, b };
export c;
------------------------
// (index.html)
<script type="module">
  import c, { a, b } from 'library.js'; // !!! export default된 변수를 먼저 써야 오류 방지
  console.log(a);
  console.log(b);
  console.log(c);
</script>

export와 export default의 차이점

1. export default 는 한번만 사용 가능 import 시 새롭게 작명 가능

2. export는 {}에 담기, 정확한 변수명 사용

---

변수명 수정: 받아온 변수명 as 바꿀 변수명

  import c, { a as d } from 'library.js'; // !!! export default된 변수를 먼저 써야 오류 방지
  console.log(a); // 오류
  console.log(b);
  console.log(c);
  console.log(d); // js파일에 a를 가져옴

---

변수명 한번에 가져오기 : * as 변수모은이름

  import c, * as from 'library.js'; // !!! export default된 변수를 먼저 써야 오류 방지
  console.log(a);
  console.log(b);
  console.log(c);

---

번외. node.js or 과거 js 에서 import & export

(export 하는 js파일)
module.exports.a = 10 ;
------------------------
(import 하는 js파일)
var a = require('/library.js');

---

주의점!

IE는 import/export에 호환성이 없다!

<script src="경로"></script> // 이렇게 쓰는걸 추천 

모던 브라우저에서 사용방법 : React, Vue, Node.js에서 많이 사용

<script type="module" src="경로"></script>