JavaScript 객체(Object)의 기초

🔍 객체(Object)의 기본 정의

---

• 자바스크립트는 객체 기반의 스크립트 언어이고, 자바스크립트를 이루고 있는 대부분의 것들이 객체로 존재한다. 따라서 자바스크립트의 기초를 다지기 위해서 객체에 대한 이해는 필수적이다.
• 자바스크립트에는 총 8가지의 자료형이 있다.
  • 문자(String)
  • 숫자(Number)
  • Bigint: 길이 제약 없이 정수를 나타낼 수 있다.
  • 불리언(Boolean)
  • 심볼(Symbol): 객체의 고유한 식별자를 만들 때 사용한다.
  • Null: 미지의 값을 뜻하며, 타입은 존재하지만 값은 없다.
  • Undefined: 값도 없고, 타입도 지정되지 않은 상태
  • Object
• 이들 중 Object를 제외한 나머지는 오직 하나의 데이터만 담을 수 있어 원시형(Primitive type)이라 부른다. Object는 키(Key)와 값(Value)으로 구성된 프로퍼티(Property)들의 집합으로, 원시형과 달리 다양한 데이터를 담을 수 있다.
• 프로퍼티 값으로 함수를 사용할 수도 있으며, 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드(Method)라 부른다.

 

🔍 프로퍼티(Property)

---

let user = {
    name: "Mitt",
    age: 28,
};

 

중괄호 {…} 안에 키: 값 쌍으로 구성된 프로퍼티 예시를 작성하였다.

• 콜론을 기준으로 왼쪽에는 키(이름 or 식별자)가, 오른쪽에는 값이 위치한다.
• 객체 user에는 프로퍼티 두 개가 있다.
  • 첫 번째 프로퍼티: “name”(이름)과 “Mitt”(값)
  • 두 번째 프로퍼티: “age”(이름)과 28(값)
• 객체의 특정 프로퍼티 값에 접근하는 경우, 객체이름.프로퍼티이름 or 객체이름[”프로퍼티이름”] 형식으로 접근한다. 위의 예시에서 console.log로 age 값만 출력하고자 하는 경우,
  • console.log(user.age);
  • console.log(user[”age”]);

 

🔍 객체(Object)의 생성

---

• 객체 리터럴
  • 객체 생성 방식 중 가장 일반적인 방법으로, 컨텐츠를 그대로 대입하는 방법을 말한다.
  • 아래와 같이 key : value 형식의 데이터를 직접 입력하는 방법이다.

let obj = {
    mitt: 28,
    sophie: 26,
    pickle: 23,
};

 

• Object()
  • new Object()를 호출하면 비어 있는 객체를 호출한다. 따라서 객체 생성 이후 프로퍼티를 따로 추가해 줘야 한다.

let obj = new Object();

obj.name = "mitt";
obj.age = "28";

console.log(obj); // { name: 'mitt', age: '28' }
console.log(obj.name); // mitt

 

• 생성자 함수
  • 문법이 Java와 유사하며, 기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다. 생성자 함수의 첫 문자는 대문자로 표기하는 것이 관례이다.
  • 여러 개의 동일한 프로퍼티를 가지는 객체를 생성하기 위해 필요하다.

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.job = "student";
}

let person1 = new Person("mitt", "28");
let person2 = new Person("sophie", "26");

console.log(person1); // Person { name: 'mitt', age: '28', job: 'student' }
console.log(person2.name + " " + person2.age + " " + person2.job); // sophie 26 student

 

• 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,
    },
});

 

• ES6 클래스
  • ECMAScript 5까지 자바스크립트에는 객체 생성을 위한 설계도인 클래스가 없었다.
  • ECMAScript 6부터 이를 지원한다. 다른 언어들과 비슷한 형태로 객체 및 객체가 가진 메서드를 정의할 수 있도록 제공한다.

class Person {
    constructor(name, age, major) {
        this.name = name;
        this.age = age;
        this.major = major;
    }

    id() {
        return `${this.name}${this.age}${this.major}`;
    }
}

let p1 = new Person("mitt", 28, "business");
let p2 = new Person("pickle", 23, "laws");

console.log(p1); // Person { name: 'mitt', age: 28, major: 'business' }
console.log(p2.id()); // pickle23laws

 

🔍 프로토타입(Prototype)

---

• 자바스크립트의 모든 객체는 프로토타입이라는 객체를 가진다. 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메서드를 상속 받는다.
• 이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입 객체, 혹은 프로토타입이라고 한다.

 

🔍 For … in

---

• 배열에서는 단순 For문으로도 key와 value를 꺼낼 수 있는데, 객체를 다룰 때는 단순 For문으로는 불가능하다. 반드시 For … in 문을 사용해야 한다. — For in 문을 돌리면서 원하는 값 지정

// 단순 For 문 사용 --> Case 1 :: Array

let arr = ["mitt", "jerry", "tom", "nick"];

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
} // mitt jerry tom nick

console.log("==========================");

// For in 문 사용 --> Case 2 :: Object
let person = {
    name: "mitt",
    age: 28,
    gender: "female",
};

for (let key in person) {
    console.log("key: ", key);
    console.log("value: ", person[key]);
}

위 예제 출력 결과