[Javascript] 자바스크립트 객체 - 정의, 참조, 생성, 삭제, 순회, 비교

Language/Javascript

[Javascript] 자바스크립트 객체 - 정의, 참조, 생성, 삭제, 순회, 비교

재은초 2023. 7. 19. 11:25

객체(object)란?

자바스크립트는 객체(object) 기반의 스크립트 언어이며, 원시 데이터 타입을 제외한 나머지 값들은 모두 객체이다.
자바스크립트 객체는 키(key)와 값(value)으로 구성된 프로퍼티(property)의 집합으로, 프로퍼티 값으로 함수를 포함한 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다.
이와 같이 객체는 데이터를 의미하는 프로퍼티(property)와 데이터를 참조하고 조작할 수 있는 동작을 의미하는 메소드(method)로 구성된 집합이다. 객체는 데이터(property)와 그 데이터에 관련되는 동작(method)을 모두 포함할 수 있기 때문에 데이터와 동작을 하나의 단위로 구조화할 수 있어 유용하다.
자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 “프로토타입”이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다. 이 프로토타입은 타 언어와 구별되는 중요한 개념이다.

프로퍼티(Property)란?
- 프로퍼티는 키(key)와 값(value)으로 구성된다. 프로퍼티는 프로퍼티 키로 유일하게 식별할 수 있으므로, 프로퍼티 키는 프로퍼티를 식별하기 위한 식별자(identifier)다.
- 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다. 배열과는 달리 객체는 프로퍼티를 열거할 때 순서를 보장하지 않는다.

메소드(Method)란?
- 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메소드라 부른다. 즉, 메소드는 객체에 제한되어 있는 함수를 의미한다.

var cat = "나비";                  // 일반적인 변수의 선언
var kitty = {                     // 객체도 많은 값을 가지는 변수의 하나
    name: "나비", 
    family: "코리안 숏 헤어", 
    age: 1, 
    weight: 0.1
};

cat                                // 나비
kitty.name                         // 나비

객체의 생성

Java 같은 클래스 기반 객체 지향 언어는 클래스를 사전에 정의하고 필요한 시점에 new 연산자를 사용하여 인스턴스를 생성하는 방식으로 객체를 생성한다. 하지만 JavaScript는 프로토타입 기반 객체 지향 언어로 클래스라는 개념이 없고 별도의 객체 생성 방법이 존재한다.
참고로 ECMAScript 6에서 새롭게 클래스가 도입되었는데, ES6의 클래스가 새로운 객체지향 모델을 제공하는 것은 아니며 클래스도 사실 함수이고 기존 프로토타입 기반 패턴의 문법을 쉽게한 것이다.

리터럴 표기를 이용한 객체의 생성

각각의 프로퍼티는 이름과 값을 콜론(:)으로 연결하고, 쉼표(,)를 사용해 다른 프로퍼티와 구분한다.

var 객체이름 = {
    프로퍼티1이름 : 프로퍼티1의값,
    프로퍼티2이름 : 프로퍼티2의값,
    ...
};

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 생성자를 이용한 객체의 생성

new 연산자와 생성자 함수를 사용하여 객체를 생성하고 초기화할 수 있는데, 빈 객체 생성 이후 프로퍼티 또는 메소드를 추가하여 객체를 완성하는 방법이다.
이 때 사용되는 메소드를 생성자(constructor)라고 하며 이 메소드는 새롭게 생성되는 객체를 초기화하는 역할을 한다.
객체가 소유하고 있지 않은 프로퍼티 키에 값을 할당하면 해당 객체에 프로퍼티를 추가하고 값을 할당한다. 이미 존재하는 프로퍼티 키에 새로운 값을 할당하면 프로퍼티 값은 할당한 값으로 변경된다.

생성자(constructor)와 인스턴스(instance)란?
- 생성자란 new 키워드와 함께 객체를 생성하고 초기화하는 함수를 말하며 생성자 함수는 일반 함수와 구분하기 위해서 보통 대문자로 표시한다.
- 생성자 함수를 통해 생성된 객체를 인스턴스(instance)라 한다.

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

생성자 함수를 이용한 객체의 생성

