자바스크립트-객체

객체

객체형은 다양한 데이터를 담을 수 있다. 키로 구분된 데이터 집합이나 복잡한 개체를 저장할 수 있다.

 

-객체를 만든는 문법

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

중괄호 {}를 이용해 객체를 선언하는 것을 객체 리터럴이라고 부른다.

 

-리터럴과 프로퍼티

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

키:값으로 프로퍼티가 들어간다.

 

delete user.age;

delete 연산자로 프로퍼티를 삭제할 수 있다.

 

let user = {
  name: "John",
  age: 30,
  "likes birds": true,  // 복수의 단어는 따옴표로 묶어야 합니다.
};

여러 단어를 조합해 프로퍼티 이름을 만든 경우에는 따옴표로 묶어야한다.

그리고 마지막 프로퍼티 끝은 쉼표로 끝날 수 있다. => 프로퍼티 추가, 삭제, 이동이 쉬워진다.

 

const user = {
  name: "John"
};

user.name = "Pete"; // (*)

alert(user.name); // Pete

상수 객체는 수정될 수 있다. 

 

-대괄호 표기법

let user = {};

// set
user["likes birds"] = "안녕";

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

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

대괄호 표기법을 사용하면 파이썬의 딕셔너리처럼 사용할 수 있다.

 

-계산된 프로퍼티

객체를 만들 때 객체 리터럴 안의 프로터티 키가 대괄호이면 계산된 프로퍼티라고 부른다.

 

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

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

alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.

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

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

2개의 코드는 동일하게 동작한다. 하지만 계산된 프로퍼티를 사용한 2번째 예시가 더 깔끔해 보인다.

 

-복잡한 대괄호 표현식

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

대괄호 표기법은 프로퍼티 이름과 값의 제약이 없어 점 표기법보다 훨씬 강력하지만 작성하기 번거롭다.

=> 단순한 이름은 점 표기법, 복잡한 상황이면 대괄호 표기법 사용

 

-단축 프로퍼티

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 와 같음
    // ...
  };
}

이렇게 쓰면 위 코드와 같은데 단축해서 사용할 수 있다.

 

• 프로퍼티 이름에는 __proto__는 역사적인 이유로 특별 대우를 받는다.

 

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

자바스크립트는 존재하지 않은 프로퍼티에 접근하면 에러가 아니라 undefined를 반환한다.

 

let user = {};

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

이렇게 undefined로 검사했을 때, true가 나오면 프로퍼티가 존재하지 않음을 의미한다.

 

undefined와 비교하지 않아도

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

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

이렇게 비교하면 프로퍼티 존재 여부를 알 수 있다.

 

-for...in 반복문

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

 

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

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

이 코드는 user의 모든 프로퍼티가 출력된다.

 

-객체 정렬 방식

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

 

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

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

이렇게 코드를 짜도 실행해보면 미국이 먼저 출력된다. 나라 키가 정수여서 1, 41, 44, 49 순으로 프로퍼티가 자동 정렬되었다.

 

• "49", "+49", "1.2"가 있다고 하면 정수 프로퍼티는 49만이다. 왜냐하면 문자열 49는 정수로 변환했다가 다시 문자열로 바꿔도 변형이 없기 때문이다.
• 키가 정수가 아니면 작성된 순서대로 프로퍼티가 나열된다.

만약 위 코드에서 나라번호 순으로 출력되게 하려면 속임수를 쓰면 된다.

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

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

각 키에 +를 붙이면된다.

 

-예제

1번

let schedule = {};

alert( isEmpty(schedule) ); // true

schedule["8:30"] = "get up";

alert( isEmpty(schedule) ); // false

위 코드처럼 작동하게 하는 함수 작성

 

function isEmpty(obj){
    for (let key in obj){
        return false;
    }
    return true;
}

for in문으로 프로퍼티가 있으면 false를 출력, 아니면 true 출력

 

2번

함수 작성하기

// 함수 호출 전
let menu = {
  width: 200,
  height: 300,
  title: "My menu"
};

multiplyNumeric(menu);

// 함수 호출 후
menu = {
  width: 400,
  height: 600,
  title: "My menu"
};

 

답

function multiplyNumeric(obj) {
  for (let key in obj) {
    if (typeof obj[key] == 'number') {
      obj[key] *= 2;
    }
  }
}

숫자인지 확인하려면 number랑 비교하면된다.