[JavaScript] Destructuring 문법, 파일간 모듈, 웹브라우저 동작원리

Array 안에 있는 데이터를 변수에 담는 방법

var array = [2,3,4];
var a = array[0]; 
var b = array[1];


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


//디폴트값도 가능
var [a,b,c = 5] = [2,3];

Object 안에 있는 데이터를 변수에 담는 방법

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

변수를 object로 집어넣고 싶은 경우

key값과 value값이 동일하면 하나로 생략이 가능

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

var obj = { name, age } //name='kim'

 import할 때 변수들이 너무 많으면 * 기호 사용 (as로 이름을 꼭 지어주어야함)

(library.js)

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

------------------------
(index.html)

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

웹 브라우저 동작원리

자바스크립트는 동기적으로 처리(한번에 한줄씩 순서대로)

-setTimeout,이벤트리스너,ajax를 쓰면 비동기처리가 됨

비동기처리를 위한 콜백함수 패턴(Promise)

const a = 구멍 => {
  console.log(1);
  구멍();
};

const b = () => {
  console.log(2);
};
a(b);


//콜백대신 쓸 수 있는 Promise 

첫째함수().then(function(){
   그 담에 실행할거
}).then(function(){
   그 담에 실행할거
});