자바스크립트 객체
자바스크립트의 객체는 {} 내에 Key:Value 가 모여있는 형태로 작성된다(Map 형식)
{ K:V , K:V , K:V } : 자바스크립트 객체
(참고) 자바스크립트 객체 모양의 문자열
== JSON(JavaScript Object Notation, 자바스크립트 객체 표기법)
→ "{ K:V , K:V , K:V }"
자바스크립트에 객체를 생성하는 방법
(1) {} : 객체 리터럴 표기법을 이용한 생성
(2) 생성자 + new 생성자()를 이용한 생성
<button id="btn1">객체생성 1</button>
<div class="area" id="div1"></div>
<button id="btn2">객체생성 2(생성자 함수)</button>
style 태그
<style>
.area{
width: 400px;
height: 400px;
border: 1px solid black;
}
</style>script 태그
외부 js 파일과 연결하는 태그
<script src="js/11_객체.js"></script>// 객체 생성
document.getElementById("btn1").addEventListener("click", function(){
const div1 = document.getElementById("div1");
// {}객체 리터럴 표기법으로 객체 생성
// ** (중요) **
// 자바스크립트 객체의 key는 무조건 string(묵시적)
// "Key" 또는 'Key'
// 또는 Key (따옴표 없어도 String으로 인식)
const brand="할리스";
const product = {
"pName" : "케이크",
'brand' : '스타벅스',
color : ["초코","딸기","치즈"],
price : 3500,
// 기능(메소드)
mix : function(){
console.log("섞기 시작합니다.");
},
information : function(){
console.log(this.pName);
console.log(this.brand);
console.log(this.color);
console.log(this.price);
// 같은 객체 내부의 다른 속성을 호출하고 싶은 경우
// 현재 객체를 뜻하는 this를 앞에 붙여야 된다.
// this 미작성 시 객체 외부 변수 호출
console.log(brand);
}
}
// 결과 출력
div1.innerHTML = ""; // div1 내부 내용 삭제
div1.innerHTML += "product.pName : " + product.pName + "<br>";
div1.innerHTML += "product.brand : " + product.brand + "<br>";
div1.innerHTML += "product.color : " + product.color + "<br>";
div1.innerHTML += "product.price : " + product.price + "<br>";
div1.innerHTML += "<hr>";
// 자바스크립트 객체용 향상된 for문 (for ... in)
// 객체 내부에 작성된 key를 순서대로 하나씩 꺼내옴
for(let key in product){
div1.innerHTML += product[key] + "<br>";
// 배열의 인덱스 선택하듯이 (product.key로 하면 undefined 됨)
}
// 객체 메소드 호출
product.mix();
product.information();
})
//------------------------------------------------------------------------------------
// 생성자 함수(자바의 생성자를 함수로 작성하는 모양)
// 1. 생성자 함수 정의(생성자 함수명은 대문자로 시작!)
function Student(name, grade, ban){
// 속성
// this == 생성되는 객체
this.name = name; // 생성되는 객체 name에 매개변수 name 대입
this.grade = grade; // 생성되는 객체 grade에 매개변수 grade 대입
this.ban = ban; // 생성되는 객체 ban에 매개변수 ban 대입
// 기능 (메소드)
this.intro = function(){
console.log(grade + "학년 " + ban + "반 " + name + "입니다.");
}
}
// 2. 생성자 함수 호출(new 연산자)
document.getElementById("btn2").addEventListener("click", function(){
const std1 = new Student("홍길동", 3, 5);
const std2 = new Student("김길동", 2, 9);
const std3 = new Student("오길동", 1, 2);
console.log(std1);
console.log(std2);
console.log(std3);
// 생성자 함수 사용 이유: 같은 형태의 객체가 다수 필요한 경우에 사용
// 코드 길이 감소, 재사용성 증가
console.log(std1.name);
std1.intro();
})전체코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>11_객체</title>
<style>
.area{
width: 400px;
height: 400px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>자바스크립트 객체</h1>
<pre>
자바스크립트의 객체는 {} 내에 Key:Value 가 모여있는 형태로 작성된다.
(Map 형식)
{ K:V , K:V , K:V } // 자바스크립트 객체
(참고) 자바스크립트 객체 모양의 문자열
== JSON(JavaScript Object Notation, 자바스크립트 객체 표기법)
-> "{ K:V , K:V , K:V }"
- 자바스크립트에 객체를 생성하는 방법
1. {} : 객체 리터럴 표기법을 이용한 생성
2. 생성자 + new 생성자()를 이용한 생성
</pre>
<button id="btn1">객체생성 1</button>
<div class="area" id="div1"></div>
<hr>
<button id="btn2">객체생성 2(생성자 함수)</button>
<script src="js/11_객체.js"></script>
</body>
</html>
Hello! My Name is oYJo