javaScript - 객체(Object)

객체(Object)

서로 연관된 변수와 함수를 그룹핑하고 이름을 붙인 것. 객체는 한꺼번에 여러 값을 담을 수 있는 통(container)와 같은 자료구조. 객체 안에는 이름-값 쌍(name-value pair)가 저장되는데, 이를 객체의 속성(property)라고 함. 

const person = {
  name : "devSsom",                    // 속성 이름 = 'name', 속성값 = devSsom
  age : 31                             // 속성 이름 = 'age', 속성값 = 31
  language : ["javaScript", "python"], // 속성 이름 = 'language', 속성값 = 배열
};

위에서 person 변수에 할당된 객체에는 3개의 속성이 저장되었음. 

 

 

객체 다루기

속성 접근자, delete 연산자, in 연산자 등을 이용해서 객체에 대한 정보를 읽고 쓸 수 있음.

// 속성 읽기
person.name; // devSsom
person.age;  // 31
person.language[0]; // javaScript

// 속성 수정하기
person.name = "devBrother";
person.age = 29;

// 새 속성 추가하기
person.address = "충남 태안";

// 속성 삭제하기
delete person.address;

// 속성이 객체에 존재하는지 확인하기
'name' in person;        // true
'phoneNumber' in person; // false

for in 반복문으로 객체를 순회할 수 있음.

const superman = {
  name : 'clark',
  age : 33,
}

// Object - 프로퍼티 존재 여부 확인

superman.birthDay;    // undefined
'birthDay' in superman;    // false
'age' in superman;    //true


// for in 반복문으로 객체 순회

for(let key in superman) {
    console.log(key)
    console.log(superman[key])
}

 

 

객체 메소드(Method)

객체의 속성값으로 함수를 지정할 수도 있음.

const person = {
  greet : function() {
    return "hello";
  }
};

person.greet(); // hello

위와 같이 어떤 객체의 속성으로 접근해서 사용하는 함수를 메소드라고 부름. 위의 예제와 완전히똑같이 작동하지만, 아래처럼 메소드를 정의할 수도 있음. 

const person = {
  greet() {
    return "hello";
  }
};

person.greet(); // hello

 

this

다른 함수들과 다르게 '메소드'라는 특별한 이름을 사용하는 이유는, 메소드가 다른 함수들과는 다르게 특별히 취급되기 때문임. this 키워드를 사용하면, 메소드 호출 시에 해당 세모드를 갖고 있는 객체에 접근할 수 있음.

 

const person = {
  name : 'devSsom',                    
  age : 31                            
  language : ['javaScript', 'python'],
  introduce() {
    return "안녕? 내 이름은 ${this.name}이야. 나이는 {$this.age}살이고. 만반잘부!"
  },
  getOlder() {
    this.age++;
  }
};

person.introduce(); // 안녕? 내 이름은 devSsom이야. 나이는 31살이고. 만반잘부!
person.getOlder();  // undefined
person.introduce(); // 안녕? 내 이름은 devSsom이야. 나이는 32살이고. 만반잘부!

메소드를 사용하면 데이터와 그 데이터와 관련된 동작을 객체라는 하나의 단위로 묶어서 다룰 수 있음. 그래서 함수 대신 메소드를 사용함. 

 

 

주의할 점은, function 키워드를 통해 정의된 함수 내부의 this 키워드가 실제로 무엇을 가리킬 것인가는, 메소드를 어떻게 정의하는지로 결정되는 것이 아니라, 메소드를 어떻게 사용하는지로 결정됨. 

function introduce() {
  return "안녕? 내 이름은 ${this.name}이야.";
}

const person1 = {
  name : "devSsom";,
  introduce
};

const person2 = {
  name : "devBrother";,
  introduce
};

person1.introduce();  // 안녕? 내 이름은 devSsom이야.
person2.introduce();  // 안녕? 내 이름은 devBrother이야.

 이렇게 introduce라는 함수가 객체 외부에서 정의되었고, person1과 person2에서 재사용되었는데도 불구하고 메소드가 잘 동작함. 즉, 같은 함수임에도 불구하고 어떤 객체의 메소드로 사용되느냐에 따라 메소드 내부의 this가 카리키는 객체가 달라질 수 있음.