[코어 JS] 4.1 - 객체: 기본

4.1 객체

자바스크립트는 일곱가지의 원시형과 한가지의 객체형이 존재

중괄호{ }로 구성된 객체는 "키(key-문자형) : 값(value-자료형)"으로 구성된 프로퍼티로 구성

//빈 객체를 만드는 두가지 방법
let user = new Object(); //'객체 생성자'문법
let user = {}; //'객체 리터럴' 문법

 

- 리터럴과 프로퍼티

let user = { //객체
 name : "John", //키(이름, 식별자): name, 값: John
 age : 30 //키(이름, 식별자): age, 값: 30
};

 

점 표기법(dot notation)을 이용한 프로퍼티 값 읽기

//프로퍼티 값 얻기
alert( user.name ); //John
alert( user.age ); //30

 

프로퍼티 값엔 모든 자료형이 올 수 있음

user.isAdmin = true; //불린형 프로퍼티 추가
delete user.age; //프로퍼티 삭제

 

여러 단어 조합의 프로퍼티 이름은 따옴표로 묶어주기

let user = {
 name: "John",
 age: 30,
 "likes birds": true //따옴표로 묶기
 sex: "male", //마지막 프로퍼티는 쉼표로 끝내면 추가(trailing, hanging), 추가,이동,삭제시 용이
}

 

상수(const) 객체는 수정될 수 있음 _ const는 user 전체의 값은 고정하지만 내부는 수정가능

const user = {
 name: "John"
};

user.name = "Pete"; //수정됨

alert(user.name); //Pete

 

- 대괄호 표기법(square bracket notation)

일반적으로 쓰이는 점 표기법은 '유효한 변수 식별자'인 경우에만 유효

1. 공백 2. 숫자로 시작 3. $,_ 이외의 특수문자 가 있는 경우에 사용

let user = {};

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

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

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

대괄호 표기법 내에서는 문자열을 따옴표로 묶어야함

 

대괄호 표기법 사용시에는 모든 표현식의 평가 결과를 프로퍼티 키로 사용 가능

let key = "likes birds";

//user["likes birds"] = true;와 동일
user[key] = true;

값인 likes birds가 아닌 변수 key를 사용하면 변경된 값이 반영되므로 유용하게 활용가능

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

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

//변수(대괄호 표기법)으로 접근
alert(user[key]); //John (프롬프트 창에 "name"을 입력한 경우)

//점표기법으로 접근
alert(user.key); //undefined

 

- 계산된 프로퍼티(computed property)

객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸인 경우

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {
 [fruit]:5, //변수 fruit에서 프로퍼티 이름을 동적으로 받아옴
};

alert(bag.apple); //fruit에 "apple"이 할당됨

// =

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

// 변수 fruit을 사용해 프로퍼티 이름을 만들었습니다.
bag[fruit] = 5;

질문) 프로퍼티의 이름은 무엇을 의미????

사용자가 프롬프트 대화상자에 apple을 입력했다면 bag엔 {apple:5}가 할당됨

 

대괄호 표기법에서는 복잡한 표현식 사용 가능

let fruit = 'apple';
let bag = {
  [fruit + 'Computers']: 5 // bag.appleComputers = 5
};

 

▷ 대괄호 표기법은 프로퍼티 이름과 값의 제약을 없애주므로 점 표기법보다 강력하나 작성이 번거로움,

프로퍼티 이름이 확정되고 복잡한 상태의 경우에 유용

 

- 단축 프로퍼티(property value shorthand) _ 프로퍼티와 변수의 값이 동일할 때 코드를 짧게줄일 수 있음

function makeUser(name, age) {
  return {
    name: name,
    age: age,
    // ...등등
  };
}

let user = makeUser("John", 30);
alert(user.name); // John

//▽

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

//객체에서도 사용가능
let user = {
  name,  // name: name 과 같음
  age: 30
};

 

- 프로퍼티 이름의 제약사항

변수의 키값(이름)에는 for, let, return과 같은 예약어를 사용할 수 없으나 객체 프로퍼티에는 제약이 없음