생성자 함수를 직접 만들어 사용하면 마치 객체를 생성하기 위한 템플릿(클래스)처럼 사용하여 프로퍼티가 동일한 객체 여러 개를 간편하게 생성할 수 있다.
Java와 같은 클래스 기반 객체지향 언어의 생성자와는 다르게 그 형식이 정해져 있는 것이 아니라, 기존 함수와 동일한 방법으로 생성자 함수를 선언하고 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다. 이는 생성자 함수가 아닌 일반 함수에 new 연산자를 붙여 호출하면 생성자 함수처럼 동작할 수 있다는 것을 의미한다.

this 키워드란?
- 자바스크립트에서 this 키워드는 해당 키워드가 사용된 자바스크립트 코드 영역을 포함하고 있는 객체를 가리키며, 생성자 함수에서는 생성할 인스턴스(instance)를 가리킨다.
- 메소드 내부에서 사용된 this 키워드는 해당 메소드를 포함하고 있는 객체를 가리키고, 객체 내부에서 사용된 this 키워드는 객체 그 자신을 가리킨다.
- this에 연결되어 있는 프로퍼티와 메소드는 public으로 외부에서 참조가 가능하며, 생성자 함수 내에서 선언된 일반 변수는 private으로 외부에서 참조가 불가능하다. 즉 생성자 함수 내부에서는 자유롭게 접근이 가능하나 외부에서 접근할 수 없다.

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

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

console.log(typeof person1);   // object
console.log(typeof person2);

console.log(person1);          // Person{name:'Lee', gender:'male', sayHello:[Function]}
console.log(person2);

console.log(person1.gender);  // 'male'
console.log(person2.married); // undefined

person1.sayHello();
person2.sayHello();

객체의 프로퍼티 키 참조

프로퍼티 키는 일반적으로 문자열을 지정하기에, 프로퍼티 키에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된다. 프로퍼티 키는 문자열이므로 ‘’ 또는 ““의 따옴표를 사용하지만, 자바스크립트에서 사용 가능한 유효한 이름인 경우 따옴표를 생략할 수 있다.

객체이름.프로퍼티이름
또는
객체이름["프로퍼티이름"]

var person = {
    name: "홍길동",        // 이름 프로퍼티를 정의
    birthday: "030219",  // 생년월일 프로퍼티를 정의
    pId: "1234567",      // 개인 id 프로퍼티를 정의
    fullId: function() { // 생년월일과 개인 id를 합쳐서 주민등록번호를 반환
        return this.birthday + this.pId;
    }
};

person.name    // 홍길동
person["name"] // 홍길동

프로퍼티 값은 모든 값과 표현식이 올 수 있으며 프로퍼티 값이 함수인 경우 이를 메소드라 한다.
메소드를 참조할 때 메소드 이름 뒤에 괄호()를 붙이지 않으면, 메소드가 아닌 프로퍼티 그 자체를 참조하게 되므로, 괄호를 사용하지 않고 프로퍼티 그 자체를 참조하게 되면 해당 메소드의 정의 그 자체가 반환된다.

객체이름.메소드이름()

var person = {
    name: "홍길동",
    birthday: "030219",
    pId: "1234567",
    fullId: function() {
        return this.birthday + this.pId;
    }
};

person.fullId() // 0302191234567
person.fullId;  // function () { return this.birthday + this.pId; }

객체의 프로퍼티 값 참조

객체의 프로퍼티 값에 접근하는 방법은 . 마침표 표기법과 [] 대괄호 표기법이 있다.
프로퍼티 이름이 유효한 자바스크립트 이름이 아니거나 예약어인 경우 프로퍼티 값은 대괄호 표기법으로 읽어야 한다. 대괄호([]) 표기법을 사용하는 경우, 대괄호 내에 들어가는 프로퍼티 이름은 반드시 문자열이어야 한다.
객체에 존재하지 않는 프로퍼티를 참조하면 undefined를 반환한다.

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male',
  1: 10
};

console.log(person);

console.log(person.first-name);    // NaN: undefined-undefined
console.log(person[first-name]);   // ReferenceError: first is not defined
console.log(person['first-name']); // 'Ung-mo'

