ㅁ 객체
- 자바스크립트의 데이터 유형 중 하나.
- 중괄호{ }로 생성.
- 각 데이터는 "속성(property): 값(value)"의 형태로 정의한다. (key-value 세트를 Entry라고 한다)
- 후행 쉼표(trailing comma)를 사용할 수 있다.
변수 = {
속성 : 값,
속성 : 값,
속성 : 값,
};
자바의 저것들과 비슷하다
ㅁ 객체 내에 정의되어있는 속성에 접근하는 방법
(1) 점( . ) 표기법
객체.속성
(2) 대괄호( [ ] ) 표기법
- 그냥 속성 쓰면 안 되고 문자열로 써야 한다.
객체['속성']
ㅁ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const person = {
name : '꽃감이',
age : 30,
hobbies : ['춤', '노래'],
home : { // person이라는 객체에 home이라는 객체가 또 있다.
address : 'seoul',
phone : '02-123-4567'
},
friends : [ // 각 친구들을 객체로 표현한다.
{
name : '루잼',
age : 30
},
{
name : '망개',
age : 30
}
]
}
// person 객체는 5개의 속성을 가지고 있다.
// person 객체 출력
function fnObjectDefine() {
console.log(person);
}
</script>
<button onclick="fnObjectDefine();">객체확인</button>
</body>
</html>
- 콘솔에 표시되는 중괄호 블럭을 보면 객체라는 걸 알 수 있다.
중괄호 블럭 안에 또 중괄호가 있다. home도 객체라는 걸 알 수 있다.
- person은 5개의 속성이 정의되어 있는 객체 형식이다.
- 콘솔에 출력되는 속성 순서가 내가 작성한 속성 순서와 다를 수 있다.
- home은 객체라 한번 펼치면 나오는데, friends는 배열이라 한번 더 열어야 나온다.
ㅁ 속성명에 따옴표가 있어도 되고 없어도 된다. 그런데 속성명에 공백이나 특수문자를 쓰려면 꼭 따옴표를 써야한다.
ㅁ 객체를 가지고 반복문 가능은 가능하지만, 인덱스가 없기 때문에 일반적인 for 문은 안 됨.
- for in 문으로 가지고 있는 속성(property)명을 문자열로 임의의 순서로 순차적으로 반환.
- 반환되는 속성명은 string타입이므로 속성값을 확인하기 위해서 대괄호 표기법을 사용해야 된다. (점 표기법 x)
- 조회 목적으로만 사용하는게 좋고, 추가/수정/제거는 하지 않는게 좋음.
for( 속성받을변수 in 객체 ) {
}
- 객체는 for문, for of 문 불가능하다. for in 문만 가능하다.
(배열은 for, for in, for of 다 가능)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const person = {
name : '꽃감이',
age : 30,
hobbies : ['춤', '노래'],
home : { // person이라는 객체에 home이라는 객체가 또 있다.
address : 'seoul',
phone : '02-123-4567'
},
friends : [ // 각 친구들을 객체로 표현한다.
{
name : '루잼',
age : 30
},
{
name : '망개',
age : 30
}
]
}
// person 객체는 5개의 속성을 가지고 있다.
function fnForObject() {
for(let prop in person) { // 'name', 'age', 'hobbies', 'friends', 'home' (순서는 내가 작성한 순서와 다를 수 있다.)
console.log(prop, person.prop);
}
}
</script>
<button onclick="fnForObject();">for in 문</button>
</body>
</html>
- 속성값이 제대로 안 보임.
prop에 들어온 것은 문자열이여서 대괄호를 써야함.
person.prop하면 person객체의 prop 속성이 있는지를 찾음.
function fnForObject() {
for(let prop in person) { // 'name', 'age', 'hobbies', 'friends', 'home' (순서는 내가 작성한 순서와 다를 수 있다.)
console.log(prop, person[prop]);
}
}
ㅁ 객체 속성(property)
- 처음에 속성을 가진 상태로 객체를 만들고, 그 이후에 속성을 추가할 수도 있다.
이걸 동적으로 property를 생성한다고 얘기한다.
- 기존에 있는 속성을 제거할 수도 있다.
delete 연산자를 이용해서 동적으로 프로퍼티 삭제 가능 .
- 객체 내에 속성으로 있는 함수를 메소드라고 한다.
(객체가 가지고 있는 함수를 메소드라고 한다)
function 자료형의 속성을 메소드라고 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fnProperty() {
// 객체 생성
const movie = {
title : '데드풀과 울버린',
'title en' : 'Deadpool', // 속성명에 공백, 특수문자가 있으면 따옴표 붙여야 한다.
showTm : 128,
openDt : '2024-07-24',
status : '개봉',
// 객체가 가지고 있는 함수는 메소드라고 한다. printActor라는 속성으로 정의되어있는 메소드이다.
printActor : function(flag) {
if(flag == "주연") {
console.log('라이언 레이놀즈');
console.log('휴 잭맨');
}
else if(flag == "조연") {
console.log('카란 소니');
console.log('모레나 바카린');
}
}
};
movie.printActor("조연");
}
</script>
<button onclick="fnProperty();">for in 문</button>
</body>
</html>
- 객체가 가지고 있는 함수(메소드)를 호출하려면 객체명.속성명();
ㅁ 참고
- window 객체에 alert라는 속성이 있다. 그 속성의 값이 메소드다.
- 객체가 가지고 있는 함수(메소드)여서 매개변수를 줬던 거다.
ㅁ 동적으로 프로퍼티 추가, 변경, 삭제
- 없는 속성이면 생성된다. 있는 속성이면 변경된다.
- 속성을 문자열 형식으로 써야할 때는 점을 못 쓰고 대괄호로 접근해야 한다.
- 프로퍼티 삭제는 delete 객체명.속성명;
function fnProperty() {
......
(1) 동적으로 프로퍼티 추가
movie.nation = '미국'; // 없는 속성이면 생성된다. 있는 속성이면 변경된다.
(2) 프로퍼티 변경
movie['title en'] = 'Deadpool & Wolverine';
// 문자열의 형식으로 속성을 써야할 때는 점을 못 쓰고 대괄호로 접근해야 한다.
movie.'title en' = 'Deadpool & Wolverine'; <- 이거 안 됨.
(3) 프로퍼티 삭제
delete movie.status;
console.log(movie)
- 객체의 속성명을 문자열로 표기했으면, 접근할 때도 점이 아니라 대괄호로 접근해야 한다.
movie.'title en' 이건 문법적으로 허용되지 않음. 대괄호로 접근해야 한다.
ㅁ movie 객체를 콘솔창이 아닌 화면상의 특정 요소에 출력
document.getElementById("result").innerHTML = movie;
- innerHTML로 객체를 대입했는데 화면에는 콘솔창처럼 객체에 대한 상세 내용이 나오지 않는다.
- 왜냐면 innerHTML 속성도 속성값이 무조건 문자열이다.
innerText, innerHTML 모두 대입은 문자만 대입 가능하다.
- 그래서 객체를 쓰게 되면 내부적으로 객체를 문자로 변환시키고자 movie.toString() 메소드가 자동으로 실행된다.
- 객체에 toString 메소드가 없다면(정의하지 않았다면) 객체의 타입을 나타내는 문자열을 반환한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fnProperty() {
// 객체 생성
const movie = {
title : '데드풀과 울버린',
'title en' : 'Deadpool',
showTm : 128,
openDt : '2024-07-24',
status : '개봉',
// 객체가 가지고 있는 함수는 메소드라고 한다. printActor라는 속성으로 정의되어있는 메소드이다.
printActor : function(flag) {
if(flag == "주연") {
console.log('라이언 레이놀즈');
console.log('휴 잭맨');
}
else if(flag == "조연") {
console.log('카란 소니');
console.log('모레나 바카린');
}
},
toString : function() {
return "제목: " + this.title + "<br>" // 그냥 title만 쓰면 title이라는 변수를 찾음.
+ "상영시간: " + this.showTm + "<br>"
+ "개봉일: " + this.openDt + "<br>";
}
};
movie.printActor("조연");
// (1) 동적으로 프로퍼티 추가
movie.nation = '미국'; // 없는 속성이면 생성된다. 있는 속성이면 변경된다.
// (2) 프로퍼티 변경
movie['title en'] = 'Deadpool & Wolverine';
// 문자열의 형식으로 속성을 써야할 때는 점을 못 쓰고 대괄호로 접근해야 한다.
// (3) 프로퍼티 삭제 (어떤 객체의 어떤 프로퍼티를 지울건지)
delete movie.status;
console.log(movie)
}
</script>
<button onclick="fnProperty();">for in 문</button>
<div id="result"></div>
</body>
</html>
- toString이라는 이름의 속성을 정의하고 속성 값으로 함수를 대입한다.
toString 메소드는 리턴값이 있어야 한다. 어떤 문자열을 반환할건지.
- 메소드 내에서 현재 이 객체를 가리키고자 할 경우에는 this.
this. 없이 쓰면 메소드 바깥쪽에서 그러한 이름의 변수를 찾는다.
- 단, 화살표 함수 내에서는 this를 쓸 수 없다.
this 대신 그냥 객체명 쓰면 된다. movie.title
