[Javascript] 객체(Object)란? 선언법과 추가,삭제,수정 방법

객체(Object)란?

• Javascript는 객체기반 스크립트 언어로 javascript를 이루고 있는 거의 모든 것은 객체이다.
• 객체(Object) : 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입

 

❤️ 객체의 특징

• 중괄호를 사용해서 선언 { }
• 객체 내에는 key-value 쌍으로 자료를 넣을 수 있다.
• key-value로 묶인 한 쌍을 객체 property(프로퍼티) 라고 명명한다.
• 객체 프로퍼티는 개수 제한이 없다.
• key는 문자열로만 구성될 수 있으며, 따옴표를 쓰지 않는다.
• value에는 어떤 자료형이든 들어갈 수 있다.
• 객체를 복사하면 참조가 복사되고 객체는 복사되지 않는다.

 

 

 

---

객체 선언방법

1. 객체 리터럴

const person = {
	name : "oneyenee",
	age : 27
};

중괄호를 사용해서 객체를 선언하는 방법. 내부에 properties를 함께 선언할 수 있음.

 

 

2. new 생성자 방식

const obj = new Object(); // {}

function person(name, age) {
	this.name = name;
	this.age = age;
}

const person1 = new person("oneyenee", 27);

빈 객체를 생성. person을 콘솔에 출력하면 { }로 빈 객체를 반환함.

 

 

💡

객체 const 선언시 프로퍼티를 추가하거나 수정 등의 행위는 가능함.
상수인 객체를 수정하는 것이 아니라 상수가 갖고있는 object를 수정하는 행위이기 때문.

 

const person = {
	name : "oneyenee"
}

person.age = 27 // 가능

person = {
	name = "oneyenee",
	age = 27
} // 불가능

 

---

 

객체 접근법

1. 점 표기법

const person = {
	name : "oneyenee",
	age : 27
};

person.name // "oneyenee"

person.gender // undefined

• 객체명.key값
• 해당 객체의 key값이 동일한 property의 value를 가져올 수 있음
• 존재하지 않는 Property에 접근하려고 하면 undefined 반환

 

 

2. 괄호 표기법

const person = {
	name : "oneyenee",
	age : 27
};

person["name"] // "oneyenee"

function getPropertyValue(key) {
	return person[key]
}

getPropertyValue("age") // 27
getPropertyValue("name") // "oneyenee"

• 객체명[ "key값" ]
• property의 key를 반드시 문자형으로 작성해야하며 따옴표를 같이 사용해야 함
• 동적인 파라미터를 받아서 객체의 프로퍼티에 접근하는 경우에 많이 사용함 (getPropertyValue 와 같은 함수)

 

 

---

Member와 Method

객체 내부에는 어떤 자료형이든 들어갈 수 있으며, 그 안에는 배열이나 또다른 객체 또는 함수와 같은 자료형도 모두 가능하다.

• Method : 객체 내부에서 선언된 함수
• Member : 함수가 아닌 property

const person = {
	name : "oneyenee", // Member
    age : 27, // Member
    say : function() {  // Method
        console.log(`hi, my name is ${this.name}`);
    }
}

person.say() // "hi, my name is oneyenee"

 

 

---

 

객체 Property 추가 / 수정 / 삭제

추가 / 수정

const person = {
	location : "korea",
	gender : "female"
}

person.location = "USA"; // 수정
person.name = "oneyenee"; // 추가

console.log(person) // {location : "USA", gender : "female", name : "oneyenee" }

 

 

삭제

delete person.location;
delete person["name"];

console.log(person); // {gender : "female"}

 

추가, 수정, 삭제 모두 점 표기법 / 괄호 표기법으로 접근 가능함.

 

 

---

 

Property key값이 존재하는지 확인하는 방법

객체에 존재하지 않는 property에 접근하는 것은 추가할 것이 아니라면 하지 않는 것이 베스트

따라서 key값이 존재하는지 확인하는 절차가 필요할 수 있음.

in 연산자를 사용한 방법

const person = {
	name = "oneyenee",
	age = 27
}

"gender" in person // false
"name" in person // true