// 예약어를 키로 사용해도 괜찮습니다.
let obj = {
  for: 1,
  let: 2,
  return: 3
};

alert( obj.for + obj.let + obj.return );  // 6

+

//키값에 숫자 0을 넣으면 문자열 "0"으로 자동 변환
let obj = {
  0: "test" // "0": "test"와 동일합니다.
};

// 숫자 0은 문자열 "0"으로 변환되기 때문에 두 얼럿 창은 같은 프로퍼티에 접근합니다,
alert( obj["0"] ); // test
alert( obj[0] ); // test (동일한 프로퍼티)

이처럼 객체 프로퍼티 키값은 제약이 없지만 __proto__는 예외

let obj = {};
obj.__proto__ = 5; // 숫자를 할당합니다.
alert(obj.__proto__); 
// [object Object] - 숫자를 할당했지만 값은 객체가 되었습니다. 의도한대로 동작하지 않네요.

 

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

존재하지않는 프로퍼티에 접근시 에러가 발생하지 않고 undefined를 반환하는 JS 객체의 특징

let user = {};

alert( user.noSuchProperty === undefined ); 
// true는 '프로퍼티가 존재하지 않음'을 의미합니다.

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

alert( "age" in user ); 
// user.age가 존재하므로 true가 출력됩니다.

alert( "blabla" in user ); 
// user.blabla는 존재하지 않기 때문에 false가 출력됩니다.

in 왼쪽엔 반드시 프로퍼티이름 (=따옴표를 감싼 문자열)

let user = { age: 30 };

let key = "age";
alert( key in user ); 
// true, 변수 key에 저장된 값("age")을 사용해 프로퍼티 존재 여부를 확인합니다.

 

in연산자를 사용하는 이유 _ 프로퍼티값에 undefined를 할당한 경우에 true를 출력하는 오류 방지

let obj = {
  test: undefined
};

alert( obj.test ); 
// 값이 `undefined`이므로, 얼럿 창엔 undefined가 출력됩니다. 그런데 프로퍼티 test는 존재합니다.

alert( "test" in obj ); 
// `in`을 사용하면 프로퍼티 유무를 제대로 확인할 수 있습니다(true가 출력됨).

but, 주로 값을 알수 없거나 비어있는 경우는 null을 사용

 

-'for...in'반복문

객체의 모든 키를 순회하는 반복문

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

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

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

 

- 객체 정렬 방식

정수 프로퍼티 : 자동 정렬

그 외 프로퍼티 : 추가한 순서대로 정렬

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

for (let code in codes) {
  alert(code); // 1, 41, 44, 49
}

//+49와 1.2는 정수 프로퍼티가 아님


let user = {
  name: "John",
  surname: "Smith"
};
user.age = 25; // 프로퍼티를 하나 추가합니다.

// 정수 프로퍼티가 아닌 프로퍼티는 추가된 순서대로 나열됩니다.
for (let prop in user) {
  alert( prop ); // name, surname, age
}

user.age = 25; // 프로퍼티를 하나 추가합니다.

// 정수 프로퍼티가 아닌 프로퍼티는 추가된 순서대로 나열됩니다.
for (let prop in user) {
  alert( prop ); // name, surname, age
}

 

요약

- 객체는 특수한 기능을 가진 연관 배열(associative array)

- 객체는 프로퍼티(키-값)을 저장

  프로퍼티 키는 문자열이나 심볼이어야 함

  값은 어떤 자료형도 가능

 

- 객체의 프로퍼티에 접근하는 두가지 방법

  점 표기법: obj.property

  대괄호 표기법: obj["property"] , obj[varWithKey]와 같이 변수를 키에서 가져올 수 있음 ???질문

 

- 추가 연산자 사용 가능

  프로퍼티 삭제 : delete obj.prop

  객체내 해당 key값을 가진 프로퍼티 존재 유무 확인 : "key" in obj

  프로퍼티 나열 : for( let key in obj )

 

- JS의 다른 객체 종류

  Array : 정렬된 데이터 컬렉션 저장

  Date : 날짜와 시간 정보 저장

  Error : 에러 정보 저장

  기타

 

과제