[JavaScript] 자바스크립트 객체의 기초

[객체]

자바스크립트에서 객체는 원시 타입을 제외한 모든 값이다. 객체는 Key와 Value의 한 쌍으로 이뤄진 데이터가 한 개 이상 모여 만들어진다. 객체는 연관 배열 or 사전이라고 부른다. 생성된 객체를 변수에 저장하면 그 변수에는 객체의 참조(메모리 상 위치정보)가 저장된다.

• 프로퍼티(Property) : 객체에 포함된 Key와 Value 한 쌍의 데이터
• 생성 방법
  • 객체 리터럴
  • 생성자

[객체 리터럴로 객체 생성]

 

• 생성

아래 코드에서 {...} 부분을 객체 리터럴이라고 하고 해당 리터럴을 변수 student에 대입하고 있다.

프로퍼티 이름 : 프로퍼티 값은 콜론(:)으로, 각각의 프로퍼티는 쉼표(,)로 구분한다.

// 객체 리터럴로 객체 생성
let student = {name: '준영', grade: '3', rank: 'S'};

// 프로퍼티 이름은 문자열로 작성해도 됨
let student2 = {"name": '준영', "grade": '3', "rank": 'S'};

// 빈 객체 생성
let student3 = {};

• 읽기

// 객체 읽기

console.log(student.name); // 준영
console.log(student["grade"]); // 3
console.log(student.teacher); // 객체에 없는 프로퍼티 읽을 때 : undefined
console.log(student3); // 빈 객체 Object{}

• 프로퍼티 추가 & 삭제

// 프로퍼티 추가 & 삭제
student.className = '돌고래';
console.log(student); // {name: "준영", grade: "3", rank: "S", className: "돌고래"}

delete student.rank; // true
console.log(student); // {name: "준영", grade: "3", className: "돌고래"}

• 특정 프로터피 확인

console.log(student); // {name: "준영", grade: "3", className: "돌고래"}
console.log("name" in student); // true
console.log("rank" in student); // false

//student객체는 Object 객체를 상속받았기 때문에 toString 프로퍼티가 true가 나옴
console.log("toString" in student);

기본적으로 자바스크립트 객체는 Object 객체를 상속받기 때문에 부모의 객체의 프로퍼티를 사용할 수 있다.

 

자바스크립트 객체 프로퍼티

[객체는 참조 타입]

앞서 말했듯이 객체는 참조 타입이다. 아래 코드와 같이 address 변수는 {city : 'seoul', tel : '010-1234-1234'} 객체를 참조하고 있다. 마찬가지로 deliveryInfo는 생성된 address 객체를 참조하고 있으므로 두 변수는 동일한 객체를 참조하고 있는 것이다. 따라서 deliveryInfo 변수를 통해 address 객체를 읽거나 수정할 수 있다.

let address = {city : 'seoul', tel : '010-1234-1234'};

// 변수 deliveryInfo가 address 객체를 참조
let deliveryInfo = address;

deliveryInfo.city = "인천";

console.log(address.city); // 인천
console.log(deliveryInfo.city); // 인천

 

[생성자]

 

Java나 C++ 등 언어에서는 프로퍼티를 갖는 객체를 생성하는 설계도로 클래스(class)가 있다. 설계도가 있다면 똑같은 건물을 여러 개 만들 수 있다. 그러나 JavaScript에는 다른 언어의 클래스 기반 객체 생성 문법과 비슷한 생성자라는 함수로 동일한 객체를 여러개 생성할 수 있다.

// 생성자
// 관례상 파스칼 표기법 사용(첫 글자 대문자)
function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.id = function () {
        return `${this.gender}${this.age}${this.name}`;
    }
}

이렇게 만든 생성자 함수를 통해 실제 생성된 객체를 다른 언어들과 마찬가지로 인스턴스(실체)라고 부른다. 객체 지향 언어에서 인스턴스는 클래스로 생성한 실체를 말하지만 자바스크립트에서는 생성자 자체가 함수 객체라는 실체다. 

// 인스턴스
let p1 = new Person("준영", 30, "남");
console.log(p1); // Person {name: "준영", age: 30, gender: "남", id: ƒ}
console.log(p1.id()); // "남30준영"

그리고 위 생성자에서 this.id 같이 this.프로퍼티 이름에 익명함수의 참조를 대입하면 메서드를 정의할 수 있다. 메서드는 함수의 기초편의 객체의 메서드에서 좀 더 정보를 알 수 있다.

 

[Object.create로 생성]

ECMAScript 5부터 추가된 기능으로 명시적으로 프로토타입을 지정해서 객체를 생성할 수 있다. 주로 상속을 표현할 때 사용한다.

// Object.create로 객체 생성

let fruit = Object.create(Object.prototype, {
    name: {
        value: "사과",
        writable: true,
        enumerable: true,
        configurable: true
    },
    brix: {
        value: 10,
        writable: true,
        enumerable: true,
        configurable: true
    }
});

 

[클래스]

 

