3 / 1 자바스크립트 문법 보충

자바스크립트 원시형, 참조형에 대한 개념

<원시형, 참조형>

name: 'James',
age: 25;
};
obj.name = 'Sam'
console.log(obj.name);      // 'Sam'

const 키워드로 할당했으면 데이터 못 바꾸는 거 아닌가요?

=> 원시값, 참조값 데이터의 차이점!

obj이름을 가진 메모리에는 레퍼런스가 들어있고 해당 메모리의 내용은 변경이 불가능하지만
레퍼런스의 데이터는 heap이라는 특별한 공간에 저장되어 있으므로 결국 const obj의 데이터는 변경 가능

<Boolean, ||, && >

데이터가 없고 비어있으면 false
falsy: A falsy value is a value that is considered false when encountered in a Boolean context.
false 0, -0, undefined, null, "", '', `` NaN

||, && 차이점에 대해 설명가능하고 잘 활용해서 코드를 줄일 수 있음

let obj = {
  name: "woo",
};

// if (obj) {
//   console.log(obj.name);
// }

obj && console.log(obj.name);

<클래스와 콜백함수>

• this는 Counter클래스로 만들어낸 인스턴스 객체를 의미함.
• 인스턴스가 생성됨 그리고 생성자 함수가 실행되서 속성을 초기화
• 하나의 클래스로 다양한 오브젝트 인스턴스를 만들어서 서로 다양한 기능을 하게 함.
• 아래 코드의 흐름과 이유를 설명 가능.

class Counter {
  constructor(runEveryFiveTimes) {
    this.counter = 0;
    this.callback = runEveryFiveTimes;
  }

  increase() {
    this.counter++;
    console.log(this.counter);
    if (this.counter % 5 === 0) {
      this.callback && this.callback(this.counter);
    }
  }
}

function printNum(num) {
  console.log(`Wow ${num}`);
}

function alertNum(num) {
  alert(`alert! ${num}`);
}

const printCounter = new Counter(printNum);
const alertCounter = new Counter(alertNum);

printCounter.increase();
printCounter.increase();
printCounter.increase();
printCounter.increase();
printCounter.increase();

alertCounter.increase();
alertCounter.increase();
alertCounter.increase();
alertCounter.increase();
alertCounter.increase();