자바스크립트 객체

객체 (Object)

자바스크립트에서 객체는 다른 자료형(원시형)과 달리 다양한 데이터를 담을 수 있습니다.

객체는 중괄호 {…}를 이용해 만들 수 있습니다.
중괄호 안에는 key : value 쌍으로 구성된 프로퍼티(property)를 여러 개 넣을 수 있는데, 
key 에는 문자형, value엔 모든 자료형이 허용됩니다.

빈 객체 만드는 방법은 두 가지가 있습니다.

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

주로 객체 리터럴을 사용하여 객체를 선언합니다.

객체리터럴

let user = {     // 객체
  name: "moomooj",  // 키: "name",  값: "moomooj"
  age: 26        // 키: "age", 값: 26
};

콜론 :을 기준으로 왼쪽엔 key가, 오른쪽엔 value가 위치합니다.

위 객체를 해석해보겠습니다.

해석 - 객체 user에는 프로퍼티가 두 개 있습니다.

1. 첫 번째 프로퍼티 – "name"(key)와 "moomooj"(value)
2. 두 번째 프로퍼티 – "age"(key)과 26(value)
   
   
   
   

객체 내 프로퍼티를 추가, 삭제, 수정, 읽기

점 표기법을 이용하여 프로퍼티를 얻기

// 프로퍼티 값 얻기
alert( user.name ); // "moomooj"
alert( user.age ); // 26

점 표기법을 이용하여 프로퍼티를 추가하기 (프로퍼티 값에는 모든 자료형 가능)

// 프로퍼티 값 추가
user.isAdmin = true;

delete 연산자를 사용하면 프로퍼티를 삭제하기

delete user.age;

프로퍼티의 key에 띄어쓰기를 사용한다면 따옴표로 묶어주어야 합니다.

let user = {
  name: "moomooj",
  age: 26,
  "likes coding": true  // 띄어쓰기 문자형은 따옴표로 묶어야 합니다.
};

점 표기법 사용 시 규칙

1. key 값에 공백이 없어야 합니다.

let user = {
  "likes coding": true  // 점 표기법으로 값을 사용 할 수 없음
};

user."likes coding" = false // Uncaught SyntaxError: Unexpected string
user.likes coding = false  //Uncaught SyntaxError: Unexpected identifier 'coding'

2. 숫자로 시작하지 않아야 합니다.

cosnt user = {"1user": true,} 

console.log(user.1user) //Uncaught SyntaxError: missing 

3. $와 _를 제외한 특수 문자가 없어야 합니다.

const user = { $superUser: true };

console.log(user.$superUser) // true


const user = { "%superUser": true };

console.log(user.%superUser) // Uncaught SyntaxError

대괄호 표기법

점 표기법 사용 규칙 조건에 충족하지 못한 경우 대괄호 표기법을 사용할 수 있습니다.

예시1

let user = {};

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

// get
alert(user["likes coding"]); // true

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

예시2

let key = "likes coding";

user[key] = true;

대괄호 표기법의 활용 예제

let user = {
  name: "moomooj",
  age: 26
};

let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");

// 변수로 접근
alert( user[key] ); //"name"을 입력한 경우 moomooj / "age"을 입력한 경우 26

점 표기법은 해당 방식이 불가능합니다.

let user = {
  name: "John",
  age: 30
};

let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");
console.log(key) // name
alert( user.key ) // undefined

계산된 속성

객체를 생성할 때 객체 리터럴 내 key값에 대괄호를 사용할 수 있습니다.
이를 계산된 속성이라고 합니다.

let animal = prompt("어떤 동물을 좋아하시나요?", "강아지");

let fav = {
  [animal]: 5,
};
alert( fav.강아지 ); // 5

또는

let animal = prompt("어떤 동물을 좋아하시나요?", "강아지");
let fav = {};


fav[animal] = 5;

조금 더 복잡한 표현식

