[TIL / JavaScript] 객체 (1)

Changyun Go·2021년 7월 30일

[JavaScript] 객체

JavaScript는 대부분이 객체(object)로 이루어진 언어이다.
연관된 데이터를 담아내는 그릇이라는 점에서 배열과 유사하지만, 객체는 원하는 형태로 식별자를 지정할 수 있다는 점에서 차이가 있다.
객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다.
객체는 데이터(프로퍼티)와 그 데이터에 관련되는 동작(메소드)을 모두 포함할 수 있기 때문에 데이터와 동작을 하나의 단위로 구조화할 수 있어 유용하다.

프로퍼티와 메소드

프로퍼티

객체에서 데이터를 의미한다.
key(이름)와 value로 구성되며 key는 프로퍼티를 식별하기 위한 식별자(identifier)다.
프로퍼티 키의 명명 규칙과 프로퍼티 값으로 사용할 수 있는 값은 아래와 같다.
- 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값
- 프로퍼티 값 : 모든 값
프로퍼티 키에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된다.
존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.

var grades = {'egoing': 10, 'egoing': 6, 'sorialgi': 80};
for(key in grades) {
    console.log(grades[key]);
}
/* 6
   8 */

메소드

객체에서 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미한다.
프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다.

객체 생성 방법

객체 리터럴

중괄호를 내에 1개 이상의 프로퍼티를 기술하면 해당 프로퍼티가 추가된 객체를 생성할 수 있다.
{} 내에 아무것도 기술하지 않으면 빈 객체가 생성된다.

var grades = {'egoing': 10};

위 코드에서 'egoing'은 key가 되고, 10은 value가 된다.

Object 생성자 함수

new 연산자와 ****Object 생성자 함수를 호출하여 빈 객체를 생성하고 프로퍼티 또는 메소드를 추가하여 객체를 완성하는 방법이다.
일반 함수와 구분하기 위해 생성자 함수의 이름은 파스칼 케이스(PascalCase)를 사용하는 것이 일반적이다

// 빈 객체의 생성
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

JavaScript 엔진은 객체 리터럴로 객체를 생성하는 코드를 만나면 내부적으로 Object 생성자 함수를 사용하여 객체를 생성한다.→ 개발자가 일부러 Object 생성자 함수를 사용해 객체를 생성해야 할 일은 없다.

생성자 함수

객체 리터럴 방식과 Object 생성자 함수 방식으로 객체를 생성하는 것은 프로퍼티 값만 다른 여러 개의 객체를 생성할 때 불편하다.

var person1 = {
  name: 'Lee',
  gender: 'male',
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);  // Hi! My name is Lee
  }
};

var person2 = {
  name: 'Kim',
  gender: 'female',
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);  // Hi! My name is Kim
  }
};

생성자(constructor) 함수를 사용하면 마치 객체를 생성하기 위한 템플릿처럼 사용하여 프로퍼티가 동일한 객체 여러 개를 간편하게 생성할 수 있다.
생성자 함수 이름은 일반적으로 대문자로 시작한다.
함수를 호출할 때 new라는 키워드를 붙이면 생성자 함수처럼 동작한다. → 새로운 객체를 만든 후에 이를 return한다.
프로퍼티 또는 메소드 앞에 기술한 this는 생성자 함수 자신을 가리킨다.

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

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

console.log('person1: ', typeof person1);  // object
console.log('person2: ', typeof person2);  // object
console.log('person1: ', person1);  
// Person {name: "Lee", gender: "male", sayHello: ƒ}
console.log('person2: ', person2);  
// Person {name: "Kim", gender: "female", sayHello: ƒ}

person1.sayHello();  // Hi! My name is Lee
person2.sayHello();  // Hi! My name is Kim

1) Person 옆에 (name, gender)는 처음 만들 때 매개변수를 받는 부분이다.

2) 받은 매개변수들을 this.name, this.gender에 저장한다.

3) this에 저장된 것들은 new를 통해 객체를 만들 때 그 객체(인스턴스)에 적용된다.

생성자 함수를 사용하여 프로퍼티와 메소드를 간결하게 줄일 수 있다. → 코드의 재사용성이 향상된다.
JavaScript에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자다.

P.S.

객체에 들어가면서 한 번에 이해되지 않는 내용이 생기기 시작했다. 특히 새로운 용어들이 꼬리에 꼬리를 물기 때문에 다 찾아보려면 끝이 없다는 것을 깨닫고😂 적당히 끊어가면서 당장 이해하는 데에 필요한 부분만 공부하고 나머지는 나중에 찾아보는 요령이 생겼다.

참고 문서

Changyun Go

이전 포스트

[TIL / JavaScript] 배열 (2)

다음 포스트