객체란?
객체란 이름(key, name)과 값(value)로 구성된 프로퍼티의 집합
자바스크립트에서는 원시타입(primitive type)을 제외한 모든 것이 객체(Object)로 정의된다. 정의는 그렇게 되지만, 값이 정해진 객체로 취급 되기 때문에 객체로서의 특징도 가지게 된다.
객체의 프로퍼티 참조
자바스크립트에서는 두 가지 방법으로 객체의 프로퍼티를 참조할 수 있다.
- object.property (Dot Notation)
- object['property'] (Bracket Notation)
Dot Notation
let obj = {
cat: "meow",
dog: "woof"
};
console.log(obj.cat);
console.log(obj.dog);위와 같이 objectName.propertyName으로 사용할 수 있고, 어떠한 객체의 Key값을 정확히 알고 있을때 사용할 수 있는 방법이다.
- 프로퍼티는 알파벳만 가능하다.
- 변수는 사용 불가능하다.
- 특수문자는 사용 가능하다.
Bracket Notation
let obj = {
cat: "meow",
dog: "woof"
};
console.log(obj[cat]);
console.log(obj[dog]);Dot Notation과 사용법은 비슷하지만 가장 중요한 차이점은 Bracket 안에 변수를 담을 수 있다.
위 코드는 실제로 Bracket안에 cat이 담겨져 있는 것처럼 보이지만, cat이란 변수를 사용함으로써 실제 코드는 obj["cat"]이란 내용이 담겨져 있게 된다.
이런 방식은 주로 함수의 파라미터로 객체의 프로퍼티를 참조하고 싶을때 사용하는 방법이다.
- 프로퍼티 문자열 or 문자열을 참조하는 변수
- 변수 or 공백이 사용가능하다.
- 특수문자는 사용 불가능하다.
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 연산자)
in 연산자를 사용해 객체의 프로퍼티가 존재하는지 확인할 수 있다.
Boolean 값으로 결과를 return 한다.
const obj = {
cat:"moew",
dog:"woof"
};
console.log("cat" in obj); //true
console.log("cow" in obj); //false모든 프로퍼티 조회(for...in)
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 Object()와 생성자 함수
객체를 생성하는 방법에는 위에 있는 방식말고 new 키워드와 생성자를 활용하는 방법이 있다.
new Object()
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()로 생성하는 것과 달리, 같은 속성을 가진 객체를 여러개 생성할 수 있게 된다.
