객체 선언 및 호출
- 객체는 키 값을 사용하여 속성(멤버변수)들을 식별 (Key:value 형태)
- 중괄호를 사용하여 객체를 생성
- '[ ]'(대괄호) 또는 '.'(점)으로 요소를 접근 할 수 있음
- 속성에 모든 자료형이 올 수 있음 (함수도 들어갈 수 있음)
- 객체 내에서 자신의 속성을 호출 : 반드시 this 키워드 사용
- 객체의 모든 속성을 출력 : for in 문을 사용
👨🎓 선언 방법
var 객체명 = { key : value, key : value, key : value, ... };
👨🎓 객체 접근 방법
객체명['요소명'];
또는
객체명.요소명;
for in문에서 사용하려면 [ ] 를 사용 (대괄호)
in / with 키워드
- in : 객체 내부에 해당 key값이 있는지를 확인 하는 키워드
- 있으면 true / 없으면 false
- with : 객체명을 생략하여 사용할 수 있도록 해주는 키워드
EX)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>객체</title>
</head>
<body>
<button id="btn">클릭</button>
<script>
document.getElementById("btn").onclick = function() {
// 객체 생성
var member = {
name: "홍길동",
age: "20살",
addr: "경기도 부천",
info: function() {
var str = this.name + "/" + this.age + "/" + this.addr;
alert(str)
}
};
// 객체 내에 있는 함수 호출
member.info();
// for in 문으로 객체 안에 값 확인
for (var key in member) {
// console.log(key);
if (typeof(member[key]) == 'string') {
console.log(member[key]);
}
}
// 객체 내부에 해당 속성이 있는지를 확인
console.log('name' in member);
console.log('phone' in member);
/*member.name='김말똥';
member.age='30살';
member.addr='서울시 양천';
member.info();*/
// 객체명을 생략하여 정보 변경
with(member) {
name = '고길똥';
age = '40살';
addr = '부산시 서면';
}
member.info();
};
</script>
</body></html>EX)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn">클릭</button>
<script>
document.getElementById("btn").onclick = function() {
// 방법1
/*var member = {
name: "",
age: "",
addr: "",
inputData: function() {
this.name = window.prompt("회원의 이름은?");
this.age = window.prompt("회원의 나이는?")
this.addr = window.prompt("회원의 주소는?");
},
printData: function() {
var str = this.name + "/" + this.age + "/" + this.addr;
return str;
}
};
member.inputData();
console.log(member.printData());*/
// 방법2.
var name = window.prompt("회원의 이름은?");
var age = window.prompt("회원의 나이는?")
var addr = window.prompt("회원의 주소는?");
var member = {
name: name,
age: age,
addr: addr,
printData: function() {
var str = this.name + "/" + this.age + "/" + this.addr;
return str;
}
};
console.log(member.printData());
};
</script>
</body>
</html>객체 속성 추가 및 삭제
추가
객체명.속성명 = '값'; // 속성명이 key가 되고, 값이 value가 됨
객체명.속성명 = function(){
함수 로직
[return 리턴값;]
};
삭제
delete(객체명.속성명); //속성명은 key (key를 입력하면 해당 key와 value가 삭제 됨)
EX)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>객체</title>
</head>
<body>
<button id="btn">클릭</button>
<script>
document.getElementById("btn").onclick = function() {
var member = {
name: "홍길동",
age: "20살",
addr: "경기도 부천",
};
// 자바스크립의 객체는 현재 key가 존재하지 않으면 새롭게 만들어서 데이터를 저장하는 구조
member.phone = "01055556666";
console.log(member);
member.info = function() {
var str = member.name + "/" + member.age + "/" + member.addr + "/" + member.phone
return str;
};
console.log(member.info());
//자바스크립트 객체에 있는 특정 key:value를 삭제하고 싶으면 delete 함수를 사용한다.
delete(member.age);
console.log(member);
};
</script>
</body></html>객체 배열 활용
- 생성된 객체를 배열에 넣어 활용 할 수 있다.
👨🎓 선언 방법
// 배열 생성 코드
var 배열명 = new Array();// 배열에 객체 삽입
배열명.push(객체1);
배열명.push(객체2);
배열명.push(객체3);
EX)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>객체배열</title>
<style>
#print {
border: 1px solid red;
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<button id="btn1">입력</button>
<button id="btn2">출력</button>
<div id="print"></div>
<script>
var arry = new Array();
document.getElementById("btn1").onclick = function() {
var name = window.prompt("당신의 이름은?");
var age = window.prompt("당신의 나이은?");
var addr = window.prompt("당신의 주소은?");
var object = getObject(name, age, addr);
arry.push(object);
};
document.getElementById("btn2").onclick = function() {
var print = document.getElementById("print");
print.innerHTML = "";
for (var i = 0; i < arry.length; i++) {
print.innerHTML += arry[i].info() + "</br>";
}
};
function getObject(name, age, addr) {
var object = {
name: name,
age: age,
addr: addr,
info: function() {
var str = this.name + "/" + this.age + "/" + this.addr;
return str;
}
};
return object;
};
</script>
</body></html>함수를 활용한 객체 생성
function 함수명 (value1, value2, value3){ var 객체명 = { key : value, key : value, key : value, .... }; return 객체명; }
- 함수의 매개변수로 값을 받아, 객체를 생성하고, 리턴할 수 있다.
EX)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var arr = new Array();
function insert() {
var name = document.getElementById("userName");
var age = document.getElementById("userAge");
var addr = document.getElementById("userAddr");
arr.push(createMember(name.value,
age.value,
addr.value));
//1명 입력을 완료했으면 입력칸 비우기
name.value = "";
age.value = "";
addr.value = "";
}
function createMember(name, age, addr) {
var object = {
name: name,
age: age,
addr: addr
};
return object;
}
function print() {
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
}
</script>
이름 : <input type="text" id="userName" /><br>
나이 : <input type="text" id="userAge" /><br>
주소 : <input type="text" id="userAddr" /><br>
<button onclick="insert();">데이터 입력</button>
<button onclick="print();">데이터 출력</button>
</body></html>
개발자로 매일 한 걸음