JavaScript 객체

1 개념

JavaScript Object

자바스크립트 객체

• 객체도 변수와 동일하지만 여러가지 값을 담을 수 있는 변수라 생각하면 됨
• 자바스크립트에서 객체(속성과 행위를 가지는 것)를 만들어 사용할 수 있음
• 문자, 숫자, 함수, 객체 등 모든 것들이 객체가 될 수 있음
• {, } 사이에 기입
• name : value 의 쌍으로 입력 가능

2 프로퍼티

• {}를 통해 name과 age의 프로퍼티를 가지는 객체 생성 및 초기화

var person = {name:JohnJeong, age:45};
var person2 = {name:jmnote, age:35};

3 프로퍼티+메소드

• {}를 통해 name과 color의 프로퍼티와 bark메소드를 가지는 객체 생성 및 초기화

var dog = {
  name: "Snoopy",
  color: "white",
  bark: function bark() {
    console.log("Woof!");
  }
};
console.log( dog.name );
// Snoopy
dog.bark();
// Woof!

4 new

• new 키워드를 통해 Dog 객체 생성
• Dog() 함수는 객체를 만드는 생성자 (constructor)가 됨

function Dog(name) {
  this.name = name;
  this.bark = function() {
    console.log("Woof!");
  }
}
var myDog = new Dog("snoopy");
myDog.bark();
// Woof!

5 new Object()

• new Object() 키워드를 통해 객체 생성
• {}와 동일함

var dog = new Object();
dog.name = "Woody";
dog.age = 5;

var dog = {};
dog.name = "Woody";
dog.age = 5;

6 예시

function Dog(name) {
  this.name = name;
  this.bark = function() {
    console.log("Woof! I'm " + this.name +".");
  }
}
var myDog = new Dog("Snoopy");
myDog.bark();
// Woof! I'm Snoopy.

var Dog = function(name) {
  this.name = name;
}
Dog.prototype.bark = function() {
  console.log("Woof! I'm " + this.name +".");
}
var myDog = new Dog("Snoopy");
myDog.bark();
// Woof! I'm Snoopy.

var Dog = function(name) {
  var name;
  var Dog = {
    name: name,
    bark: function() {
      console.log("Woof! I'm " + this.name +".");
    }
  }
  return Dog;
}
var myDog = new Dog("Snoopy");
myDog.bark();
// Woof! I'm Snoopy.

7 같이 보기

• 객체
• DOM
• New_object
• JavaScript 자료형
• JavaScript 클래스
• JavaScript 프로토타입
• 자바스크립트 window 객체
• 자바스크립트 document 객체
• 자바스크립트 location 객체
• 자바스크립트 Audio 객체
• JavaScript 객체를 배열로 변환
• JavaScript 배열을 객체로 변환

8 참고

• http://www.w3schools.com/js/js_objects.asp