JS 객체 : Object

1. 객체란?

 

자바스크립트는 객체 기반의 프로그래밍 언어로, 자바스크립트를 구성하는 거의 모든 것이 객체이다.

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

<script>
	var person = {
    	name : 'ann',
        age : 15
    };
</script>

위의 예시에서의 프로퍼티는 'name : 'ann', age : 15' 부분 모두를 지칭하고,

키는 name, age 를, 값은 'ann' ,  '15' 이다.

 

이 값 영역에는 자바스크립트에서 사용할 수 있는 모든 값이 올 수 있는데, 함수 또한 값으로 쓰일 수 있다.

값으로 쓰인 함수는 일반적인 함수와 구분을 위하여 '메서드'라고 부르기도 한다.

 

 

2. 객체 리터럴

 

객체 리터럴은 중괄호 {} 를 통해 정의한다.

<script>
        var person = {
    	name : 'ann',
        age : 15,
        sayHello : function () {
        	console.log(`hello my name is ${this.name}`);
            }
        };   
</script>

만약 중괄호 내에 프로퍼티는 아무것도 정의하지 않으면, 빈 객체로 인식한다.

<script>
	var person = {};
</script>

여기서 중요한 점은 객체 리터럴이 코드 블록과 같은 기호를 사용한다는 점이다.

둘은 같은 기호를 사용할 뿐 전혀 다른 의미이다.

객체 리터럴은 그 자체가 변수에 할당될 수 있는 값으로 평가되는 표현식이다. 

때문에 코드 블록과 달리 세미콜론 ; 으로 값을 나타낸다는 점을 잊지 말자.

 

.📌 객체 생성 시점

객체 리터럴은 변수에 할당하는 형태로 정의하기 때문에 hoisting 에 의하여 변수가 해당 변수가 객체 리터럴을 할당하기 전에 런타임 전 선언 및 초기화를 거친다.

즉 변수 person 에 대해 객체 리터럴 할당 전 값을 보려고 하면, 변수의 초기화 된 값인 undefined 를 확인할 수 있다.  

런타임 후 변수에 객체 리터럴이 할당되는 시점에 비로소 변수 person 에 객체 리터럴이 담기게 된다.

 

 

3. 객체의 구성

 

1️⃣ 프로퍼티

 

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

프로퍼티를 나열할 때에는 쉼표 , 로 구분한다.

프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌
프로퍼티 값 : 자바스크립트에서 사용 가능한 모든 값

프로퍼티의 키는 프로퍼티에 접근할 수 있게 하는 이름으로서 일종의 식별자 역할을 한다.

때문에 식별자 네이밍 규칙을 따르게 되는데, 반드시 따라야 하는 것은 아니다.

하지만 규칙을 따른 경우와 그렇지 않은 경우의 차이가 발생하게 된다.

 

식별자 네이밍 규칙을 따르지 않은 경우에는 

프로퍼티 키가 문자열임을 따옴표를 통하여 명시적으로 나타내야 한다.

하지만 규칙을 지킨 경우에는 이를 생략할 수 있다.

        var person = {
            firstName : '',
            last-name : ''
    	};

첫 번째 프로퍼티 키는 식별자 네이밍 규칙을 준수하였지만, 두 번째 프로퍼티 키는 그렇지 않았다.

이러한 경우에 따옴표를 작성해주지 않으면

코드 자체가 실행되지 않게 된다.

        var person = {
            firstName : '',
            'last-name' : ''
    	};

이렇듯 식별자 네이밍 규칙을 지키지 않았을 때 따옴표를 추가해야 하는 등의 번거로움이 생기게 된다.

때문에 가능한 식별자 네이밍 규칙을 지켜주는 것이 좋다.

 

📌 - 가 안 되는 이유

- 는 빼기 연산자와 구분을 할 수 없기 때문에, 자바스크립트에서는 빼기 연산자로 인식하게 된다.

 

또한 프로퍼티 키를 선언할 때에 주의할 점이 있다.

객체 리터럴 내부에서 같은 식별자를 사용하는 경우에 나중에 입력한 값으로 덮어 쓰일 수 있기 때문에 주의해야 한다.

        var person = {
            name : 'ann',
            age : 15,
            sayHello : function () {
                console.log(`hello my name is ${this.name}`);
            },
            name : 'kim'
        };   
        console.log(person);

2️⃣ 메서드

 

자바스크립트의 함수는 값으로 취급할 수 있기 때문에 프로퍼티의 값으로 사용할 수 있다.

예시의 sayHello 의 값으로 함수를 사용하였는데, 일반적인 함수와 구별을 위하여 메서드라고 부를 수 있다.

        var person = {
            name : 'ann',
            age : 15,
            sayHello : function () {
                console.log(`hello my name is ${this.name}`);
            }
        };

이 메서드에서는 다른 프로퍼티 키를 참조하여 호출하거나, 조작이 가능하다는 특징을 가진다.

위에 사용된 this 키워드는 객체 자신을 가리키는 참조 변수이다. 

 

 

 

4. 프로퍼티 접근

 

프로퍼티에 접근할 수 있는 방법은 다음과 같다.

1️⃣ 마침표 표기법 : 마침표 . 연산자를 통한 접근
2️⃣ 대괄호 표기법 : 대괄호 [] 연산자를 통한 접근(연관 배열)

다음 예시를 통해 두 표기법의 차이를 살펴보자.

        var person = {
            name : 'ann',
            age : 15,
            sayHello : function () {
                console.log(`hello my name is ${this.name}`);
            }
        };
        
        console.log(person.name);
        console.log(person['name']);

먼저 마침표 표기법을 살펴보면, 프로퍼티 키를 그대로 사용하여 값을 호출하는 것을 확인할 수 있다.

반면 대괄호 표기법에서는 따옴표를 사용하여 프로퍼티 키의 값을 호출하였다.

대괄호 표기법에서 대괄호 안에 따옴표 없이 person[name] 을 사용하게 되면, 자바스크립트 엔진이 이를 식별자로 인식하여 찾지 못하게 된다.

객체에 존재하지 않는 프로퍼티에 접근하려고 하면 undefined 를 반환하게 된다.

 

이제 프로퍼티에 접근을 할 수 있게 되었다면, 값을 변경하는 것도 가능해진다.

        var person = {
            name : 'ann',
            age : 15,
            sayHello : function () {
                console.log(`hello my name is ${this.name}`);
            }
        };   
        person['name'] = 'kim';
        console.log(person['name']);

또는 프로퍼티 키와 값 자체를 동적으로 추가할 수도 있다.

      person['nickName'] = 'solsol';

목적한 객체에 없는 프로퍼티 키에 값을 추가하려고 할 때, 동적으로 프로퍼티 키가 생성되고 값이 할당된다.

 

그렇다면 프로퍼티를 삭제하고 싶을 때에는 어떻게 해야 할까?

삭제 시에는 delete 연산자를 활용할 수 있다.

        var person = {
            name : 'ann',
            age : 15,
            sayHello : function () {
                console.log(`hello my name is ${this.name}`);
            }
        };   
        person['nickName'] = 'solsol';
        delete person['nickName'];
        console.log(person);

다만 delete 연산자는 객체에 존재하지 않는 프로퍼티를 삭제하고자 할 때에 무시하게 된다.

        delete person['firstName'];

오류도 발생하지 않고, 기존의 키와 값에도 영향이 없는 것을 확인할 수 없다.