코어 자바스크립트1: 객체

객체

객체

✏️ 상수 객체는 수정할 수 있다

→ 4번째 줄에서 오류를 일으키는 것처럼 보일 수 있지만 그렇지 않다

→ const는 user의 값을 고정하지 그 내용을 고정하지 않는다

const nuser = {
	name: "John"
};
user.name = "Pete";
alert(user.name);

 

 

 

 

✏️  계산된 프로퍼티(computed property)

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

→ [1+4] 혹은 [’Hello’ + ‘World’]와 같은 식 자체가 들어가는 것도 가능하다

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

alert( bag.apple );

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

bag[fruit] = 5;

 

 

 

 

🧩 문제

Q1. 객체야 안녕?

다음 각 동작을 한 줄씩, 코드로 작성해보세요.

let user = {};          // 빈 객체 user를 만듭니다.
user.name = "John";     // user에 키가 name, 값이 John인 프로퍼티를 추가하세요.
user.surname = "Smith"; // user에 키가 surname, 값이 Smith인 프로퍼티를 추가하세요. 
user.name = "Pete";     // name의 값을 Pete로 수정해보세요.
delete user.name;       // user에서 프로퍼티 name을 삭제하세요.

 

 

 

Q2. 객체가 비어있는지 확인하기

객체에 프로퍼티가 하나도 없는 경우 true, 그렇지 않은 경우 false를 반환해주는 함수 isEmpty(obj)를 만들어보세요.

let schedule = {};
alert( isEmpty(schedule) );
schedule["8:30"] = "get up";
alert( isEmpty(schedule) );

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

 

 

 

Q3. 변하지 않는 객체?

const와 함께 선언한 객체를 변경하는 게 가능할까?

const user = {
	name: "John"
};
user.name = "Pete";
// const는 user의 **값**을 고정하지 그 **내용**을 고정하지 않는다

 

 

 

Q4. 프로퍼티 합계 구하기

모든 팀원의 월급에 대한 정보를 담고 있는 객체가 있다고 해봅시다.

모든 팀원의 월급을 합한 값을 구하고 그 값을 변수 sum에 저장해주는 코드를 작성해보세요.

sum엔 390이 저장되어야겠죠?

[주의] salaries가 비어있다면 sum에 0이 저장되어야 합니다.

let salaries = {
  John: 100,
  Ann: 160,
  Pete: 130
}
let sum = 0;
for (let key in salaries) {
	sum += salaries[key];
}
alert(sum);

 

 

 

Q5. 프로퍼티 값 두 배로 부풀리기

객체 obj의 프로퍼티 값이 숫자인 경우 그 값을 두 배 해주는 함수 multiplyNumeric(obj)을 만들어보세요.

multiplyNumeric은 아무것도 반환하지 않아도 괜찮습니다. 객체 자체를 수정해주기만 하면 됩니다.

[힌트] typeof를 사용하면 프로퍼티 값이 숫자인지 확인할 수 있습니다.

function multiplyNumeric(obj){
	for (let key in obj){
		if (typeof obj[key] == 'number') {
			obj[key] *= 2;
		}
	}
}
// 함수 호출 전
let menu = {
  width: 200,
  height: 300,
  title: "My menu"
};

multiplyNumeric(menu);

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