1. 객체 타입의 정의와 몇몇 특징들
객체란 자바스크립트를 구성하는 거의 모든 것을 의미하며, 리액트의 컴포넌트와 비슷한 의미를 가지기도 합니다.
이러한 객체의 구성은 크게 프로퍼티와 메서드로 구성되는데, 프로퍼티는 키(빈 문자열을 포함하는 모든 문자열 또는 심볼 값)와 값(자바스크립트에서 사용할 수 있는 모든 값)으로 구성되어 있으며 키에 대한 네이밍 규칙의 경우 식별자 네이밍 규칙과 크게 다르지 않고, 그 규칙에서 벗어난 네이밍은 반드시 문자열로 감싸주어야 합니다.
또한 메서드는 객체 내에서 실행되는 함수를 의미하는데, 이러한 프로퍼티의 키와 값에는 함수를 포함한 모든 값을 지정할 수 있으며 이때 객체 내에 구현된 함수를 객체가 소유한 함수라는 의미에서 메서드라고 부릅니다.
이러한 객체를 생성하는 경우 class에 국한되어 객체를 생성하는 C++이나 자바와는 달리 자바스크립트에서는 다양한 객체 생성 방식(생성자 함수를 사용하거나, Obeject 빌트인 객체를 사용하거나, 객체 리터럴{}을 사용하는 등의 방법)을 지원하고 있으며, 객체 리터럴을 이용한 객체 생성법이 대표적인 객체의 생성법 입니다.
그리고 이러한 객체 타입은 앞서 살펴본 원시 타입과의 차별점에 있어서 가장 중요한 차이점인 '불변성' 을 가지고 있지 않기에, 한 번 메모리에 할당 된 객체의 특정 값을 삭제하거나 다른 값으로 변경이 가능합니다.
let person = { name : 'Parkjongmin', //문자열 값 할당 age : 30, //숫자 값 할당 hello : function(){ // 함수 hello를 프로퍼티로 추가 console.log(`안녕하세요! 저는 ${name} 이고 나이는 ${age}입니다.`) }, drivelicense : true, // 운전면허증은 있음(true)로 설정. car : null, //null 값 추가 skills : ['markUpLanguage', 'javascipt', 'react'] //배열값 추가 "★bestFavorite" : "You"; //_, $를 제외한 특수기호가 키의 이름 전면에 배치되는 것은 네이밍 규칙 위반이므로 이 경우 문자열로 키 이름을 감싸줍니다. } console.log(person) // person 객체의 프로퍼티 정보가 {name : "Parkjongmin", age : 30 ㆍㆍㆍ} 이런 식으로 출력됩니다.
2. 객체 프로퍼티 접근 방법
객체의 프로퍼티에 접근할 때에는 점 표기법(Dot Notation)과 대괄호 표기법(Bracket Notation)으로 접근이 가능한데,
점 표기법은 식별자 네이밍 규칙을 지킨 경우에 한해 사용이 가능하고, 그렇지 않은 경우(키 값이 문자열일 경우)에는 대괄호 표기법으로 접근이 가능합니다. 또한 대괄호 접근법은 변수의 값 또한 프로퍼티의 키 이름을 지정할 때 동적으로 전달 하여 지정이 가능합니다.
let person = { name : 'Parkjongmin', // 네이밍 규칙을 지킨 경우를 포함해 키가 문자열로 감싸 있지 않은 경우 person.name과 같이 점 표기법으로 접근이 가능합니다. "age" : 30 // 네이밍 규칙을 지키지 않은 경우를 포함해 키가 문자열로 구성되어 있을 경우 person["age"]와 같이 대괄호 표기법으로 접근이 가능합니다. } person.name = "Re_Go"; // 위의 name에 접근 할때에는 별다른 제약 없이 점 표기법으로 접근이 가능합니다. person["age"] = 40; // 반면 문자열로 된 키에 접근할 경우 대괄호 안에 문자열로 된 키의 이름을 그대로 작성해 주면 됩니다. let newAge = "age" // 혹은 외부에 선언된 특정 식별자에 저장 되어있는 문자열 값을 이용해 person[newAge] = 40; // 다음과 같이 식별자를 대괄호에 기입하게 되면, 위의 예시를 들어 newAge에 할당 되어있는 "age" 값이 처리되어 결과적으로 person["age"] = 40; 으로 연산이 처리되게 됩니다. console.log(person.name); // 값의 변경 뿐만 아니라 접근도 똑같이 진행해주면 됩니다. console.log(person[newAge]); console.log(person["age"]); delete person.name; //특정 프로퍼티의 삭제의 경우 delete 키워드를 이용하면 됩니다. delete person[newAge]; delete person["age"];
특히 객체의 프로퍼티를 생성할 때 기존에 생성되어 있는 변수 이름과 프로퍼티의 키 이름이 같을 경우 프로퍼티 키를 생략할 수 있습니다. 이를 프로퍼티 축약 표현이라고 하며, ES6에서 추가된 기능입니다.
let x = 1, y = 2 // ES6 이전에는 특정 변수의 값을 전달하려고 한다면 let thisNumber = { // 다음과 같이 객체 안의 키와 외부의 식별자의 이름이 똑같더라도 일일이 지정을 해주어야 했으나 x : x, // x프로퍼티에는 변수 x의 값을 y : y // y프로퍼티에는 변수 y의 값을 전달 } let x = 1, y = 2 //ES6 부터는 특정 변수의 값 전달 시 식별자의 이름과 객체 안의 이름이 같을 경우 let thisNumber = {x,y} // 따로 키와 값을 선언해주지 않고 일괄적으로 작성이 가능하게 되었습니다. console.log(thisNumber);
