📖 객체(object)란?
여러종류의 데이터를 묶음으로 관리하는 정렬되지 않은 집합이다.
1. 객체의 특징
- 객체에는 Property가 있으며, 이는 배열의 요소와 같다.
- 이러한 프로퍼티는 key와 value로 이루어져 있다.
{name(key): ‘김코드'(value), isDeveloper(key): true(value)} - 프로퍼티의 값이 함수일 경우, method(메서드)라고 부른다.
-
객체의 경우 자바스크립트 내부에서 오브젝트를 저장할 때 프로퍼티의 순서까지 저장되진 않아서 순서대로 출력되지 않는다.
-
이는 배열과 다른 특징으로, 객체에는 index가 없다고 볼수 있다. (즉, 순서가 없음)
2. 객체를 생성하는 방법
(1) Object() 객체 생성자 함수 사용
- 자바스크립트에 내장되어 있는 Object() 생성자 함수를 사용하는 방법
//빈 객체를 생성한다.
let myObj = new Object();
//생성된 객체에 프로퍼티를 할당한다.
myObj.name = '김코드'
myObj.location = 'south korea'
myObj.sayHello = function(){
console.log('Hello' + this.name);
}
console.log(myObj);(2) Object Literal - ⭐️⭐️⭐️
- 객체를 생성하는 방법중 중괄호를 이용해 만드는 방식을 Object Literal라고 한다.
- 객체를 생성할 때 가장 많이 쓰이는 방법이며, 그 이유는 리터럴 방식은 프로퍼티가 한 곳에 모여 있기 때문에 한눈에 보고 파악할 수 있으므로 직관적이라 볼 수 있기 때문이다.
//객체이름
let myself = {
name: 'code kim',
// 객체 내부에 중첩된 객체
location: {
country: 'south korea',
city: 'seoul'},
age: 30,
// 배열이 값으로도 들어갈 수 있음
cats: ['냥순', '냥돌']
}
//참고: 오브젝트안에 있는 키의 벨류 = 오브젝트(3) 생성자 함수 사용
- 함수를 통해 객체를 생성하는 방식이다.
- 이 방식은 하나의 함수를 만든 뒤 해당 함수 내부에 여러 개의 객체를 만든다. 그 후 객체 생성시 필요한 값들을 함수의 매개변수로 준다.
function person(name, age){
this.name = name;
this.age = age;
this.sayHello = function(){
console.log('Hello'+ this.name);
}
};
let person1 = new Person('a', 20);
let person2 = new Person('b', 30);
let person3 = new Person('c', 28);3. 객체에 저장된 데이터에 접근하기
-
객체의 저장된 데이터에 접근하는 방법으로는 key를 이용해서 접근할 수 있다.
-
키를 이용해 접근하는 방법은 아래와 같이 2가지 방법이 있다.
(1) Dot notation
-
.을 이용해 접근한다.
->객체이름.키네임입력 -
위와 같이 입력 시 키에 접근 후 벨류를 출력한다.
(2) Bracket notation
- 대괄호를 이용해서 접근한다.
->객체이름[’키네임’]
✔️ 키에 접근하는 방법으로 변수에도 할당이 가능하다.
→let 변수이름 = 객체이름[’키네임’]✅ Dot과 Bracket의 차이점
-
-
Dot
- 키가 숫자로 시작되거나,띄어쓰기가 포함된 경우 접근 불가
- 프로퍼티 키에 변수가 포함되어 있을 경우 접근 불가
- 키에 숫자로 시작, 띄어쓰기 포함은 접근 불가
- 프로퍼티 키에 변수가 포함되어있으면 접근 불가
-
Bracket
- Dot의 모든 항목에 제한이 없다.
마지막, 객체가 필요한 이유!
- 배열 내 요소들은 인덱스로만 구분되지만, 객체의 프로퍼티는 키와 값으로 구성되기 때문에 데이터를 직관적으로 저장하고 불러올 수 있다.
- 객체 내부에 프로퍼티와 메서드로 구성하여 데이터와 동작을 하나의 단위로 구조화할 수 있다.
- 연관된 정보를 하나의 객체를 통해 관리할 경우, 코드 유지보수에도 편리하다.
❌ 객체 사용 시 주의점
- 객체에 key로 접근 시, 자바스트립트 키는 기본적으로 스트링으로 되어있는데 Bracket으로 객체의 키(스트링타입)를 변수에 담아 사용할 수 있다.
- 그러나 Dot notation으로는 위처럼 변수 사용이 불가하기 때문에 이 점을 주의하자! (Dot은 키가 값으로 왔을 때 변수라고 생각하지 않고 키라고 생각함)
객체 사용 예시
//💚변수를 사용한 객체 속성 접근
function objectVariables() {
let testObj = {
12: "Namath",
16: "Montana",
19: "Unitas"
};
let playerNumber = 16; //여기
let player = testObj[playerNumber]; //여기
return player;
}
console.log(objectVariables())
===
//💚객체 속성 추가
function addProperty() {
let myDog = {
"name": "Happy Coder",
"legs": 4,
"tails": 1,
"friends": ["Wecode Bootcamp"]
};
myDog.bark = 'woof'; //여기
return myDog;
}
console.log(addProperty())
===
//💚객체 속성 삭제
function deleteProperty() {
let myDog = {
"name": "Happy Coder",
"legs": 4,
"tails": 1,
"friends": ["Wecode Bootcamp"],
"bark": "woof"
};
delete myDog.tails; //여기
return myDog;
}
console.log(deleteProperty())
===
//💚객체 안에 객체 접근
function accessObject() {
let myStorage = {
"car": {
"inside": {
"glove box": "maps",
"passenger seat": "crumbs"
},
"outside": {
"trunk": "jack"
}
}
};
//여기
let gloveBoxContents = myStorage.car.inside['glove box']
return gloveBoxContents;
}
console.log(accessObject())
===
//💚객체 안에 배열 속 접근
function accessArray() {
let myPlants = [{
type: "flowers",
list: [
"rose",
"tulip",
"dandelion"
]
},
{
type: "trees",
list: [
"fir",
"pine",
"birch"
]
}
];
let foundValue = myPlants[1].list[1] //여기
return foundValue;
}
console.log(accessArray())