TIL 23-05-25

1. JS문법종합반 5주차
2. JS 예제 week1
- 오류해결과정(1)
- 오류해결과정(2)

---

1.

• DOM : Document Object Modeling : 자바스크립트가 html문서를 해석하기 위해 파싱한 결과물/ 브라우저에 기본적으로 내장되어 있는 api 중 하나
• api: 다른 시스템에서 제공하는 기능을 사용할 수 있도록 도와주는 중간자 역할
• dom이 브라우저에 내장되어 있으므로 html의 내용을 js로 접근/ 제어 가능
• 모든 dom의 node들은 속성 과 메서드 를 갖는다
• 부모-자식 노드 관계
• class : 설계도. 객체를 생성하기 위한 일종의 템플릿
• 인스턴스 : 설계도를 보고 만들어진 객체
• constructor: 생성자 함수. 객체를 생성할때 호출, 객체를 초기화
• Getter/ Setter
  : class에서는 getter와 setter를 사용하여 class의 속성에 접근
  • getter: 속성 값 반환
  • setter: 속성 값 설정
• 상속:
  • subclass/derived class: 상속을 받는 클래스
  • superclass/base class: 상속을 하는 class
• Static Method: 인스턴스를 만들 필요가 없을 때 사용( 유틸리티 함수, 정적 속성인 경우)
• 클로저: 함수와 그 함수가 선언된 렉시컬 환경과의 조합
• 클로저와 렉시컬 환경(LexicalEnvironment) : 외부 함수보다 중접 함수가 더 오래 유지되는 경우, 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 여전히 참조할 수 있다. ← 이 개념에서 중첩 함수가 클로저
• 클로저의 활용: 상태를 안전하게 변경하고 유지하기 위해 사용
• 캡슐화(encapsulation)와 정보 은닉 : 프로퍼티와 메서드를 하나로 묶는 것
  :자바스크립트는 별도의 조치를 취하지 않으면 기본적으로 외부 공개

---

2.

(1) 형변환 문제

나의 초기 풀이

function add(a, b) {
	if (typeof a !== 'number') {
		a = Number(a);
	} else if (typeof b !== 'number') {
		b = Number(b);
	}
	return a + b;
}

실행결과

console.log(result1); // 출력 결과: 10
console.log(result2); // 출력 결과: 55

해결

매개변수 a, b를 받아올 때 underscore로 받아와 선 선언하여 해결

해결 코드

function add(a, b) {
	let _a = a;
	let _b = b;
	if (typeof a !== 'number') {
		_a = Number(a);
	} else if (typeof b !== 'number') {
		_b = Number(b);
	}
	return _a + _b;
}

(2) 객체 및 배열 메소드 응용 문제

나의 초기 풀이

function handleEdit(id, editingObj) {
	let element = db.find(el => el.id === id);
    [...element].replace(element, editingObj);
}

에러메세지

TypeError: element is not iterable

element는 이터러블하지 않다고한다... 다시 짜보자
find를 쓰는게 해결방법이 안보이는데 findIndex를 써서 배열인덱스 가지고 해봐야하나

function handleEdit(id, editingObj) {
	const index = db.findIndex(el => el.id === id);
	"   "
}

이 다음부터 모르겠다 밤에 문법공부 더 하고 내일 다시 고민시작

나머지 문제는 깔끔하게 해결!