✨ Destructuring 문법

📍 Array 안에 있는 데이터 변수에 담기

var [a,b,c] = [2,3,4];

이렇게 비슷한 모양으로 변수 선언하면 변수 생성된다.

✍ 디폴트값 할당하기

var [a,b,c] = [2,3];

이렇게 갯수가 안 맞으면 c에는 undefined가 할당된다.

var [a,b,c = 5] = [2,3];

이렇게 디폴트를 할당해서 c에 5값을 할당해줄 수 있다.

📍 Object 안에 있는 데이터 변수에 담기

var { name : a, age : b } = { name : 'Kim', age : 30 };

이런식으로 a,b각각에 Kim, 30을 할당할 수 있다.

name:name 이렇게 쓰고 싶다면 아래와 같이 생략해서 작성할 수 있다. 앞에서 array에 디폴트 값을 할당해줬던 방식으로 디폴트 값을 할당할 수 있다.

var { name, age } = { name : 'Kim', age : 30 };

📍 변수를 object로 집어넣기

var name = 'Kim';
var age = 30;

var obj = { name : name, age : age }

위와 같이 변수를 object 자료형에 집어넣을 수 있다.
그러나, destructuring 문법을 사용해 아래와 같이 생략하여 작성할 수 있다.

var name = 'Kim';
var age = 30;

var obj = { name, age }

name:name 이런 방식으로 key 값과 value값이 동일하면 name 이렇게 생략할 수 있다.

📍 함수 파라미터 변수 만들기

function f(name, age){
  console.log(name);
  console.log(age);
}

var obj = { name : 'Kim', age : 20 }
f(obj.name, obj.age);

이런식으로 작성해도 되지만

function f( { name, age }){
  console.log(name);
  console.log(age);
}

var obj = { name : 'Kim', age : 20 };
f(obj);

이런식으로 obj을 통째로 넣어도 된다.
obj 파라미터를 넣을 때 {name, age} = { name : 'Kim', age : 20 } 이렇게 해준 거랑 똑같다
비슷한 예로 다음을 들 수 있다.

✍ array 파라미터 변수

function f( name, age ){
  console.log(name);
  console.log(age);
}

var array = [ 'Kim', 30 ];
f(array[0], array[1]);

이런식으로 작성되어있던 것을

function f( [name, age] ){
  console.log(name);
  console.log(age);
}

var array = [ 'Kim', 30 ];
f( ['Kim', 30] );

이렇게 바꿀 수 있다.
파라미터인 [name,age]를 만들때 ['Kim',30] 이걸 그대로 대입한 것

📍 응용

📋 변수 값

var [number, address] = [ 30, 'seoul' ];
var {address : a , number = 20 } = { address, number };

이런 코드가 있을 때 a, address, number라는 변수는 각각 무슨 값을 갖고 있을까?

var {address : a , number = 20 } = { address : 'seoul', number : 30 };

둘째줄은 이런 코드나 마찬가지기 때문에 a에는 'seoul', number에는 30, address에는 'seoul'을 갖게 된다.

📋 Object에서 데이터 뽑아 변수 만들기

let info = {
  body: {
    height: 190,
    weight: 70
  },
  size: ["상의 Large", "바지 30인치"],
};

이런 코드가 있을 때, 키, 몸무게, 상의사이즈, 하의사이즈 정보를 뽑아 4개의 변수를 만들고자 한다.

let info = {
  body: {
    height: 190,
    weight: 70
  },
  size: ["상의 Large", "바지 30인치"],
};

let {
  body: {
    height, 
    weight
  },
  size: [ top, pants ]
} = info;

위와 같은 방식으로 등호를 사용해 좌우를 똑같이 맞춰주면 height, weight, top, bottom이라는 이름의 변수가 생성된다.

✨ import,export

<script type="module">

</script>

html 파일 안에서 ES6 import 문법을 쓰려면 script 태그 안에 type을 module로 설정해줘야 함

📍 export default/import

var a = 10;
export default a;

<script type="module">
  import a from 'library.js';
  console.log(a);
