[책] 초보자를 위한 JavaScript 200제 실습

객체

1) 변수 family에 중괄호를 열어 객체값을 할당했다.

2) 키 address에 값은 문자열 'Seoul'인 속성을 객체에 추가했다. 객체에 키를 작성할 때에는 이렇게 문자열 ' '기호를 넣은 것과 넣지 않은 것의 차이를 두지 않는다.

3) 키 members에 새로운 객체 리터럴을 대입한다. 아직 family 객체에 새롭게 추가된 members는 없는 상태이다.

4) 키 addFamily 이름으로 함수 리터럴을 대입한다. 함수 표현식으로 변수에 대입했던 것처럼 키 값으로 함수를 할당한다.

5-8) this 키워드를 통해 family 객체 내부 속성에 접근할 수 있다. 여기서는 this 키워드를 통해 family의 members 속성으로 접근하고 값을 할당했다는 정도만 알면 된다. 객체가 선언된 이후에도 속성을 추가적으로 더 넣을 수 있다.

10-12) 키 getHeadcount에 함수 리터럴을 할당한다. 이 함수는 members의 key들을 모아 배열로 반환하고, 반환된 배열의 길이를 통해 family 객체의 사이즈를 알 수 있다.

15-17) family 객체의 속성 addFamily 함수를 호출하여 members를 추가한다.

18) family 객체의 속성 getHeadcount 함수를 호출하여 member에 추가된 개수(인원수)를 출력한다.

 

div 객체

Ex1

1. 'div'로 지정된 태그 이름으로 div 엘리먼트를 생성한다.

2. var 키워드로 변수 element_div에 document.createElement('div')를 대입하여 입력하면, 변수의 값이 출력되지 않고 undefiened가 보인다. 이는 브라우저 내부 메모리에 변수 div를 저장했기 때문이다.

3. element_div.id에 'div_name'을 대입하면 "div_name"이 출력된다. 이는 기존에 선언한 변수 element_div를 이용하여 div 태그에 id를 추가한 것과 동일하다.

 

* Document 객체는 웹 페이지 그 자체를 의미한다.

* DOM은 document Object model의 약자이다. 문서 객체 모델이라고 부른다. 객체 지향 모델로써 구조화된 문서를 표현하는 방식이다.

https://akong2125.tistory.com/entry/JavaScript-Document-DOM

[JavaScript] Document & DOM

 

for-in 반복문

1) store 변수에 객체 값을 할당한다.

3) store 객체를 순환하는 for-in 반복문이다. 변수 item은 store 객체의 요소를 접근하는 속성명이다.

for-in 반복문으로 내부 요소 정보가 전달되어 코드가 실행된다. 매 반복마다 hasOwnProperty를 이용하여 store 객체에 item 키 정보가 있는지 확인한다. 없으면 continue를 통해 아래 코드는 실행하지 않고 다음 순서로 넘어간다. for-in 반복문을 사용할 때는 hasOwnProperty를 통해 객체 안에 속성이 있는지 한 번 더 확인하는 것을 권장한다.

 

자바스크립트에는 객체 자료형 자체에 기본적으로 내장된 속성들이 있다. hasOwnProperty 속성도 이에 속하는 내장 속성이다.

 

템플릿 문자열 이해하기

템플릿 문자열은 `[억음 부호]와 $[표현식]으로 나타낸다.