2024.01.15 TIL #forEach(index) #함수의 매개변수 #splice #new Promise / Promise.resolve

Today I learned

1. forEach문의 매개변수 ((element, index) ==> { })

- index를 전달한다. 생략된다면 자동으로 전달된다.

 

2. 함수의 매개변수

- 함수의 매개변수로 뭘 해야할지 항상 헷갈렸었는데

- 함수가 동작하는 동안 필요한 데이터(또는 변수)를 외부에서 받아와야 할 때 그걸 매개변수로 하면 된다.

 

3. splice(a, b, c)

- splice는 배열의 요소 중에 원하는 부분만 제거 후 추가(선택적으로)하는 메서드인데

- 매개변수로 다음 요소들을 갖는다.
  a : 시작순서

  b : 제거하고 싶은 갯수

  c : 제거 후 추가할 요소

 

4. 프로젝트 중,  댓글을 삭제한 후에 삭제된 것이 바로 반영되어 댓글창에서 없어지길 바랬지만, 페이지를 새로고침 해야만 댓글창에 삭제된 게 반영되었다.

1) 삭제가 된 다음에

2) 댓글창에 보여지길 원했다.

 

삭제가 된 다음 = 삭제된 게 업데이트 된 후 =  localstorage에 업데이트 된 내용이 저장된 후 

 

- 따라서 localstorage.setItem이 다 된 후에 댓글창에 반영되었으면 해서 localstorage.setItem 앞에 await를 쓸 수 없을까? 생각했다.

- 하지만 await 뒤에는 promise를 반환하는 비동기함수 또는 async 함수 내부에서 반환하는 promise만 올 수 있었다.

- 그래서 localstorage.setItem을 promise를 반환하는 비동기함수로 만들기로 했다.

 

promise 만드는 방법

 

1. Promise.resolve( )

   const resolvedPromise = Promise.resolve('Resolved Promise') // Promise가 전달할 data

  // 이미 fulfilled 된 Promise를 생성

  resolvedPromise.then((data) => {  

  console.log(data)  

  }) // Resolved Promise

 

여기서 Promise.resolve( )의 매개변수는

(1) 직접적인 데이터 => Promise.resolve('hello')

(2)  다른 비동기함수가 반환한 "promise"

예를 들면

const asyncfunction = () =>

  new Promise((resolve) => {

    setTimeout(() => {

      resolve("프로미스 성공!");

    }, 1000);

  });

const resolvedPromise = Promise.resolve(asyncfunction);  // 매개변수로 resolve 상태의 asyncFunction이라는 promise

 

2. new Promise( )

  const myPromise = new Promise((resolve, reject) => {

  setTimeout(() => {

    const condition = true

    if(condition) {

      resolve('프로미스 성공!')

    } else {

      reject('프로미스 실패!')

    }

  }, 1000)  // setTimeout으로 비동기작업 수행 후 resolve or reject의 promise 상태 변경

  })

  myPromise.then ((data) => console.log(data))   // 프로미스 성공!

          .catch((data) => console.log(data))  // 프로미스 실패!