</script>

js 파일에서 특정 변수를 다른 파일에서 이용할 수 있게 내보내고 싶으면

export default 변수명

이렇게 작성하면 됨
해당 변수를 쓰고 싶으면 다른 파일에서

import 변수(아무렇게나 작명) from 경로

하면 된다.

📍 여러 변수 export

var a = 10;
var b = 20;
export {a, b};

<script type="module">
  import {a,b} from 'library.js';
  console.log(a);
</script>

export {a, b} 이렇게 담아주거나 export var a = 10; 이런식으로 작성하면 된다.
export한 것들을 import할 때는

import {변수명1, 변수명2 ...} from '경로'

이렇게 가져온다.

✍ export default와의 차이

export default : 한번만 쓸 수 있음. 변수면 새롭게 작명 가능
export : {변수명1, 변수명2 .. } 이렇게 담아야 하고 import 할때도 정확한 변수명을 써줘야 함

📍 export, export default 동시 사용

library.js

var a = 10;
var b = 20;
var c = 30;
export {a, b};
export default c;

html

<script type="module">
  import c, {a,b} from 'library.js';
  console.log(c);
</script>

이런 방식으로 import 할 수 있다.

📍 변수명 새로 짓기

library.js

var a = 10;
var c = 30;
export {a};
export default c;

html

<script type="module">
  import c, {a as newa} from 'library.js';
  console.log(a);
</script>

import 작성시에 변수명 옆에 as를 써 새 변수명을 만들 수 있다.

📍 변수가 많을 때

한꺼번에 object에 담아 import할 수 있다.
library.js

var a = 10;
var b = 20;
var c = 30;
export {a,b};
export default c;

html

<script type="module">
  import c, * as collec from 'library.js';
  console.log(collec.a);
  console.log(c);
</script>

위와 같이 *를 사용해 export{}들을 전부 import할 수 있다. as로 꼭 별명을 지어줘야 함.

✨ 웹 브라우저란

서버에서 받아온 html, css, js를 실행시키는 프로그램
브라우저는 c++로 짜여져 있어서 js코드를 발견하면 c++언어로 만든 stack에 넣어 돌린다.

📍 처리가 오래 걸릴 때

서버로 ajax, 이벤트 리스너, setTimeout을 만나면 처리하기 까지 시간이 걸리기 때문에 stack에 쌓지 않고 보류했다가 완료될때 stack으로 보냄
앞의 코드들이 실행준비가 되면 queue에 집어넣고 queue에 있는 코드들은 stack으로 옮겨서 실행하는데. stack이 비어있을 때만 넣어서 실행한다.

따라서 stack이 바쁠경우 서버로 ajax, 이벤트 리스너, setTimeout 이런 코드들이 실행이 안된다.

예를 들어 반복문을 1억번 돌리는게 10초 걸린다고 한다면 10초 동안 서버로 ajax, 이벤트 리스너, setTimeout 이런 코드들을 실행하지 않는다.
→ stack이 10초 동안 비지 않기 때문이다.

✍ 해결 방법

🔎 setTimeout

for (let i = 0; i < 1e10; i++) {
  i++;
}

이런 코드가 있을 때, setTimeout()을 이용해 0초마다 큐로 보내 사이사이에 이벤트리스너 같은 코드를 실행하면 된다.(설정가능한 최소시간이 4ms이기때문에 0초로 설정해도 4ms으로 동작)

🔎 Web worker

다른 자바스크립트 파일 이용해 그 파일에서 연산시키고 그게 완료되면 값을 가져오게 명령할 수 있다.
main.js

var myWorker = new Worker('worker.js'); 

w.onmessage = function(e){
  console.log(e.data) //이러면 1 출력
};

worker.js

var i = 0;
postMessage(i + 1); //postMessage라는 특별한 함수가 있다

이렇게 worker.js에서 작업이 다됐을때 postMessage() 이렇게 실행하면 다른 파일로 완료된 결과값을 전달할 수 있다. → stack이 바빠지지 않음