객체 (object)
객체 (object) 클래스는 javascript 데이터 유형 중 하나이다. 다양한 키 모음 및 더 복잡한 엔티티들을 저장하는 데 사용된다. 이름 (name)과 값 (value)로 구성된 프로퍼티 (property)의 정렬되지 않은 집합니다. 프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드 (method)라고 한다.
객체 초기자는 중괄호로 묶인 0개 이상의 객체의 프로퍼티명과 관련 값의 쌍을 콤마로 구분한 목록이다.
const object1 = { a: 'foo', b: 42, c: {} };
console.log(object1.a);
// expected output: "foo"
const a = 'foo';
const b = 42;
const c = {};
const object2 = { a: a, b: b, c: c };
console.log(object2.b);
// expected output: 42
const object3 = { a, b, c };
console.log(object3.a);
// expected output: "foo"- 객체의 프로퍼티 참조
//숫자로 시작되는 프로퍼티는 안 됨
객체이름.프로퍼티이름
또는
객체이름["프로퍼티이름"]- 객체의 메소드 참조
객체이름.메소드이름()메소드 뒤에 괄호 ()를 붙이지 않으면 메소드가 아닌 프로퍼티 자체를 참조하게 된다. 따라서 메소드의 정의 그 자체가 반환된다.
연습
HTML
<body onload="fillTable()">
<table>
<tr>
<th>이름</th>
<th>나이</th>
<th>회사</th>
</tr>
</table>
</body>javascript
var people = [];
var person_1 = {
name : "hoon",
age : 28,
company : "house"
}
var person_2 = {};
person_2.name = "GT"
person_2.age = 30
person_2.company = "konkuk univ."
var person_3 = {
name : "YJ",
age : 26,
company : "house"
}
people.push(person_1);
people.push(person_2, person_3);
function fillTable () {
for (var i = 0; i < people.length; i++){
var trEl = document.createElement("tr");
document.querySelector("table").append(trEl);
var tdEl1 = document.createElement("td");
tdEl1.append(people[i].name);
trEl.append(tdEl1);
var tdEl2 = document.createElement("td");
tdEl2.append(people[i].age);
trEl.append(tdEl2);
var tdEl3 = document.createElement("td");
tdEl3.append(people[i].company);
trEl.append(tdEl3);
}
}
스타일 제어
var divEl = document.querySelector("div");
divEl.style.color = "blue";
divEl.style.backgroundColor = "skyblue";
divEl.style.padding = "24px 36px";
divEl.style.display = "inline-block";
divEl.style.borderRadius = "12px";
훈이야 화이팅