2023.03.30 try catch, promise,정규식

이무헌·2023년 7월 19일
0

html,css,js

목록 보기
18/21
post-thumbnail

1.try,catch

//예외 처리문

//try-catch문 코드 실행중 예외상황이 발생해도 프로그램이 종료가 되지않고
// 프로그램을 유지할 수 있다.

// try-catch
// 프로그램의 안정성을 높일 수 있다.
try {
  // 오류가 발생할것 같은 코드
} catch (error) {
  // 오류가 발생했을 때
  //오류의 메세지
}
try {
  if (5 === 5) throw "Err";
  // throw 에러 메세지를 던질 수 있다.
} catch (error) {
  console.log(error);
}
  • try-catch문은 기본적으로 오류를 잡는 역할을 한다. 오류가 나도 기능이 멈추지 않고 계속 유지되며 catch로 err를 return한다.
function myStr(params) {
  let devValue = document.querySelector(".dev").value;
  try {
    if (devValue == "") {
      throw "비었음";
    }
    devValue = parseInt(devValue);
    // Number()숫자로 타입 변경 함수
    console.log(typeof devValue);
    console.log(isNaN(devValue));
    //타입은 number지만 문자열은 숫자로 바꿀 수 없어 NaN이 됨, 즉 true
    if (isNaN(devValue)) throw "숫자가 아님";
    // 문자열이 들어가면 문자가 숫자로 변환될 수 없어서
    //number가 아니다.

    //오류가 발생해도 프로그램이 종료가 안된다.
  } catch (error) {
    // 코드를 실행하다 err발생
    // catch문 실행하고 오류의 내용은
    // err매개변수에 들어온다.
    console.log(typeof devValue);
    console.log(devValue);
    document.querySelector(".message").innerHTML = error;
  }
}
  • isNaN() 함수는 문자열,숫자를 판별한다.
  • 근데 우린 문자열에 parseInt를 주었는데도 isNaN은 true를 뱉었다.
  • 사실 type은 number로 바뀌었지만 값은 NaN으로 number가 아니다…. 즉 문자열 취급을 받는다….

2.재귀

// 재귀 함수
// 함수가 함수 자신을 호출하는 함수

// 쓸 일은 그렇게 많지 않은데
// 알고리즘 문제 풀 때 가끔 사용
// function add(params) {
//     add()
// }

// 임시로 데이터베이스에 추가할 때 라던지 사용

function add(n) {
  // 얼마나 반복 실행 시킬건지
  if (n < 5) {
    n += 1;
    add(n);
    console.log(n);
  }
}

add(0);

// 함수의 실행 컨텍스트
// add->add2->add3->add4
//add4->실행이 끝나고->add3->실행이 끝나고->......

// 함수가 호출되면 실행 컨텍스트가 생성되고
// 함수의 안에서 함수를 호출하면서 실행 컨텍스트가 쌓이고
// 뒤에서부턴 실행하고 실행 컨텍스트 제거

// 실행 컨텍스트 중요!

// 피보나치 수열 수학적인 성질
// 황금비 연속된 구 항의 비율
// 0 1 1 2 3 5 8
// 재귀 함수를 사용해서 피보나치 수열을 만들었다.
function fibonacci(n) {
  if (n < 2) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

for (let i = 0; i < 30; i++) {
  console.log(fibonacci(i));
}
  • 재귀함수이다.

3.promise,async,await 동기,비동기

//promise 객체
// 비동기 처리를 가능하게 해주는 객체

//node.js 사용을 많이 할건데

function testPromise(num) {
  // new 키워드로 빈 객체를 만들고
  // promise객체를 생성
  // 전달하는 함수값에 resolve,reject 두가지 매개변수를 받는데
  // resolve() 함수이고 처리가 완료되면 반환
  // reject() 함수이고 처리가 오류나면 반환
  return new Promise(function (resolve, reject) {
    try {
      if (num > 10) reject({ date: "숫자큼" });
      console.log(num);
      // 데이터를 받아온다 가정을 하자.
      // 데이터를 가져오는 시간이 좀 걸리는데
      // 데이터를 다 가져오고 작업을 진행시켜야 할 때.
      setTimeout(() => {
        resolve(num );
      }, num * 1000);
    } catch (error) {
      reject(error);
    }
  });
}

// testPromise(8)
//   .then((data) => {
//     //데이터를 가져오고 처리할 구문을 여기에 작성하면 된다.
//     // 데이터를 가지고 처리해야할 작업
//     console.log(data);
//     return testPromise(data);
//     //   resolve 실행하면 then
//     // reject를 실행하면 catch
//   })
//   .catch(function (err) {
//     console.log(err);
//   });

//   then,catch싫으면
// 같이써도 작업은 되지만안 좋은 버릇이니까 같이 사용하지 말자!
// async,await 구문

async function asyncFun(params) {
  try {
    // await 뒤에 promise 객체
    let temp = await testPromise(5);
    // 기다리고 promise객체나 res나 rej이 처리될 때 까지 

    console.log(1);
    temp=await testPromise(temp);
    console.log(temp)
    // await+promise=promise를 기다리고 resolve 값을 반환한다.
    // async,await 는 짝이다.
    // 같이 붙어다닌다.
  } catch (err) {}
}

asyncFun()
  • js의 꽃 동기/비동기이다.
  • Promise는 비동기적인 작업을 처리하기 위한 객체다.
    성공하면 resolve()함수가 실행되고, 실패하면 reject()함수가 실행된다.
    resolve()함수의 인자로 성공한 결과값이, reject()함수의 인자로 실패한 이유가 전달된다.
    Promise 객체는 then()과 catch() 메서드를 가지고 있다.
    then() 메서드는 resolve()함수가 실행되었을 때 호출되는 콜백 함수를 전달받고,
    catch() 메서드는 reject()함수가 실행되었을 때 호출되는 콜백 함수를 전달받는다.
    이렇게 Promise를 사용하면 비동기적인 코드를 동기적으로 실행할 수 있게 된다.
    async와 await 키워드를 사용하면 Promise 기반의 코드를 더욱 간결하게 작성할 수 있다.
    await 키워드는 Promise가 resolve되기를 기다리는 키워드다.
  • 가장 중요한건 비동기적으로 실행되어야 할 함수가 동기적으로 실행된다는것, 즉 내가 원하는대로 순서를 조정할 수 있다는 것이다!
😢 좀 더 좀 더 많은 async 공부가 필요하다 ….더 공부하자
profile
개발당시에 직면한 이슈를 정리하는 곳

0개의 댓글