다른 객체지향언어와 다르게 ECMAScript 5까지 자바스크립트에는 객체 생성을 위한 설계도인 클래스(class)가 없었다. 대신에 클래스와 비슷한 역할을 하는 객체 리터럴이나 생성자를 통해 객체 설계 방법을 제공했다. 그러나 ECMAScript 6부터 자바스크립트에도 클래스(class)가 생겼고 다른 언어들과 비슷한 형태로 객체 및 객체가 가진 메서드를 정의할 수 있도록 제공하게 되었다.

 

생성자를 통해 객체를 생성했던 위 코드를 클래스로 변형할 수 있는데 두가지 방법이 있다.

 

[클래스 선언문]

// 클래스
class Person {

    // 생성자 정의
    constructor(name, age, gender) {
        this.age = age;
        this.name = name;
        this.gender = gender;
    }
    // 메서드 정의
    id() {
        return `${this.gender}${this.age}${this.name}`;
    }
}

// 인스턴스
let p2 = new Person("연주", 26, "여");
console.log(p2); // Person {age: 26, name: "연주", gender: "여"}
console.log(p2.id()); //여26연주

 

[클래스 표현식]

 

// 클래스 표현식
let Person = class {
    // 생성자 정의
    constructor(name, age, gender) {
        this.age = age;
        this.name = name;
        this.gender = gender;
    }
    // 메서드 정의
    id() {
        return `${this.gender}${this.age}${this.name}`;
    }
}

// 인스턴스
let p3 = new Person("지환", 28, "남");
console.log(p3); // Person {age: "28", name: "지환", gender: "남"}
console.log(p3.id()); //남28지환

 

 

[사용자 정의 생성자 vs 클래스]

• 클래스 선언은 함수 선언과 달리 Hoisting되지 않습니다. let 선언과 같이 행동하며, 실행이 선언에 도달할 때까지 Temporal Dead Zone에 존재합니다.
• 클래스 선언의 모든 코드는 strict 모드로 자동 실행된다. 클래스의 strict 모드를 거부할 수 있는 방법이 없음
• 모든 메서드는 Non-enumerable. Object.defineProperty()를 사용하여 메서드를 Non-enumerable하게 만드는 사용자 지정 타입과 다른 중요한 변경 사항.
• 모든 메서드는 내부 [[Construct]] 메서드가 없으며 new로 호출하려고 하면 에러가 발생
• new를 사용하지 않고 클래스 생성자를 호출하면 오류가 발생
• 클래스 메서드 내에서 클래스 이름을 덮어 쓰려고하면 오류가 발생

// 호이스팅 되지 않음
let p2 = new Person("연주", "26", "여"); // Uncaught ReferenceError: Person is not defined

class Person {

    // 생성자 정의
    constructor(name, age, gender) {
        this.age = age;
        this.name = name;
        this.gender = gender;
    }
    // 메서드 정의
    id() {
        return `${this.gender}${this.age}${this.name}`;
    }
}

// new 생성자를 통한 인스턴스를 생성해야함
console.log(Person('영구', 31, '남'));

//Uncaught TypeError: Class constructor Person cannot be invoked without 'new'

 

[전역 객체]

 

전역 객체는 프로그램 어디에서나 사용할 수 있는 객체를 말한다. 전역 객체는 자바스크립트 인터프리터가 시작될 때 혹은 웹 브라우저가 새로운 페이지를 읽을 때마다 새로운 전역 객체가 생성된다. 해당 객체의 프로퍼티는 다음과 같다.

분류	프로퍼티
전역 프로퍼티	undefined, NaN, Infinity
생성자	Object(), String(), Number() 등
전역 함수	parseInt(), parseFloat(). isNaN() 등
내장 객체	Math, JSON, Reflect

 

[내장 객체]

 

자바스크립트에는 처음부터 사용할 수 있는 내장 객체(Built-in Objects)가 존재한다. 대표적으로 Number, String, Array, Date, Function, JSON, Math 등이 많이 쓰인다. 아래 링크에서 다양한 표준 내장 객체를 살펴볼 수 있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects

표준 내장 객체

[객체의 분류]

 

• 네이티브 객체 : ECMAScript 사양에 정의된 객체가 네이티브 객체. 내장 생성자(Object, String, Number ...)로 생성된 객체와 JSON, Math, Reflect 등이 속한다.
• 호스트 객체 : ECMAScript에 정의되어 있지 않지만 자바스크립트 실행 환경에 정의된 객체를 말한다. 브라우저 객체(Window, Navigator, History, Location 등), DOM에 정의된 객체, Ajax를 위한 XMLHttpRequest 객체, HTML5의 각종 API 등이 클라이언트 측 자바스크립트에 정의된 호스트 객체이다.
• 사용자 정의 객체 : 사용자가 정의한 자바스크립트 코드를 실행한 결과로 생성된 객체

[참고]

https://infoscis.github.io/2018/02/13/ecmascript-6-introducing-javascript-classes/

JavaScript 클래스 소개