[모딥다] JS (1) - 객체 리터럴

1. 객체란?
: JS는 객체 기반의 프로그래밍 언어며 거의 모든 겂이 객체다. 

: 변경 불가능한 원시 값과 달리 객체는 변경 가능한 값이다.

: 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다.

: 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.

let person = {
    name: "John" // 프로퍼티 키 : name , 프로퍼티 값 :  "John"
    age: 22,
}

 

:  참고로 프로퍼티 값은 JS에서 사용할 수 있는 모든 값이 될 수 있다.

: 프로퍼티 값이 함수인 경우 우리는 메서드라 부른다.

var counter = {
    num = 0, // 프로퍼티
    increase : function() { // 메서드
        this.num++; 
     }
 };

 

: 함수로 객체를 생성하기도 하며 함수 자체가 객체이기도 하다.

 

2. 객체 리터럴에 의한 객체 생성

: 객체지향 언어는 클래스를 사전에 정의하고 필요한 시점에 new 연산자와 함께 생성자(constructor)를 호출하여 인스턴스를 생성하는 방식으로 객체 생성함.

: 인스턴스 = 클래스에 의해 생성되어 메모리에 저장된 실체를 말함. 

 

* 자바스크립트는 프로토타입 기반 객체 지향 언어임, 따라서 아래와 같이 객체 생성 가능

1) 객체 리터럴

: 중괄호 내에 0개 이상의 프로퍼티 정의함

var person = {
    name: "Lee",
    sayHello: function () {
        console.log(`Hello My name is ${this.name}`);
    }
};

 

2) Object 생성자 함수

var person = new Object();
person.name = "Lee";
person.sayHello = function () {
    console.log(`Hello, My name is ${this.name}`);
};

person.sayHello(); // Hello, My name is Lee

 

3) 생성자 함수

function Person(name) {
    this.name = name;
    this.sayHello = function () {
        console.log(`Hello, My name is ${this.name}`);
    };
}

var person = new Person("Lee");
person.sayHello(); // Hello, My name is Lee

 

4) Object.create 메서드

var prototypePerson = {
    sayHello: function () {
        console.log(`Hello, My name is ${this.name}`);
    }
};

var person = Object.create(prototypePerson);
person.name = "Lee";

person.sayHello(); // Hello, My name is Lee

 

5) 클래스(ES6) 

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

    sayHello() {
        console.log(`Hello, My name is ${this.name}`);
    }
}

const person = new Person("Lee");
person.sayHello(); // Hello, My name is Lee

 

 

3. 메서드

: 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 부른다.

var list = {
    name : "Hello",
    age : 20,
    
    //  번호 불러오기
    getNumber: function () {
       return age + 1;
     }
};

console.log(list.getNumber()); // 21

 

4. 프로퍼티 접근

1) 마침표 표기법 : 마침표 프로퍼티 접근 연산자(.)를 사용

2) 대괄효 표기법 : 대괄호 프로퍼티 접근 연산자([ ... ]) 사용

var pesron = {
    name: "Hello"
};

// 마침표 표기법
console.log(person.name);

// 대괄호 표기법
console.log(person['name']); // 반드시 따옴표로 감싸야 한다.

 

5. 프로퍼티 동적 생성

var pesron = {
    name: "Hello"
};


person.age = 20;

console.log(person); // { name: "Hello" , age: 20 };

 

6. 프로퍼티 삭제

: delete 연산자 사용

var pesron = {
    name: "Hello"
};


person.age = 20;

console.log(person); // { name: "Hello" , age: 20 };

delete person.age;

console.log(person); // {name: "Hello"};

 

7. ES6에서 추가된 객체 리터럴 확장 기능

// 프로퍼티 값으로 변수 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 생략 가능
let x = 1, y =2;

// 프로퍼티 축약 가능
const obj = { x , y};

 

8. 원시 값과 객체 비교

: 원시 값 - 변경 불가능한 값  ( 숫자, 문자열, 불리언, null, undefined, 심벌 ,객체 타입) 즉, 읽기 전용 값

= 원시값은 변경 불가능한 값이기 때문에 값 변경 위해서는 새로운 메모리 공간을 확보하고 재할당한 값을 저장 후, 변수가 참조하던 메모리공간의 주소 변경함. 결론적으로 불변성이 성립함 

: 객체 타입 - 변경 가능한 값

= 프로퍼티 수가 정해져 있지 않으며, 동적으로 추가 삭제 가능. 따라서 메모리 공간도 미리 정해둘 수 없음

: 객체는 프로퍼티 키를 인덱스로 사용하는 해시 테이블이라고 생각 가능

: 객체 지향과 달리 미리 클래스를 선언 하는 과정 없이 객체 생성 가능

: 객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근 시 참조값에 접근 가능함

: 참조값이란 생성된 객체가 저장된 메모리 공간의 주소, 그 자체

 

9. 얕은 복사 vs 깊은 복사

: 얕은 복사 - 한 단계까지만 복사하는 것, 참조 값을 복사함

: 객체에 중접도 있는 객체까지 모두 복사하는 것을 말함 , 완전한 복사본을 만듦