console.log(person.gender);    // 'male'
console.log(person[gender]);   // ReferenceError: gender is not defined
console.log(person['gender']); // 'male'

console.log(person['1']); // 10
console.log(person[1]);   // 10 : person[1] -> person['1']
console.log(person.1);    // SyntaxError

객체의 프로퍼티 값 갱신

객체가 소유하고 있는 프로퍼티에 새로운 값을 할당하면 프로퍼티 값은 갱신된다.

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male',
};

person['first-name'] = 'Kim';
console.log(person['first-name'] ); // 'Kim'

객체의 프로퍼티 값 갱신

객체가 소유하고 있지 않은 프로퍼티 키에 값을 할당하면 하면 주어진 키와 값으로 프로퍼티를 생성하여 객체에 추가한다.

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male',
};

person.age = 20;
console.log(person.age); // 20

객체 프로퍼티 삭제

자바스크립트에서는 delete 키워드를 사용하여 객체의 프로퍼티를 삭제할 수 있는데, delete 키워드를 사용하여 프로퍼티를 삭제하면 프로퍼티의 값뿐만 아니라 프로퍼티 그 자체도 삭제된다.
이 키워드는 본래 객체의 프로퍼티만을 삭제하기 위해 만들어졌기 때문에 함수나 변수에 사용하면 아무런 동작도 하지 않는다.

delete 객체이름.프로퍼티이름;

function Dog(color, name, age) {
    this.color = color;
    this.name = name;
    this.age = age;
}

var myDog = new Dog("흰색", "마루", 1);
delete myDog.age;                             // age 프로퍼티를 삭제함.
document.write("우리집 강아지의 나이는 " + myDog.age); // age 삭제되었기 때문에 undefined 출력

객체 프로퍼티 순회

for-in 문은 객체의 문자열 키(key)를 순회하기 위한 문법이다. 하지만 객체 프로퍼티에는 순서가 없기에 프로퍼티의 순서가 보장되지 않고, 배열 요소들만을 순회할 수는 없기에 배열에는 사용하지 않는 것이 좋다.

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male'
};

// prop에 객체의 프로퍼티 이름이 반환된다. 단 순서는 보장되지 않는다.
for (var prop in person) {
  console.log(prop + ': ' + person[prop]);
}

/*
first-name: Ung-mo
last-name: Lee
gender: male
*/

var array = ['one', 'two'];

// index에 배열의 경우 인덱스가 반환된다
for (var index in array) {
  console.log(index + ': ' + array[index]);
}

/*
0: one
1: two
*/

이와 같은 for-in 문의 단점을 극복하기 위해 ES6에서 for-of 문이 추가되었다. for–in 문은 객체의 프로퍼티를 순회하기 위해 사용하고 for–of 문은 배열의 요소를 순회하기 위해 사용한다.

const array = [1, 2, 3];
array.name = 'my array';

for (const value of array) {
  console.log(value);
}

/*
1
2
3
*/

for (const [index, value] of array.entries()) {
  console.log(index, value);
}

/*
0 1
1 2
2 3
*/

객체간의 비교

function Dog(color, name, age) {
    this.color = color;
    this.name = name;
    this.age = age;
}

var myDog = new Dog("흰색", "마루", 1);
var hisDog = new Dog("흰색", "마루", 1);        // 모든 프로퍼티의 값이 모두 같은 객체를 생성
document.write((myDog == hisDog) + "<br>");   // false
document.write((myDog === hisDog) + "<br>");  // false

// 객체 레퍼런스는 객체 자체를 저장하는 것이 아니라, 객체가 위치한 주소를 저장
var herDog = hisDog;                          // hisDog 객체를 변수 herDog에 대입
document.write((hisDog == herDog) + "<br>");  // true
document.write((hisDog === herDog) + "<br>"); // true

객체의 종류

전역 객체(global object)

전역 객체란 자바스크립트에 미리 정의된 객체로 전역 프로퍼티나 전역 함수를 담는 공간의 역할을 한다.
전역 객체 그 자체는 전역 범위에서 this 연산자를 통해 접근할 수 있으며, 자바스크립트에서 모든 객체는 전역 객체의 프로퍼티가 된다.
웹 브라우저가 새로운 페이지를 로드하면, 자바스크립트는 새로운 전역 개체를 만들고 해당 프로퍼티들을 초기화한다.