let animal = '강아지';
let fav= {
  [fruit + '고양이']: 5 // fav.강아지고양이 = 5
};

🤔해당 방식을 아직 실무에서 경험 해 본적이 없다.
아마도 곧 보겠..?

프로퍼티 줄여쓰기

key와 value 를 똑같이 쓰는 경우 단축이 가능합니다.

let user = {
   name, // name: name
   age,  //age: age
}

줄여쓰지 않아도 됩니다. 같이 사용도 가능합니다.

let user = {
	name,  //  name:name
	age: 30
}

프로퍼티 key 값의 제한사항

자바스크립트에서 for, let, return등 과 같은 예약어는 변수 이름으로 사용 할 수 없습니다.

하지만 객체 프로퍼티의 key 값의 경우 제한이 없습니다!!!

let obj = {
	for: 1,
	let: 2,
	return: 3
};

위 예시처럼 어떠한 문자형, 심볼값도 프로퍼티 key 가 될 수 있습니다.
문자형이나 심볼형에 속하지 않은 값은 문자열로 자동 형 변환됩니다.

다만 특별한 제약사항이 하나 있습니다.
바로 __proto__입니다.

let obj = {};
obj.__proto__ = 5; // 숫자를 할당합니다.
alert(obj.__proto__); // [object Object]

__proto__ 설명 페이지

in 연산자로 객체의 프로퍼티 확인하기

자바스크립트 객체의 중요한 특징 중 하나는, 존재하지 않는 프로퍼티에 접근하려 해도 에러가 발생하지 않고 undefined를 반환한다는 것입니다.

let user = {};

console.log( user.noSuchProperty === undefined ); // true

타입스크립트...가 필요해

연산자 in을 사용하면 더 쉽게 프로퍼티 존재 여부를 확인할 수 있습니다.

"key" in object

예시

let user = { name: "John", age: 30 };

console.log( "age" in user ); // true
console.log( "blabla" in user ); //  false

🤔 key === undefined를 사용하면 in 연산자가 필요 없을 거 같은데..?

프로퍼티 값 undefined 면 어쩌려구?

let obj = {
  test: undefined
};
console.log( obj.test ); // undefined
console.log( "test" in obj ); //true

보통 객체에 undefined를 사용하는 경우는 드물긴 합니다. (null을 더 사용합니다.)

for..in 반복문

for..in 반복문을 사용하면 객체의 모든 키를 순회할 수 있습니다.

사용법

for (key in object) {
  // 각 프로퍼티 키(key)를 이용하여 본문(body)을 실행합니다.
}

예시

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // 키
  console.log( key );  // name, age, isAdmin
  // 키에 해당하는 값
  console.log( user[key] ); // John, 30, true
}

for (let prop in obj)같이 key 말고 다른 변수명으로 자유롭게 사용 가능합니다.

객체 정렬 방식

위 반복문을 다루다 보니 궁금증이 생겼습니다.
반복문은 프로퍼티를 추가 한 순서대로 실행될까?,이 순서는 항상 동일할까?

답은 ❌, 자바스크립트는 특별한 방식으로 정렬됩니다.

아래 예제 참고

let codes = {
  "49": "독일",
  "41": "스위스",
  "44": "영국",
  // ..,
  "1": "미국"
};

for (let code in codes) {
console.log(code]; // 1, 41, 44, 49
console.log(codes[code]); // 미국, 스위스. 영국, 독일 
}

❗ 정수 프로퍼티
정수로 변환하거나 변환한 정수를 다시 문자열로 바꿔도 변형이 없는 프로퍼티

alert( String(Math.trunc(Number("49"))) ); // '49'
alert( String(Math.trunc(Number("+49"))) ); // '49'
alert( String(Math.trunc(Number("1.2"))) );// '49'

+49 와 1.2는 기존에 입력한 값과 다르므로 정수 프로퍼티가 아닙니다.

참조 - 자바스크립트 튜토리얼