javascript 기초부시기 - 데이터 타입 - object(객체) 1

1. 객체

 

자바스크립트는 객체 기반의 스크립트 언어이기 때문에 자바스크립트를 이루고 있는 거의 모든것이 객체다.

 

원시타입(boolean,null, undefined, number, string, symbol)을 제외한 나머지 값(함수, 배열, 정규표현식) 등은 전부 객체이다.

 

객체는 key(키)와 value(값)로 구성된 property의 집합이다. 

 

value는 자바스크립트에 존재하는 모든 값을 사용할 수 있으며, 함수를 value로 사용할 경우 일반 함수와 구분하기 위해

 

메소드라고 부른다.

 

1.1 프로퍼티(property)

 

프로퍼티에 키(key)는 빈 문자열을 포함하는 모든 문자열 또는 symbol 값만 정의할 수 있으며, symbol로 정의 시 문자열로 자동 변경된다. 값(value)는 모든 값을 정의할 수 있다.

또한 배열과 다르게 객체는 열거할때 순서를 보장하지 않는다. 객체의 순서가 보장되어야한다면 Map객체를 사용하는것이 좋다.

 

2. 객체 생성

 

2.1 객체 리터럴

var emptyObject = {};
console.log(typeof emptyObject); // object

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

person.sayHello(); // Hi! My name is Lee
console.log(person.age) //16

 

가장 일반적인 객체 생성방법으로 {}를 선언하여 생성하는 방식이다. 선언 후

 

person.age = 16

 

과 같이 객체에 프로퍼티를 쉽게 추가 할 수 있으며, 

 

person.name = 'kim'

 

으로 기존 프로퍼리를 수정하는 것도 가능하다.

 

2.2 Object 생성자 함수

 

//생성자 함수로 객체 생성
ver person = new Object()
//프로퍼티 추가
person.name = 'Kim';
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 Kim

 

Object 생성자 함수를 통해 객체를 생성하고 프로퍼리를 나중에 추가하는 방식이다. 위의 2.1의 객체 리터럴은 Object 생성자 함수로 생성한 객체의 축약 표현이다. 이 두가지방식은 같은 키를 가지고 값이 다른 객체를 추가하기 힘든 단점이 있다.

 

2.3 생성자 함수

 

//생성자 함수
function Person(name, gender) {
  this.name = name;
  this.gender = gender;
  this.sayHello = function(){
    console.log('My name is ' + this.name);
  };
}

// 인스턴스의 생성
var person1 = new Person('Lee', 'male');
var person2 = new Person('Kim', 'female');

console.log(person1.name) // Lee
person2.sayHello() //My name is Kim

 

생성자 함수를 사용하면 같은 키를 가진 객체들을 간편하게 생성할 수 있다. 생성자 함수의 특징으로는

1. 생성자 함수는 다른 함수와 구분을 위해 대문자로 시작하는것이 좋다. 

2. 프로퍼티 또는 메소드앞에 this는 생성자 함수가 생성할 인스턴스를 가르킨다.

3. this에 연결되어 있는 프로퍼티와 메소드는 public하여, 외부에서 참조가 가능하다.

4. 생성자 함수 내에서 선언된 일반 변수는 생성자 함수 내에서는 자유롭게 접근할 수 있지만, 외부에서는 참조가 불가능하다. 

 

 

function Person(name) {
  // new없이 호출하는 경우, 전역객체에 name 프로퍼티를 추가
  this.name = name;
};

// 일반 함수로서 호출되었기 때문에 객체를 암묵적으로 생성하여 반환하지 않는다.
// 일반 함수의 this는 전역객체를 가리킨다.
var me = Person('Lee');

console.log(me); // undefined
console.log(window.name); // Lee

 

만약 생성자 함수를 호출할때 new를 사용하지않으면 일반 함수로 취급되기 때문에 this는 전역객체(브라우저 환경에서는 window)를 가르키고 name은 window에 바인딩 된다. 이런 실수를 방지하기 위한 패턴은 아래와 같다.

 

// Scope-Safe Constructor Pattern
function A(arg) {
  // 생성자 함수가 new 연산자와 함께 호출되면 함수의 선두에서 빈객체를 생성하고 this에 바인딩한다.

  /*
  this가 호출된 함수(arguments.callee, 본 예제의 경우 A)의 인스턴스가 아니면 new 연산자를 사용하지 않은 것이므로 이 경우 new와 함께 생성자 함수를 호출하여 인스턴스를 반환한다.
  arguments.callee는 호출된 함수의 이름을 나타낸다. 이 예제의 경우 A로 표기하여도 문제없이 동작하지만 특정함수의 이름과 의존성을 없애기 위해서 arguments.callee를 사용하는 것이 좋다.
  */
  if (!(this instanceof arguments.callee)) {
    return new arguments.callee(arg);
  }

  // 프로퍼티 생성과 값의 할당
  this.value = arg ? arg : 0;
}

var a = new A(100);
var b = A(10);

console.log(a.value);
console.log(b.value);

 

이번 포스트는 객체를 생성하는 방법에 대해 알아보았고 다음 포스트에서는 객체의 생성하거나 삭제 하는 방법들을 작성하겠다.

 

 

출처: https://poiemaweb.com/js-object