래퍼 객체(wrapper object)

var str = "문자열";       // 문자열 생성
var len = str.length;   // 문자열 리터럴 str은 객체가 아닌데도 length 프로퍼티 사용

문자열의 프로퍼티를 참조하려고 하면 자바스크립트는 new String()을 호출한 것처럼 문자열을 객체로 자동 변환해주기 때문에, 이렇게 생성된 임시 객체는 String 객체의 메소드를 상속받아 프로퍼티를 참조하는 데 사용된다. 프로퍼티 참조가 끝나면 사용된 임시 객체는 자동으로 삭제된다.
숫자, 문자열, 불리언 등 원시 타입의 프로퍼티에 접근하려고 할 때 생성되는 임시 객체를 래퍼 객체(wrapper object)라고 한다.

var str = "문자열";             // 문자열 리터럴 생성
var strObj = new String(str); // 문자열 객체 생성
str.length;                   // 3, 내부적으로 래퍼객체 생성 후 length 프로퍼티 참조

str == strObj;                // true, 동등연산자는 리터럴값과 해당 래퍼객체를 동일시
str === strObj;               // false, 일치연산자는 리터럴값과 해당 래퍼객체를 구별
typeof str;                   // string
typeof strObj;                // object

표준 객체(Standard Object)

자바스크립트에서 표준 객체는 다른 객체의 기초가 되는 핵심적인 객체다.
자주 사용되는 대표적인 자바스크립트 표준 객체는 Number, Math, Date, String, Array 객체가 있다.

Reference

저작자표시 비영리 변경금지

'Language > Javascript' 카테고리의 다른 글

[Javascript] 자바스크립트 상속 - 프로토 타입 생성자, 체인 (0)	2023.07.19
[Javascript] 자바스크립트 객체 - 프로퍼티와 메소드 (0)	2023.07.19
[Javascript] 자바스크립트 함수 - 다양한 함수 종류 및 전역함수들 (0)	2023.07.19
[Javascript] 자바스크립트 함수 - 매개변수와 인수, this, 프로퍼티 (0)	2023.06.20
[Javascript] 자바스크립트 배열 - 생성, 추가, 인덱싱 (0)	2023.06.20

현재글[Javascript] 자바스크립트 객체 - 정의, 참조, 생성, 삭제, 순회, 비교

개발 메모리

[Javascript] 자바스크립트 객체 - 정의, 참조, 생성, 삭제, 순회, 비교

객체(object)란?

객체의 생성

리터럴 표기를 이용한 객체의 생성

Object 생성자를 이용한 객체의 생성

생성자 함수를 이용한 객체의 생성

객체의 프로퍼티 키 참조

객체의 프로퍼티 값 참조

객체의 프로퍼티 값 갱신

객체의 프로퍼티 값 갱신

객체 프로퍼티 삭제

객체 프로퍼티 순회

객체간의 비교

객체의 종류

전역 객체(global object)

래퍼 객체(wrapper object)

표준 객체(Standard Object)

Reference

'Language > Javascript' 카테고리의 다른 글

'Language/Javascript'의 다른글

티스토리툴바

[Javascript] 자바스크립트 객체 - 정의, 참조, 생성, 삭제, 순회, 비교

객체(object)란?

객체의 생성

리터럴 표기를 이용한 객체의 생성

Object 생성자를 이용한 객체의 생성

생성자 함수를 이용한 객체의 생성

객체의 프로퍼티 키 참조

객체의 프로퍼티 값 참조

객체의 프로퍼티 값 갱신

객체의 프로퍼티 값 갱신

객체 프로퍼티 삭제

객체 프로퍼티 순회

객체간의 비교

객체의 종류

전역 객체(global object)

래퍼 객체(wrapper object)

표준 객체(Standard Object)

Reference

'Language > Javascript' 카테고리의 다른 글

'Language/Javascript'의 다른글

관련글

티스토리툴바