[TIL] 2023/10/13 스파르타 내일배움캠프 JAVASCRIPT 5주차

DOM(HTML파일을 JS가 알아먹을 수 있는 OBJECT형태로 Modeling한 것)

• API는 다른 시스템에서 제공하는 기능을 사용할 수 있도록 도와주는 중간자 역할
• console.dir(document)
• DOM은 브라우저 상에서만 돌아간다.
• 모든 DOM의 node들은 '속성'과 '메서드'를 갖고 있다.
  /// DOM API
• 메서드: document.getElementById(동사형태O)
• 속성: innerHTML (동사형태X)
• node(이으는 마디)

클래스 / 생성자 함수

• 클래스 = 설계도
• 인스턴스 = 설계된 책상
  // 객체를 쉽고 빠르게 만들 수 있다.

class Person {
		constructor(name, age){// 생성자 함수(객체를 만든다.)
        this.name = name,
        this.age = age,
        }
        sayHello(){ console.log(this.name '하이')} //Person의 메소드
        } // this는 생성된 함수의 객체를 가리킨다
   const person1 = new Person(name, age).
        

getter와 setter

• 클래스 함수에 적용하는 것
  getter는 값을 받아오고, setter는 그 값을 받아와 유효성 검사를 한다.
• 항상 getters와 setters를 사용할 때는 this._변수 < 이처럼 언더바를 작성한다.

class Rectangle {
  constructor(width, height) {
    (this._width = width), (this._height = height);
  }
  // width를 위한 getter
  get width() {
    return this._width;
  }
  // width를 위한 setter
  set width(value) {
  //set을 통해 유효성 검사를 해준다.
    if (0 >= value) {
      console.log("에러: 0보다 커야합니다.");
      return; // 리턴을 하는 이유는 이 검사를 하고 오류가 나오면 빠져나온다.
    } else if (typeof value !== Number) {
      console.log("에러: 숫자가 아닙니다.");
      return;
    }
    this._width = value;
  } // this로 받아올 때 중복되지 않게 변수 앞에 '_' 언더바를 작성한다.

• 년도에 대한 유효성 검사 로직 많이 나옵니다 구글에

클래스 함수의 상속

class Animals {
	constructor(name, age, title)}
class Dog extends Animals {
// Animals에 있는 것들 받아온다.
// 오버라이딩(재정의) = 부모로부터 내려받아서 재정의하는 것
// 오버라이딩이 필요하다면 자식 요소에도 다시 
constructor(name, age, title, haha) 
부모의 constructor// 
super(name,age 'a') = 오버라이딩을 하기 위해서 인수를 맞춰야한다.
    
}

클래스 static method

// 객체(constructor)를 만들지 않고 바로 호출 가능하다.

class Calculator {static add(a,b) return a+b}
Calculator.add(a,b)

클로저

• 스코프 체이닝(안에서부터 밖으로 찾아간다.)
  // 자바스크립트 엔진은 함수를 어디서 호출 했는지가 아니라 어디에 정의 했는지에 따라서 스코프를 결정한다.

const x = 1;

// innerFunc()에서는 outerFunc()의 x에 접근할 수 없죠.
// Lexical Scope를 따르는 프로그래밍 언어이기 때문
function outerFunc() {
  const x = 10;
  innerFunc(); // 1
}

function innerFunc() {
  console.log(x); // 1
}

outerFunc();

// 클로저: 중첩 함수(안에서 실행)는 이미 생명주기가 날아가도 외부 함수의 변수를 여전히 참조한 것

const increase = (function () {
  let num = 0;
  // 카운트 상태를 1만큼 증가시킨다.

  // 클로저
  return function () {
    return ++num;
  };
  // 중첩된 함수는 날아가도 가비지 컬렉터에서 필요할 수도 있으니 버리지 않는다.
})() < 즉시 실행 함수 => 함수 반환(안에 함수)된다.

console.log(increase());
console.log(increase());
console.log(increase());

// 위 코드가 실행되면 즉시 실행 함수 호출 () => 함수가 반환된다.
// 결론 num은 초기화x , 외부에서 접근할 수 없는 은닉된 값!!! 의도되지 않은 변경도 걱정할 필요가 없다.