객체는 `이름(key):값(value)` 형태의 프로퍼티들을 저장하는 컨테이너로, 객체를 특정지을 수 있는 속성과 객체가 할 수 있는 기능으로 구성되어 있다.
객체 생성
- let | const 객체명 = {};
여러 개의 프로퍼티를 생성하려고 할 경우 콤마(,)를 사용하면 된다. 객체 안에는 객체를 담을수도 함수를 담을 수도 있다.
<!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 book = {
subject : "computer",
publisher : "코딩쥐",
page : 300,
color : "pink",
read:function(){
console.log("책을 읽습니다.");
}
}
</script>
</body>
</html>
생성된 객체는 console.dir()로 확인이 가능하다. 속성과 기능의 경우에는 해당 내용을 할당연산자를 통해서 변경할 수 있다. 예를 들어 book.color = "blue";를 작성하게 되면 객체 안의 color가 blue로 변경된다.
객체 값 가져오기
- 객체명.속성key : 마침표 표기법
- 객체명["속성key"] :대괄호 표기법(bracket expression)
<!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>
let obj = {
val1 : "abcd",
val2 : 23,
val3 : true
}
// 1. 객체명.속성key
console.log(obj.val2); //23
// 2. 객체명["속성key"]
console.log(obj["val3"]); //true
// 속성 key를 다양하게 표현할 수 있다.
let num = 1;
console.log(obj[`val${num}`]); //abcd
num++;
console.log(obj[`val${num}`]); //23
// 속성key가 없어도 속성을 설정해서 값을 넣으면 객체에 속성이 들어감.
obj.val4 = "2";
console.log(obj); // {val1: 'abcd', val2: 23, val3: true, val4: '2'}
</script>
</body>
</html>
객체 대상 명령문
with
- with(객체명){};
한 객체에 대해서 여러 개의 속성키를 사용해야할 때 하나로 묶어서 사용할 수 있는 방법이다. 그러나 속성키에 대한 객체명 파악이 어려운 점이 있어서 잘 사용하지 않는다.
delete
- delete 객체명.속성key;
객체 속성을 삭제하는 경우에 사용한다. 객체는 삭제가 불가능 하다.
<!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>
let obj = {
val1 : "abcd",
val2 : 23,
val3 : true
}
with(obj){
console.log(val1); //abcd
console.log(val3); //true
}
delete obj.val2;
console.log(obj); //{val1: 'abcd', val3: true}
</script>
</body>
</html>
객체에서의 프로퍼티
문자열과 변수를 조합하여 객체의 프로퍼티 이름으로 사용할 수 있다. 동적으로 데이터를 관리할 수 있지만, 난독화가 발생할 수 있다는 단점이 있다.
computed property name
표현식을 이용해 객체의 key값을 정의한다. key에 표현식을 사용하기 위해 대괄호([])를 사용하여 안에 표현식을 작성한다. 예측불가능한 수준에서 사용하게 되는 경우 머리로는 연산이 어려워진다는 단점이 있다.
<!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>
let item = "number";
let obj = {
[item]: 1,
[item + "pie"]: 3.14,
[item + "ten"]: 10
}
console.log(obj.number); //1
console.log(obj.numberpie); //3.14
console.log(obj.numberten); //10
// computed property name
let i = 0;
const obj2 = {
["주문번호" + ++i] : i,
["주문번호" + ++i] : i,
["주문번호" + ++i] : i,
}
console.log(obj2); //{주문번호1: 1, 주문번호2: 2, 주문번호3: 3}
console.log(obj2.주문번호2) //2
</script>
</body>
</html>
프로퍼티 이름 축약ECMA6 이후 부터 변수의 이름과 객체 프로퍼티의 이름이 같을 경우 반복적인 부분을 소거하여 축약할 수 있다.
<!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>
let a = 10;
let b = 20;
let val = "안녕";
const obj1 = {
// a:a , b:b, val:val 대신에 축약 가능
a, b, val
}
console.log(obj1.a); //10
console.log(obj1.val); //"안녕"
</script>
</body>
</html>
메서드 이름 축약
ECMA6 이후 부터 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>
const obj1 = {
// a : function(x,y){return x+y} 에서 함축해서 사용이 가능해졌다.
a(x, y) {
return x + y
}
}
console.log(obj1.a(3, 4)); //7
</script>
</body>
</html>'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript 기본형과 참조형의 차이에 대해 알아보자 (0) | 2024.07.23 |
|---|---|
| JavaScript의 getter와 setter 에 대해서 (0) | 2024.07.23 |
| JavaScript의 for문(for-in | for-of | forEach)에 대해 알아보자 (0) | 2024.07.23 |
| JavaScript의 기초 문법 : 배열 (0) | 2024.07.23 |
| JavaScript : 호이스팅이 무엇인가 ? (0) | 2024.07.22 |
| JavaScript의 기초 문법 : 함수 (0) | 2024.07.22 |
| JavaScript의 기초 문법 : 제어문 - 반복문(while / for) (0) | 2024.07.19 |
| JavaScript의 기초 문법 : 제어문 - 조건문 (if / switch-case) (0) | 2024.07.18 |