[12.08] TIL

함수 오버라이딩

같은 이름의 함수가 다시 쓰여지는 것..

function 안녕(x,y){
return x + y 
}

function 안녕(x,y,z){
return x+y+z 
}
 
안녕(1,2) //NaN
안녕(1,2,3) // 6

//첫번째 함수는 제대로 작동하지 않는다 

구조분해할당

Javascript Info를 참고함

let arr = ["Jiyun", "Park"]

// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당함. 
let [firstName, surname] = arr;

alert(firstName); //Jiyun
alert(surname);  //Park 

//배열에서 아래와 같이 사용 가능 
let a = [[1,2], [3,4], [5,6]]; 
for (let [i,j] of a) {
console.log(i,j); 
}

// 1 2 / 3 4 / 5 6 출력 

에러 핸들링 try와 catch

try {
  alert( 'try 블록 시작' );
  if (confirm('에러를 만드시겠습니까?')) 이상한_코드();
} catch (e) {
  alert( 'catch' );
} finally {
  alert( 'finally' );
}

콜백 (매우 중요)

콜백은 나중에 실행할 함수이다.
함수의 전달 인자값으로 함수가 들어가 있다면 콜백함수!

//2를 찍어주는 함수를 setTimeout에 인자값으로 전달 -> 콜백 함수 (이따가와!) 
//'3'이 먼저 출력되고 1초 '2'가 다음으로 출력 됨 

setTimeout(function(){
console.log('2'); 
}, 1000); 
console.log('3'); 
//화살표 함수로도 간단히 가능 
setTimeout(()=> console.log('2'), 1000); 
console.log('3');

콜백지옥은...? 함수를 네스팅하며 콜백콜백콜백...하는 것..!
이에 대한 해결 방안은? 프라미스!

프라미스 Promise

동기란? 순차적인 실행 (세탁기 돌리는 동안 아무것도 안하는 것)
비동기란? 순서대로가 아님. 서버와의 응답시간이 동기적으로 일어날 경우... 필요. (세탁기 돌리는 동안 다른거 하는 것)

//모던자바스크립트, 제코베 예제 
let promise = new Promise(function(resolve, reject) {
  // 프라미스가 만들어지면 executor 함수는 자동으로 실행됩니다.

  // 1초 뒤에 일이 성공적으로 끝났다는 신호가 전달되면서 result는 'done'이 됩니다.
  setTimeout(() => resolve("이제야 끝남!"), 10000);
});
console.log('hello world'); // 세탁기 돌리는 동안 실행 
console.log(promise); 

그렇다면 다음의 코드는?

// 모던자바스크립트,제코베 예제 
new Promise(function(resolve, reject) {

  setTimeout(() => reject('error'), 1000);

}).then(function(result) {

  alert(result + ' : 잘 수행!');
  return result + 'one';

}).catch(function(result) {

  alert(result + ' : 애러 발생!'); // 1
  return result + 'two';

}).then(function(result) {

  alert(result + ' : 잘 수행!'); // 2
  return result + 'three';

});

then 은 reject를 1초 후 실행한 후 리턴 값에 저장하여 실행.
catch 는 에러를 핸들링한다. catch는 여러개의 .then의 뒤에 온다..!

// 제코베 예제 참고 
// 정리 전 (콜백 헬..) 

loadScript('1.js', function(error, script) {

    if (error) {
      handleError(error);
    } else {
      // ...
      loadScript('2.js', function(error, script) {
        if (error) {
          handleError(error);
        } else {
          // ...
          loadScript('3.js', function(error, script) {
            if (error) {
              handleError(error);
            } else {
              // 모든 스크립트가 로딩된 후, 실행 흐름이 이어진다.  
            }
          });
  
        }
      })
    }
  });

  // 정리 후
loadScript("/article/promise-chaining/one.js")
  .then(script => loadScript("/article/promise-chaining/two.js"))
  .then(script => loadScript("/article/promise-chaining/three.js"))
  .then(script => {
    // 스크립트를 정상적으로 불러왔기 때문에 스크립트 내의 함수를 호출할 수 있다 
    one();
    two();
    three();
  });

실전에서의 Promise는 어떻게 사용될까?

아래

//제코베 예제 참고
fetch('https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json')
    .then(function(response) {
        console.log(1);
        return response.json();
    })
    .then(function(json) {
        console.log(2);
        console.log(json);
        return json
    })
    .then(function(json) {
        console.log(3);
        console.log(json.filter(s => s['시·도별(1)'] === '전국'));
        return
    })

async와 await

async를 함수 앞에 붙이면 프라미스 처럼 사용할 수 있다.

async function f() {
  return 100; 
}
f().then(function(result) {
  alert(result); // 100 alert 
  return result*2; 
}) //200을 반환 

await은 async함수 안에서만 작동하는데 프라미스가 다 실행될때까지 기다려주는 착한 녀석이다. await은 .then보다 가독성이 좋기도 하다!

async function apple() {

  let banana = new Promise((resolve, reject) => {
    setTimeout(() => resolve("바나나!"), 1000)
  });

  let result = await banana; // 프라미스 실행을 기다림

  alert(result); // "바나나!"
}

apple();

오늘은 여기까지 긴 하루였다 :')