Lee Jun Hyeok

안녕하세요~😸

1 분 소요

JS의 문법총정리(하)🍍

🏳️ JS의 문법총정리(상)에 이어 계속해서 알아보자.


그전에 웹 브라우저의 동작원리를 알아보자

index.html


console.log(1);

setTimeout( ()=>{console.log(3)}, 1000) // 1초뒤에 3을 출력해줘

console.log(2);

일반적으로 위에서 밑으로 차례대로 코드를 실행시키기때문에 1 출력 (1초뒤)3 출력 2 출력 순으로 될것이라고 생각지만 실제로는 1 출력 2출력 3출력을 해준다.

JS의 동작순서

JS는 Stack이란 곳에서 코드를 위에서부터 차례로 실행시키고 Heap이란 곳에서 코드의 변수값을 받아서 처리한다. JS는 Stack이 한개로 single threaded라고하며 동기식 처리를한다. 하지만 Ajax요청, addEventListener, setTimeout등과 같은 코드는 사용자지정시간만큼 web API에서 대기 후 Queue로 옮겨지고 그 후 Stack으로 옮겨지며 실행된다. 결론 : JS는 일반적으론 동기식처리를하나 예외적으로 비동기식처리도 한다.


index.html


      let a = new Promise((성공, 실패) => {

        if (1 + 1 === 2) {

          성공();

        } else 실패();

      });

      a.then(() => {

        console.log("성공");

      }).catch(() => {

        console.log("실패");

      });

‘Promise 사용법’

생성자로 만들며 성공, 실패를 판별해준다. 성공시에 출력할것은 then, 실패시에 출력할것은 catch에 쓴다.


index.html


      async function click() {

        let a = new Promise((성공, 실패) => {

          document.getElementById("button").addEventListener("click", () => {

            성공("성공");

          });

        });

        let result = await a;

        console.log(result);

      }

      click().then(() => {

        console.log("잘했어");

      });

‘async, await 사용법’

평범한 함수에 asysc를 붙이면 곧바로 함수.then()이 가능하다. 위의 코드 해석 = 버튼을 클릭하면 성공을 출력하고 그다음 잘했어를 출력하시오.


index.html


let person = new Map();
person.set('age', 20);

console.log(person) // Map(1) {'age' => 20}

person.get('age'); //자료 꺼내는 법
person.delete('age'); //자료 삭제하는 법
person.size; //자료 몇갠지 알려줌


for (let key of person.keys() ){
  console.log(key)
}

//자료를 직접 집어넣고 싶으면

let person = new Map([
  ['age', 20],
  ['name', 'Kim']
]);

‘map 사용법’

map은 자료들 간의 연관성을 표현하기 위해 쓰는 자료형이다.


index.html


let 숫자 = [1,2,3,4,1,2,3,4]

var 중복제거 = new Set(숫자); // {1,2,3,4}

중복제거.add(5); //자료더하기 {1,2,3,4,5}
중복제거.has(3); //자료있는지 확인 true
중복제거.size;  //자료 몇갠지 세기 5

숫자 = [...중복제거]  // 숫자 === [1,2,3,4,5]

‘set 사용법’

중복을 제거할때 사용하고 {}로 반환한다.

업데이트: