ABOUT ME

Today
Yesterday
Total
  • 23_10_09 JS공부정리
    카테고리 없음 2023. 10. 10. 00:59

     
    https://www.youtube.com/watch?v=OoLXwW7TRHQ&list=PLcqDmjxt30RvEEN6eUCcSrrH-hKjCT4wt&index=104 

    [제로초강의] 12.3강~
     
    -마우스 우클릭 이벤트는 contextmenu이다.

            $tbody.addEventListener('contextmenu', onRightClick);

     
    -&&연산자는 앞의것이 true이면 뒤에것을 실행하라는 의미임.
    -A&&B에서 A가 true이면 B를 실행함. 
    -A||B에서 A가 false이면 B를 실행함. 

      mines.includes(data[rowIndex - 1]?.[cellIndex - 1]) && i++; //앞이 true이면 i++를 함

    https://ko.javascript.info/logical-operators

    논리 연산자

    ko.javascript.info

    * &&는 첫번째 false를 실행, ||는 첫번째 true를 실행
    -falsy값 : 빈문자열, 0, false, null, undefined, NaN
     
    -옵셔널 체이닝 ?. (뤼튼 AI설명)
    Optional Chaining은 JavaScript의 기능으로, 객체가 null 또는 undefined인 경우 에러를 발생시키지 않고 대신 undefined를 반환합니다. 이것은 특정 객체의 속성에 접근하려 할 때 그 객체나 속성이 존재하지 않을 가능성이 있을 때 유용합니다.
    예를 들어 다음과 같은 코드가 있다고 가정해봅시다:

    let user = {
      name: "John",
      address: {
        street: "123 Main St.",
        city: "Anytown"
      }
    };
    
    console.log(user.address.city); // 출력값: Anytown
    

    여기서 user의 address와 city는 모두 존재하므로 user.address.city는 정상적으로 "Anytown"을 출력합니다.
    그러나 만약 address나 city가 없다면 어떻게 될까요?

    let user = {
      name: "John"
    };
    
    console.log(user.address.city); // TypeError: Cannot read property 'city' of undefined
    

    위 코드에서는 user에 address 속성이 없으므로 user.address.city를 호출하면 TypeError가 발생합니다. 이런 상황에서 Optional Chaining 연산자인 ?.을 사용하면 에러를 방지할 수 있습니다:

    let user = {
      name: "John"
    };
    
    console.log(user?.address?.city); // 출력값: undefined
    

    위 코드에서는 user?.address?.city가 실행되며, user.address가 undefined라도 에러 대신 undefined를 출력합니다. 이렇게 Optional Chaining 연산자는 객체의 중첩된 속성에 안전하게 접근할 수 있도록 도와줍니다.
     
    -위경우에서 console.log(user.address)를 하면 undefined가 됨. 맨 마지막은 없어도 undefined로 출력되니 상관없음. 하지만 undefined에 다시 접근해서 console.log(user.address.city)를 하면 address가 undefined이므로 .city를 붙이면 에러가 나는것. 따라서 이경우에 옵셔널 체이닝을 사용함.
    -본문 맨 윗줄의 경우에도 cellIndex뒤에 옵셔널체이닝을 안붙이는 이유는, cellIndex가 없다하더라도 undefined로 출력되기 때문이다. 
     
    - nullish coalescing : null과 undefined만 아니면 출력해주는 연산자 '??'
    Nullish Coalescing 연산자인 ??는 JavaScript에서 사용되며, 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환합니다. 만약 왼쪽 피연산자가 null이나 undefined가 아니라면, 왼쪽 피연산자 자체를 반환합니다.
    기본적으로 이 연산자는 값이 없을 때 (즉, 값이 null 또는 undefined일 때) 기본값을 제공하는 데 사용됩니다.
    예시:

    let value = null;
    let defaultValue = "Default Value";
    
    console.log(value ?? defaultValue); // 출력: "Default Value"
    

    위 코드에서 value는 null입니다. 따라서 value ?? defaultValue 구문은 "Default Value"를 출력합니다.
    다른 예시 : 

    let value = "Real Value";
    let defaultValue = "Default Value";
    
    console.log(value ?? defaultValue); // 출력: "Real Value"
    

    위 코드에서 value는 실제 값을 가지고 있으므로 (null 또는 undefined가 아님), value ?? defaultValue 구문은 "Real Value"를 출력합니다.
    중요한 점은 Nullish Coalescing 연산자가 'falsy' 값들(0, '', NaN 등)을 유효한 값으로 간주한다는 것입니다. 이 점은 다른 기본값 제공 방법인 Logical OR(||)와 차이점입니다:

    console.log(false || 'default');  // 'default'
    console.log(false ?? 'default');  // false
    
    console.log(0 || 'default');  // 'default'
    console.log(0 ?? 'default');  // 0
    
    console.log('' || 'default');  // 'default'
    console.log('' ?? 'default');  // ''
    

    위의 예제처럼, falsy 값을 유효한 값으로 취급해야하는 경우에 Nullish Coalescing 연산자를 사용하면 좋습니다.
     
    -호출스택 맥시멈에러 : 호출스택이 너무 많이 쌓여서 문제가 발생하는 에러, 보통 재귀함수에서 자주 발생함

    function openAround(rI, cI) {
        const count = open(rI, cI);
        if (count === 0) {
          openAround(rI - 1, cI - 1);
          openAround(rI - 1, cI);
          openAround(rI - 1, cI + 1);
          openAround(rI, cI - 1);
          openAround(rI, cI + 1);
          openAround(rI + 1, cI - 1);
          openAround(rI + 1, cI);
          openAround(rI + 1, cI + 1);
        } //이 코드를 실행하면 아래와 같은 문제가 발생함
    호출스택 맥시멈에러

    -한번에 너무 많은 함수를 호출했기 때문에 발생한 에러, setTimeout을 이용해 백그라운드와 큐를 활용하면 이 문제를 해결할 수 있음.

    function openAround(rI, cI) {
      setTimeout(() => { //이를 추가하면 호출이 순서대로 이루어지며, 에러가 발생하지 않음.
        const count = open(rI, cI);
        if (count === 0) {
          openAround(rI - 1, cI - 1);
          openAround(rI - 1, cI);
          openAround(rI - 1, cI + 1);
          openAround(rI, cI - 1);
          openAround(rI, cI + 1);
          openAround(rI + 1, cI - 1);
          openAround(rI + 1, cI);
          openAround(rI + 1, cI + 1);
        }
      }, 0);
    }

     

Designed by Tistory.