자바스크립트 객체

객체 생성

자바스크립트에서 객체를 생성하는 방법은 Object() 생성자 함수를 이용하는 방법, 객체 리터럴 방식으로 생성하는 방법, 생성자 함수를 이용하는 방법 이렇게 3가지가 있습니다. 

객체 리터럴

var emptyObject = {};
console.log(typeof emptyObject); // object
 
var person = {
  name: "Lee",
  gender: "male",
  sayHello: function() {
    console.log("Hi! My name is " + this.name);
  }
};
 
console.log(typeof person); // object
console.log(person); // {name: "Lee", gender: "male", sayHello: ƒ}
 
person.sayHello(); // Hi! My name is Lee
 

가장 일반적인 자바스크립트의 생성방식입니다. 클래스 기반 객체지향 언어와 비교할때 간단히 생성할수있고 중괄호({})를 사용하여 생성할수있습니다.

Object 생성자 함수

// 빈 객체의 생성
var person = new Object();
// 프로퍼티 추가
person.name = 'Lee';
person.gender = 'male';
person.sayHello = function () {
  console.log('Hi! My name is ' + this.name);
};
 
console.log(typeof person); // object
console.log(person); // {name: "Lee", gender: "male", sayHello: ƒ}
 
person.sayHello(); // Hi! My name is Lee

new 연산자와 Object 생성자 함수를 호출하여 빈 객체를 생성할 수 있습니다. 빈 객체 생성 이후 프로퍼티 또는 메소드를 추가하여 객체를 완성 하는 방법입니다.

생성자 함수

함수를 이용하여 생성하는 방법인데 생성자패턴편에서 자세히 살펴보도록 하겠습니다.

 

객체 프로퍼티 읽기/추가/삭제

객체는 새로운 값을 가진 프로퍼티를 생성하고, 생성된 프로퍼티에 접근해서 해당 값을 읽거나 또는 원하는 값으로 프로퍼티의 값을 갱신할 수 있습니다.

읽기

var foo = {
  name: "foo",
  major: "computer science"
};
 
console.log(foo.name); // foo
console.log(foo["name"]); // foo
console.log(foo.nickname); // undefined

추가/삭제

var myFriend = { key : "value", key2 : "value" };
console.log(myFriend);
 
// 객체 속성 추가
myFriend["name"] = "crong";
console.log(myFriend["name"]);
 
myFriend.age = 34;
console.log(myFriend.age);
 
// 객체 속성 삭제
delete myFriend.key;
delete myFriend["key2"];
console.log(myFriend);

여기서 주의할 점은 대괄호 표기법에서는 접근하려는 프로퍼티 이름을 문자열 형태로 만들어야 한다는 것입니다.

foo['name'] 대신에 foo[name]이라고 접근하면 'foo'가 아닌 undefined가 출력됩니다.

 

객체의 탐색

for-in문을 사용하면, 객체에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있습니다.

// 객체 리터럴을 통한 foo 객체 생성
var foo = {
  name: "foo",
  age: 30,
  major: "computer science"
};
 
// for in 문을 이용한 객체 프로퍼티 출력
var prop;
for (prop in foo) {
  console.log(prop, foo[prop]);
}
 
// 결과
// name foo
// age 30
// major computer science

참고자료: https://poiemaweb.com/js-object

Object | PoiemaWeb

참고자료: https://www.edwith.org/boostcourse-web/lecture/16746/

[LECTURE] 2) 자바스크립트 객체 : edwith

참고자료: 인사이드자바스크립트(한빛미디어)