객체의 모든것
본문 바로가기

Frontend/모던자바스크립트

객체의 모든것

 

1. 리터럴과 프로퍼티

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

- {}를 이용해 객체를 선언하는것을 객체 리터럴이라고한다.

- 객체안에 키:값쌍으로 구성된 프로퍼티가 들어간다.

- 키엔 문자형 값에는 모든 자료형 오케이

let user = {     // 객체
//프로퍼티1
  name: "John",  // 키: "name",  값: "John"
//프로퍼티2
  age: 30        // 키: "age", 값: 30
};

user라는 객체(서랍장)에 2개의 프로퍼티(파일)가있고 이름표는 각각 name, age이다

- 프로퍼티의 추가, 삭제, 수정

- 계산된 프로퍼티 : 객체 리터럴안에 프로퍼티 키가 []로 되어있음

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과 같음
  };
}

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

- 자바스크립트는 다른언어와달리 객체내 존재하지않는 프로퍼티에 접근하려해도 오류대신 undefined를 반환한다. 

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

"key" in Object는 false/true반환

- 객체의 모든 키 순회하기

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

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

 

object.keys, object.values, object.entires

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

Object.keys(user)//["name", "age"]
Object.values(user)//["John", 30]
Object.entries(user)//[ ["name","John"], ["age",30] ]

활용예시

// 값을 순회합니다.
for (let value of Object.values(user)) {
  alert(value); // Violet과 30이 연속적으로 출력됨
}

객체변환

객체엔 map, filter과 같은 배열전용 메서드를 사용할수없기에 배열을 반환해주는 entries를 활용한다.

 

배열을 다시 객체로 돌리기

Object.fromEntries(array)
let prices = {
  banana: 1,
  orange: 2,
  meat: 4,
};

let doublePrices = Object.fromEntries(
  // 객체를 배열로 변환해서 배열 전용 메서드인 map을 적용하고 fromEntries를 사용해 배열을 다시 객체로 되돌립니다.
  Object.entries(prices).map(([key, value]) => [key, value * 2])
);

alert(doublePrices.meat); // 8

2. 참조에 의한 객체 복사

변수를 복사할 땐 객체의 참조 값이 복사되고 객체는 복사되지않는다.

a = 1;
b = 1;
a == b //true

c = {}
d = {}
c == d //false

 객체 복사

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

//방법1
//빈 객체에 user프로퍼티 전부를 복사해 넣는다
for(let key in user){
	clone[key] = user[key];
}

//방법2
let clone2 = Object.assign({}, user)

 

반응형