JS | 객체 리터럴과 프로퍼티

BOZZANG·2022년 5월 7일
0

JavaScript

목록 보기
7/14
post-thumbnail

🎇 객체

object

객체란 한 마디로 정의하면 '실제로 존재하는 사물'로,

key 와 값 value 으로 구성된 속성 property 을 가진 JS의 기본 데이터 타입이라고 말할 수 있다.

JS에는 8가지 자료형이 있는데, 이 중에 7개는 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 원시형 primitive type 이라고 부른다.

그런데 객체형은 원시형과 달리 다양한 데이터를 담을 수 있다.

객체는 JS의 모든 면에 녹아있는 개념이므로 JS를 잘 다루기 위해서는 객체를 잘 알아야한다.


🔗 객체 생성하기

let user = new Object(); // 객체 생성자 문법
let user = {}; // 객체 리터럴 문법 

중괄호 {...} 를 이용해 객체를 선언하는 것을 객체 리터럴 object literal 이라고 하며, 객체와 배열을 생성하는 간단한 방법이다.


🔗 리터럴과 프로퍼티

let user = {	   // 객체
	name : "bo",   // key : name , value : "bo"
    age : 2,	   // key : age , value : 2
    height : 168,  // key : height , value : 168
    };

중괄호 안에는 key : value 쌍으로 구성된 속성property 가 들어간다.
즉, 객체 user 에는 property 가 3개 있는 것이다.

property value 에는 모든 자료형이 올 수 있다.

key : 이름, 프로퍼티 키, 프로퍼티 이름, 프로퍼티 식별자 
value : 값, 프로퍼티 값 

◽ 객체 값 접근

console.log( user.name ); // bo
console.log( user.age );  //2

console.log( user['age'] ) // 2

점 표기법 dot notation 을 이용하면 값을 읽는 것이 가능하다.
객체 뒤에 대괄호 [...] 를 사용하고 키를 입력하는 방법으로도 읽을 수 있다.


◽ 대괄호 표기법

square bracket notation

여러 단어를 조합하여 key를 만든 경우에는, 점 표기법을 사용해 값을 읽을 수 없다.

👨‍🦰 식별자로 사용할 수 없는 단어를 key로 사용하는 경우

객체를 생성할 때 key는 식별자와 문자열을 모두 사용할 수 있다.
다만, 식별자가 아닌 문자열을 key로 사용했을 때
무조건 대괄호를 사용해야 객체의 요소에 접근할 수 있다.
(점 표기법은 유효한 변수 식별자인 경우에만 사용할 수 있다.)

유효한 변수 식별자 : 공백 x, 숫자로 시작 x, $,_를 제외한 특수 문자 x

대괄호 표기법 안에서 문자열을 사용할 때에는 문자열을 따옴표로 묶어줘야 한다.
따옴표의 종류는 상관 없다.

let user = {};

// set
user["likes cat"] = true; 

// get
console.log( user["likes cat"] ); // true

// delete
delete user["likes cat"];

또한 대괄호 표기법을 사용하면 변수를 key로 사용하는 것과 같이
문자열 뿐만 아니라 모든 표현식의 평가 결과를 key로 사용할 수 있다.

변수 key는 런타임에 평가되기 때문에 사용자 입력값 변경 등에 따라 값이 변경될 수 있다. 평가가 끝난 이후의 결과가 property key 로 사용된다.

let user = {	   // 객체
	name : "bo",   // key : name , value : "bo"
    age : 2,	   // key : age , value : 2
    height : 168,  // key : height , value : 168
    };

let key = prompt("어떤 정보를 볼래?", "height");

// 변수로 접근 
alert( user[key] ); // 168 (사용자가 프롬프트 창에 height을 입력한 경우)

하지만 점 표기법은 이런 방식이 불가능하다.

let user = {	   // 객체
	name : "bo",   // key : name , value : "bo"
    age : 2,	   // key : age , value : 2
    height : 168,  // key : height , value : 168
    };

let key = "height";
console.log( user.key ); // undefined 

◽ 계산된 프로퍼티

객체 생성 시 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우,
이를 계산된 프로퍼티 computed property 라고 부른다.

let fruit = prompt("어떤 과일 살래?", "apple");

let bag = {
  [fruit] : 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아온다.
}; 

console.log( bag.apple ); // fruit에 apple이 할당되었기 때문에 5가 출력된다.

◽ 단축 프로퍼티

보통 프로퍼티 값을 기존 변수에서 받아와 사용하는 경우가 있다.

그런 경우에 프로퍼티 값 단축 구문 property value shorthand 를 사용하여
프로퍼티를 만들면 코드를 짧게 줄일 수 있다.

name : name 대신에 name만으로도 프로퍼티를 설정할 수 있다.

let user = {
  name, // name : name
  age,  // age : age
  height = 168, // 일반 프로퍼티와 함께 사용 가능 
}; 

◽ in 연산자로 프로퍼티 존재 여부 확인하기

JS 객체의 중요한 특징 중 하나는 존재하지 않는 프로퍼티에 접근하려 해도
에러가 발생하지 않고 undefined 를 반환한다는 것이다.

바로 이런 특징을 사용해서 프로퍼티 존재 여부를 확인할 수 있다.

let user = {}; 

console.log( user.noSuchProperty === undefined ); 
// true 가 뜨면 프로퍼티가 존재하지 않음
// false 가 뜨면 프로퍼티가 존재함 

이 방법 말고도 in 연산자를 사용하여 존재여부를 알 수 있다.

"key" in object
let user = {
  name : "bo", 
  age : 2,
  height : 168,
}; 

console.log("name" in user); // true
console.log("handsome" in user); // false

💟 undefinedin 연산자 두 방법을 쓰는 이유

가끔 일치 연산자를 사용하여 프로퍼티 존재 여부를 알아내는 방법은 잘 동작하는데,
가끔 오류가 나기도 한다. 이럴 때 in 연산자를 사용한다.
흔치 않지만 값에 undefined 를 할당할 수도 있고...

다시 한 번 복습 !

null -> 알 수 없거나, 비어 있다는 것을 나타낼 때 
undefined -> 정의되어 있지 않거나, 할당되지 않은 경우

💥 상수 객체는 수정될 수 있다!
const 로 선언된 객체여도 수정될 수 있다.
이는 객체 자체의 값을 고정하고, 그 내용은 고정하지 않기 때문이다.
물론 상수 객체 프로퍼티를 만드는 또 다른 방법이 있다.

for in 반복문으로 객체를 순회해보자

꼭 변수 key를 사용할 필요는 없다!

for (key in object) {
}
let user = {
  name : "bo", 
  age : 2,
  height : 168,
}; 

for (key in user) {
  alert( key ); // name, age, height
  alert( user[key] ); // bo, 2, 168

객체는 어떻게 정렬되는고쥐?

객체는 특별한 방식으로 정렬되는데, 쉽게 정수 프로퍼티 integer property 는 자동으로 정렬되고, 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬된다.


Modern Javascript Tutorial

0개의 댓글