4.1 객체 - 객체

객체

📢 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있다.

 

 

객체의 생성

◾️ 객체생성자

let user = new Object();

◾️ 객체 리터럴

let user = {}; 

 

리터럴과 프로퍼티

◾️ Property → 키(key) : 값(value)로 구성

◾️ Property를 추가, 삭제할 수 있다. 

◾️ Property의 값(value)엔 모든 자료형 가능

◾️ 여러 단어를 조합해 Property 이름을 만든 경우에는 따옴표로 묶어줘야 한다. 

◾️ 마지막 Property 끝은 쉼표로 끝날 수 있다. (trailing, hanging쉼표)

let user = {     
  name: "suzu",  
  age: 25,
  "one two": 12,
};

delete user.age; // property 삭제
user.isAuth = true; // property 추가

console.log(user); // {name: "suzu", 'one two': 12, isAuth: true}

 

 

 

대괄호 표기법(square bracket notation)

◾️ 점 표기법 : key가 유효한 변수 식별자인 경우에만 사용할 수 있다. 

◾️ 대괄호 표기법 : key에 어떤 문자열이 있던지 상관없이 동작한다. 

◾️ 대괄호 표기법 안에서 문자열을 사용할 땐 문자열을 따옴표로 묶어줘야 한다. 

◾️ 모든 표현식의 평가 결과를 property key로 사용할 수 있다. 

◾️ 변수 key는 런타임에 평가 -> 평가가 끝난 이후의 결과가 property key로 사용

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");

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

console.log( bag.apple ); // 5

 

계산된 프로퍼티(computed property)

◾️ 객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우

◾️ [fruit]는 property이름을 변수 fruit에서 가져오겠다는 의미

◾️ 이미 속성을 읽고 설정하는 데 사용했을 수 있는 속성접근자 구문의 각괄호 표기법을 연상시킨다. MDN

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {};

bag[fruit] = 5;

console.log(bag); // { apple: 5 }

 

◾️ property 이름이 확정, 단순한 변수명_점 표기법 ➡️ 복잡한 상황_대괄호 표기법

 

 

단축 프로퍼티(property value shorthand)

◾️ 변수를 사용해 Property를 만드는 경우 Property의 key와 value 값이 동일 할 때 사용 단축구문을 사용할 수 있다. 

function makeUser(name, age) {
  return {
    name, // name: name 과 같음
    age : 30
  };
}

 

 

프로퍼티 이름의 제약사항

◾️ Property 이름엔 특별한 제약이 없다.

◾️ 문자형이나 심볼형에 속하지 않은 값은 문자열로 자동 형 변환된다. 

◾️ 예외 __proto__ ➡️ 프로토타입

let obj = {};
obj.__proto__ = 5;
alert(obj.__proto__); // [object Object]

 

 

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

◾️ 존재하지 않는 Property에 접근하려 해도 에러가 발생하지 않고 undefined를 반환한다
  → Property 존재 여부를 쉽게 확인 

let user = {};

console.log( user.noSuchProperty === undefined ); // true -> 프로퍼티가 존재X

◾️ 연산자 in을 사용하는 방법 ➡️ "key" in object

◾️ in 왼쪽엔 반드시 Property 이름이 와야 한다. (보통 따옴표로 감싼 문자열)

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

console.log( "age" in user ); // ture;
console.log( "address" in user ); // false

◾️ undefined 비교보다 보다 in을 사용하면 프로퍼티 존재 여부를 제대로 판별 할 수 있다. 

◾️ Property는 존재하는데 값에 undefined를 할당한 경우

◾️ 값을 ‘알 수 없거나(unknown)’ 값이 ‘비어 있다는(empty)’ 것을 나타낼 때는 주로 null을 사용한다.

let obj = {
  test: undefined
};

console.log(obj.test); // undefined
console.log("test" in obj); // true;

 

 

for...in 반복문

◾️ 객체의 모든 키를 순회할 수 있다.

◾️ 반복 변수명은 자유롭게 정할 수 있다. 

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

for (let key in user) {
  console.log(key);  // name, age, isAdmin
  console.log(user[key]); // suzu, 30, true
}

객체 정렬 방식

◾️ 정수 프로퍼티(integer property)는 자동으로 정렬되고, 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬

   💬 정수 프로퍼티 : 변형 없이 정수에서 왔다 갔다 할 수 있는 문자열

// 함수 Math.trunc는 소수점 아래를 버리고 숫자의 정수부만 반환한다.
alert( String(Math.trunc(Number("49"))) ); // '49' 기존에 입력한 값과 같으므로 정수 프로퍼티 O
alert( String(Math.trunc(Number("+49"))) ); // '49' 기존에 입력한 값(+49)과 다르므로 정수 프로퍼티 X
alert( String(Math.trunc(Number("1.2"))) ); // '1' 기존에 입력한 값(1.2)과 다르므로 정수 프로퍼티 X

◾️ 정수 프로퍼티인 경우

let codes = {
  "9": "독일",
  "1": "스위스",
  "4": "영국",
};

for (let code in codes) {
  alert(code); // 1, 4, 9
}

◾️ 정수 프로퍼티가 아닌 경우

let codes = {
  "+9": "독일",
  "+1": "스위스",
  "+4": "영국",
};

for (let code in codes) {
  alert(+code); // 9, 1, 4
}

 

 

 

---

 

📝 오늘 새롭게 배운 내용 📝

 

✅ 점 표기법과 대괄호 표기법의 차이점과 활용법

✅ 계산된 프로퍼티

✅ 프로퍼티 존재 여부 in 연산자

✅ 객체의 정렬 방식과 정수 프로퍼티

 

 

 

 

📌 [JAVASCRIPT_INFO 객체] 

객체

📌 [MDN 객체초기자]

객체 초기자