웹 프로그래밍/JavaScript

자바스크립트 객체

Backchus 2019. 8. 3. 07:11

객체 생성

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

객체 리터럴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 생성자 함수

1
2
3
4
5
6
7
8
9
10
11
12
13
// 빈 객체의 생성
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 생성자 함수를 호출하여 빈 객체를 생성할 수 있습니다. 빈 객체 생성 이후 프로퍼티 또는 메소드를 추가하여 객체를 완성 하는 방법입니다.

생성자 함수

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

 

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

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

읽기

1
2
3
4
5
6
7
8
9
var foo = {
  name"foo",
  major: "computer science"
};
 
console.log(foo.name); // foo
console.log(foo["name"]); // foo
console.log(foo.nickname); // undefined
 
 

추가/삭제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var myFriend = { key : "value", key2 : "value" };
console.log(myFriend);
 
// 객체 속성 추가
myFriend["name"= "crong";
console.log(myFriend["name"]);
 
console.log(myFriend.age);
 
// 객체 속성 삭제
delete myFriend["key2"];
console.log(myFriend);
 

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

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

 

객체의 탐색

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 객체 리터럴을 통한 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

자바스크립트는 객체(object)기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”은 객체이다. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다. 객체는 데이터와 그 데이터에 관련되는 동작(절차,방법,기능)을 모두 포함할 수 있는 개념적 존재이다. 달리 말해, 이름과 값을 가지는 데이터를 의미하는 프로퍼티(property)와 동작을 의미하는 메소드(method)를 포함하고 있는 독립적

poiemaweb.com

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

 

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

들어가기 전에 자바스크립트 객체는 key와 value로 이루어진 dictionary 자료구조입니다. 간단한 형태로 아주 많이 사용되고 있으니 그 사용법을 잘 알아보도록 하겠습니다.... - moons

www.edwith.org

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