객체란 이름(key, name)과 값(value)로 구성된 프로퍼티의 집합
자바스크립트에서는 원시타입(primitive type)을 제외한 모든 것이 객체(Object)로 정의된다. 정의는 그렇게 되지만, 값이 정해진 객체로 취급 되기 때문에 객체로서의 특징도 가지게 된다.
자바스크립트에서는 두 가지 방법으로 객체의 프로퍼티를 참조할 수 있다.
let obj = {
cat: "meow",
dog: "woof"
};
console.log(obj.cat);
console.log(obj.dog);
위와 같이 objectName.propertyName으로 사용할 수 있고, 어떠한 객체의 Key값을 정확히 알고 있을때 사용할 수 있는 방법이다.
let obj = {
cat: "meow",
dog: "woof"
};
console.log(obj[cat]);
console.log(obj[dog]);
Dot Notation과 사용법은 비슷하지만 가장 중요한 차이점은 Bracket 안에 변수를 담을 수 있다.
위 코드는 실제로 Bracket안에 cat이 담겨져 있는 것처럼 보이지만, cat이란 변수를 사용함으로써 실제 코드는 obj["cat"]이란 내용이 담겨져 있게 된다.
이런 방식은 주로 함수의 파라미터로 객체의 프로퍼티를 참조하고 싶을때 사용하는 방법이다.
const obj = {
cat: "meow",
dog: "woof"
};
function animal(obj, property) {
return obj[property]
}
let catSound = animal(obj, "cat");
let dogSound = animal(obj, "dog");
console.log(catSound); //"meow"
sonsole.log(dogSound); //"woof"
객체의 메소드를 참조할때 메소드 뒤에 괄호()를 붙이지 않으면, 메소드가 아닌 프로퍼티 그 자체를 참조하게 된다.
const obj = {
cat: "meow",
dog: "woof",
animal : function() {
return `현재 동물은 ${this.cat}과 ${this.dog}가 있습니다.`;
};
obj.animal() // 현재 동물은 cat과 dog가 있습니다.
obj.animal //function() { return `현재 동물은 ${this.cat}과 ${this.dog}가 있습니다.`; }
객체의 프로퍼티를 추가할때는 기존의 프로퍼티를 참조할때 쓰던 방식으로 추가하고 싶은 프로퍼티를 아래와 같이 사용할 수 있다.
const obj = {
cat: "meow",
dog: "woof,
};
obj.cow = "moo",
obj["pig"] = "oink";
console.log(obj.cat) // meow
console.log(obj.pig) // oink
삭제시에는 delete라는 키워드를 사용해 가능하다.
const obj = {
dat: "meow",
dog: "woof",
};
delete obj.cat;
console.log(obj.cat) // undefined
기존에 객체의 key 값에 새로운 claue값을 선언하면 수정이 가능하다.
const obj = {
cat: "meow",
dog: "woof",
};
obj.cat = "mew"
console.log(obj.cat) //mew
in 연산자를 사용해 객체의 프로퍼티가 존재하는지 확인할 수 있다.
Boolean 값으로 결과를 return 한다.
const obj = {
cat:"moew",
dog:"woof"
};
console.log("cat" in obj); //true
console.log("cow" in obj); //false
for...in 반복문을 통해 객체의 모든 key, value에 접근할 수 있다.
const obj = {
cat: "moew",
dog: "woof"
};
for(let key in obj) {
console.log(`key는 ${key}, value는 ${obj[key]}입니다.`);
}
// key는 cat, value는 meow입니다.
// key는 dog, value는 woof입니다.
객체를 생성하는 방법에는 위에 있는 방식말고 new 키워드와 생성자를 활용하는 방법이 있다.
new키워드를 사용해 Object 생성자 함수를 호출하면 비어있는 객체를 얻을 수 있다.
let animal = new Object();
animal.cat = "meow";
animal.dog = "woof;
animal.cow = "moo";
console.log(animal.cat) // "meow"
console.log(animal.dog) // "woof"
console.log(animal.cow) // "moo"
생성자 함수를 사용하면 Java의 Class처럼 빈 객체 틀을 만들 수 있다. 기존 function에 new 연산자를 붙여서 호출하게 되면, 해당 function은 생성자 함수의 역할을 하게 된다.
보통 일반함수와 생성자 함수를 구별하기 쉽게 첫 문자를 대문자로 표기해서 구별한다.
function Animal(name, sound) {
//this = {}; //빈 객체로 암시적으로 생성
//새로운 프로퍼티를this에 추가
this.name = name;
this.sound = sound;
//return this;
}
let cat = new Animal("cat", "meow");
let dog = new Animal("dog", "woof");
console.log(`이 동물은 ${cat.name}이고 ${cat.sound}라는 소리를 냅니다.`);
console.log(`이 동물은 ${dog.name}이고 ${dog.sound}라는 소리를 냅니다.`);
//이 동물은 cat이고 meow라는 소리를 냅니다.
//이 동물은 dog이고 woof라는 소리를 냅니다.
리터럴과 newObject()로 생성하는 것과 달리, 같은 속성을 가진 객체를 여러개 생성할 수 있게 된다.