Javascript 이론 공부 - 6

1) Short-circuit evaluation (단축 평가)

-  논리 연산(&&, ||)의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환하는 것

    >> 즉, 표현식을 평가하는 도중에 평가 결과가 확정된 경우 평가 과정을 생략하는 것을 말함

-  "&&" 활용 예시

    - 조건이 "true"일때, 무언가를 해야할 경우 사용함

    - null 또는 undefined인 경우를 확인할 때 사용함

-  "||" 활용 예시

    - 조건이 "false"일때, 무언가를 해야할 경우 사용함

    - 기본 값을 사용할 경우 사용함

     Q. default parameter 같은 걸 이용하면 안되나?

     A. default parameter는 전달하지 않거나, undefined 인 경우에만 설정이 되므로, null, 0 일 경우 입력한 그대로 전달됨.

const obj1 = { name: 'bob' };
const obj2 = { name: 'john', age: 12 };

// if문 밖에서 쓰면 단축해서 평가함
// && 연산자는 하나가 true 일 경우 마지막 값이 리턴이 됨
let result = obj1 && obj2;  
console.log(result); // { name: 'john', age: 12 } 출력이 됨

// || 연산자는 obj1이 트루이기 때문에 바로 obj1를 리턴함
result = obj1 || obj2;
console.log(result); // { name: 'bob' } 출력 됨

// || 연산자는 처음 연산된 값이 false이기 때문에 바로 obj2를 리턴함
result = false || obj2;
console.log(result); // { name: 'john', age: 12 } 출력이 됨

 

2) Optional Chaining Operator

- "?." 로 사용하고 null 또는 undefined를 확인할 때 사용함

let item = { name: "pencil" };
const price = item?.price; // const price = item && item.price; 와 같은 의미
console.log(price); // pencil이 출력 됨

 

3) 변수와 함수 Export

- 변수는 외부에 노출(혹은 참조)하지 않아야 함

   - 외부에서 사용해야 한다면 getter 함수를 생성해 사용해야 함

- 함수는 필요할 경우 외부 노출(혹은 참조) 가능함

   - "export"라는 키워드를 사용해 외부에서 참조하면 됨

   - 참조(혹은 노출)할 것이 한 개라면 "export defualt" 키워드 사용

   - 참조(혹은 노출)할 것이 여러 개라면 "export" 키워드 사용

// export default function counter()
//  > 사용하는 법 : ex) import [함수이름] from '파일 경로.js';

// 여러개를 노출할 경우 사용하는 곳에서
//   ex) import { 함수 이름 } from '파일 경로.js';
export default function counter() {
  count++;
  console.log(count);
}

export function deCounter() {
  count--;
  console.log(count);
}

 

4) Javascript의 callstack

- 자바스크립트에서는 기본 자체는 동기적으로 실행이 되기 때문에 무거운 작업을 수행하면 좋지 않음

- 자바스크립트는 순차적으로 호출하기 때문에 위의 그림에서는 c() 호출이 완료되면 -> b() 호출 -> a() 호출이 됨

    - 즉, a 함수는 b,c 함수들이 모두 완료되어야 완료될 수 있음

    Q1. 만약에 b나 c 함수가 엄청 오래걸리는 작업이 있다면 어떻게 되는가?

     A1. a 함수가 완료되는 시간이 그만큼 오래 걸림

 

    Q2. 자바스크립트는 동기적으로 일을 진행한다고 했는데, 그럼 비동기적으로 사용이 불가능 한가?

     A2. async 키워드를 사용하면 가능함. 

       

 

5) Promise

- Promise Object란?

    : 비동기적으로 수행하는 끝난 이벤트를 알려주는 객체

        ex) then, catch, finally 사용 가능

// 주어진 seconds(초)가 지나면 callback 함수를 호출함
// 단, seconds가 0보다 작으면 에러를 던지자!

function runInDelay(seconds) {
  // resolve : then을 호출할때 사용할 함수
  // reject :  실패할떄 알려주는 것
  return new Promise((resolve, reject) => {
    if (!seconds || seconds < 0) {
      reject(new Error('seconds가 0보다 작음'));
    }
    setTimeout(resolve, seconds * 1000);
  });
}

runInDelay(2)
  .then(() => console.log('finish')) //필요한 일을 수행하는 then
  .catch(console.error) // 에러를 처리하는 catch
  .finally(() => console.log('Done')); // 최종적으로 무조건 호출되는 함수
// 성공하는 케이스에 대해서만 처리하고 싶으면 catch와 finally는 생략 가능
// 대신에 에러가 발생했을때, UnhandledPromiseRejectionWarning이 발생함
// 가급적이면 처리해주는게 좋음
// ex) runInDelay(2).then(() => console.log('Finish'));

runInDelay()
  .then(() => console.log('Finish')) //필요한 일을 수행하는 then
  .catch(console.error) // 에러를 처리하는 catch
  .finally(() => console.log('Done')); // 최종적으로 무조건 호출되는 함수

 

 

 

 

 

 

## 사담

동기, 비동기 방식으로 promise, async에 대해서 좀 더 공부해봐야겠다.

두세번 다시 보고, 코드도 짜보는데.. 볼때마다 새롭다. 익숙해질 때까지 복습해야할듯

 

 

++ 2023.09.06 추가

 

콜스택, 이벤트 루프 관련해서 좋은 영상이 있었다!👏👏👏

https://www.youtube.com/watch?v=8aGhZQkoFbQ&t=471s

비동기 방식으로 진행하면 콜스택 중간에 끼어들면 어떡하지, 그럼 중간에 멈추는 건가? 싶었는데 위의 영상에서 아주 자세히 설명해줘서 좋았다.

이벤트 루프는 중간에 무조건 끼어드는게 아니고, 현재 하고 있는 일을 모두 마친 후에 들어갈 수 있음!

 

영상의 예시에서 delay를 1초로 걸은 함수를 호출했다 해도, 현재 콜스택에 쌓여있는 것들이 많으면 실제 1초보다 느릴 수 있다는 걸 보여주는데 감탄했다. 

이 부분에서 "비동기 방식으로 진행하면 콜스택 중간에 끼어들면 어떡하지, 그럼 중간에 멈추는 건가?" 의 의문점을 해소할 수 있어서 좋았다.