WEB/Javascript

[JAVASCRIPT.INFO] 4.1 객체

dev-olive 2022. 12. 25. 17:50

주제 탐색

  • 자바스크립트의 여덟 가지 자료형 중 일곱 개는 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 원시형이라고 부르지만, 객체형은 원시형과 달리 다양한 데이터를 담을 수 있다.

리터럴과 프로퍼티

  • let user = new Object();    // '객체 생성자' 문법
let user = {};                        // '객체 리터럴' 문법
  • let user = {        // 객체
  name: "John",
  age: 30,            // 마지막 프로퍼티 끝은 쉼표로 끝날 수 있다.(trailing, hanging 쉼표)
}

    user 객체에는 프로퍼티가 두 개 있다.(name프로퍼티, age프로퍼티)

  • 상수 객체는 수정될 수 있다. const는 user = ...를 전체적으로 설정하려고 할 때만 오류가 발생한다.

    const user = { name: "John" };
user.name = "Pete"        // 가능

  • 변수 key는 런타임에 평가되기 때문에 사용자 입력값 변경 등에 따라 값이 변경될 수 있다. 단 대괄호 표기법일 때만 가능하다.(점 표기법일 경우 오류)

    let user = {
  name: "John",
  age: 30,
}
let key = prompot("사용자의 어떤 정보를 얻고 싶으신가요?", "name");

alert(user[key]);
//alert(user.key)         // undefined

  • 객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우, 이를 계산된 프로퍼티(computed property)라고 한다.

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

단축 프로퍼티

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

    이름과 값이 변수의 이름과 동일한 경우 프로퍼티 값 단축 구문 을 사용할 수 있다.

프로퍼티 이름의 제약사항

  • 객체 프로퍼티에서는 변수명을 예약어로 사용가능하다

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

  • 단, __proto__는 예외적으로 작동한다.

    let obj = {};
obj.__proto__ = 5;        // 숫자를 할당
alert(obj.__proto__);    // [object Object] - 숫자를 할당했지만 값은 객체가 됨

    원시값 5를 할당했는데 무시된 것을 확인할 수 있다.

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

  • 객체는 존재하지 않는 프로퍼티에 접근하려 해도 에러가 발생하지 않고 undefined를 반환한다.

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

    let obj = {
  test: undefined
};
alert(ojb.test);        // 값이 'undefined'이므로, alert 창엔 undefined / 그러나 프로퍼티 test는 존재함
alert("test" in obj); // 'in'을 사용하면 프로퍼티 유무를 제대로 확인할 수 있다.

'for...in' 반복문

  • 프로퍼티엔 순서가 있을까? 반복문은 프로퍼티를 추가한 순서대로 실행되는가?

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

    let codes = {
  "49" : "독일",
  "41" : "스위스".
  "44" : "영국",
  "1" : "미국"
}
for (let code in codes){
  alert(code); //1, 41, 44, 49
}
    let codes = {
  "+49" : "독일",
  "+41" : "스위스",
  "+44" : "영국",
  "+1" : "미국"
}
for (let code in codes) {
  alert(+code); // 49, 41, 44, 1
}
저작자표시