Javascript 객체 Object 참조 및 생성

---

객체(Object)

• 자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 "모든 것"!!
• 원시 값(String, Number, boolean, Symbol, bigint, null, undefined)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체
• 자바스크립트의 객체는 키(key)와 값(value)으로 구성된 프로퍼티들의 집합
• 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용 가능
• 자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 “프로토타입”이라고 불리는 객체의 프로퍼티와 메서드를 상속 가능!!

프로퍼티(Property)

• 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값
  프로퍼티 값 : 모든 값
• 객체는 프로퍼티의 집합
• 프로퍼티는 프로퍼티 키(이름)와 프로퍼티 값으로 구성
• 프로퍼티는 프로퍼티 키로 유일하게 식별 가능, 즉, 프로퍼티 키는 프로퍼티를 식별하기 위한 식별자(identifier)

메서드(Method)

• 자바스크립트의 함수는 일급 객체이므로 값으로 취급 가능
• 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 명명
• 메서드는 객체에 제한되어 있는 함수

객체의 프로퍼티 참조

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

객체의 메서드 참조

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

• 메서드를 참조할 때 메서드 이름 뒤에 괄호(())를 붙이지 않으면, 메서드가 아닌 프로퍼티 그 자체를 참조
• 괄호를 사용하지 않고 프로퍼티 그 자체를 참조하게 되면 해당 메서드의 정의 그 자체가 반환

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

person.name    // 홍길동
person["name"] // 홍길동
person.fullId() // 0302191234567
person.fullId;  // function () { return this.birthday + this.pId; } <- 이 자체가 반환되어버림

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

• 자바스크립트에서 객체를 생성하는 가장 쉬운 방법은 리터럴 표기(literal notation)를 이용하는 방법
• 각각의 프로퍼티는 이름과 값을 콜론(:)으로 연결하고, 쉼표(,)를 사용해 다른 프로퍼티와 구분
• 프로퍼티의 이름으로는 자바스크립트의 식별자(identifier)나 문자열을 사용 가능

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

let kitty = {
    name: "나비",
    family: "길냥이",
    age: 2,
    weight: 1.5
};

document.write("우리 집 새끼 고양이의 이름은 " + kitty.name + "이고, 종은 " + kitty.family + "");

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

• new 연산자를 사용하여 객체를 생성하고 초기화 가능
• 이때 사용되는 메서드를 생성자(constructor)라고 하며, 새롭게 생성되는 객체를 초기화하는 역할
• 자바스크립트는 원시 타입을 위한 생성자를 미리 정의하여 제공
• 아래처럼 자바스크립트에서 제공하는 생성자를 사용할 수도 있으며, 사용자가 직접 객체 생성자 함수를 작성하여 사용 가능

let day = new Date(); // new 연산자를 사용하여 Date 타입의 객체를 생성함.
document.write("올해는 " + day.getFullYear() + "년");

Object.create() 메서드를 이용한 객체의 생성

• Object.create()는 지정된 프로토타입(prototype) 객체와 프로퍼티를 가지고 새로운 객체를 생성
• 사용자가 프로토타입 객체를 직접 명시할 수 있으므로, 상당히 유용하게 사용
• Object.create() 메서드의 첫 번째 인수로는 프로토타입으로 사용할 객체를 전달, 두 번째 인수로는 새로운 객체의 추가할 프로퍼티 정보를 전달

Object.create(프로토타입 객체, { 새로운 객체의 프로퍼티1, 새로운 객체의 프로퍼티2, ...});

let obj = Object.create(null, {             // null 프로토타입을 사용하여 새로운 객체를 만들고
    x: { value: 100, enumerable: true },    // x좌표를 나타내는 열거할 수 있는 프로퍼티와
    y: { value: 200, enumerable: true }     // y좌표를 나타내는 열거할 수 있는 프로퍼티를 추가함.
});

obj.x;                      // x좌표
obj.y;                      // y좌표
Object.getPrototypeOf(obj); // 객체의 프로토타입을 반환해 줌.

객체를 사용하는 이유

• 객체는 데이터와 그 데이터에 관련되는 동작을 모두 포함할 수 있기 때문에, 데이터와 동작을 하나의 단위로 구조화할 수 있어 유용
• 복잡도를 낮추고 연관성을 잘 나타내기 위해서
• 사용하지 않으면 메서드나 변수가 한 번 더 쓰이면서 원래의 기능이나 값이 변형
• 즉 유지보수가 편하며, 여러 사람이 같이하는 프로젝트가 된다면 더욱 복잡해질 수 있어 객체지향 프로그래밍 권장

여기까지는 사실 객체의 전반적인 개념에 대해 포스팅해봤다.

다음 포스팅에선 객체를 다루거나 상속하는 부분에 대해 포스팅 해보겠다!

 

끝!

 

Reference

https://www.tcpschool.com/javascript/js_object_concept

코딩교육 티씨피스쿨