TIL - 객체

moontag·2022년 5월 11일
0

JavaScript TIL

목록 보기
5/20
post-thumbnail








객체 Object

여러개의 변수를 선언하지 않고 {key : value} 값으로 넣어주는 자료구조.

const obj1 = {}; // object literal
const obj2 = new Object(); // object constructor



객체 길이 세기

Object.keys(obj).length;

// ex)
let user = {
  firstName : 'Moon',
  lastName : 'kiki',
  email : 'Korea@naver.com',
  country: 'Korea',
}



Property 접근하기

1. dot notation

정해진 .key값만 입력해서 찾을 수 있다

//dot notation
user.firstName; // 'Moon'
user.country;  // 'Korea'

2. Bracket notation

[ ] 안에 '', "", `` 의 문자열로 key를 통해 value를 조회한다

  • key값이 동적인 변수일 때
  • user[email] 은 ''가 없어 변수로 취급된다
//Bracket notation
user['firstName']  // 'Moon'
user['country']   // 'Korea'

// 변하는 변수일때 obj[key]로 가져오기
function printValue(obj, key){
  console.log(obj[key]);
}
printValue(moon, 'name');




값 추가 / 삭제

dot / bracket notation로 값 추가 가능

let insta = {
  writer: 'jessie',
  createdAt: '2022-05-11 09:22:22',
  content: '울랄라'
};

insta['hashtag'] = ['#일상', '#노래'];
insta.isPublic = true;
insta.likes = '1000';

delete로 삭제

let insta = {
  writer: 'jessie',
  createdAt: '2022-05-11 09:22:22',
  content: '울랄라'
};

delete insta.createdAt; 
//{writer: 'jessie', content: '울랄라'}




in 연산자

'속성' in 객체;
객체에 해당 키가 있는지의 여부를 boolean 값으로 리턴

let insta = {
  writer: 'jessie',
  createdAt: '2022-05-11 09:22:22',
  content: '울랄라'
};

'content' in insta; // true
'updatedAt' in insta; // false




for in vs for of

  • for in - 객체 반복문 : 객체 속성 순환
for(key in insta){
  console.log(insta); // writer, createdAt, content
}
  • for of - 배열 반복문 : 배열 값 순환
const array = [1,2,3,4,5];
for(value of array){
  console.log(value);  // 12345
}




cloning

  • Object.assign
const user = { name: 'moon', age: '20'};
const user2 = user; // 복사
user2.name = 'coder';
console.log(user); // { name: 'coder', age: '20'}

// old way
const user3 = {};
for(key in user){
  user3[key] = user[key];
}
console.log(user3); // { name: 'moon', age: '20'}

// Object.assign
// js기본 탑재 모든 obj는 Object를 참조한다
const user4 = {};
Object.assign(user4, user);
// const user4 = Object.assign({}, user);
console.log(user4); // { name: 'moon', age: '20'}

// another ex
const color1 = {color: 'red'};
const color2 = {color: 'blue', size: 'big};
const mixed = Object.assign({}, color1, color2);
console.log(mixed.color); // blue
console.log(mixed.size); // big










profile
터벅터벅 나의 개발 일상

0개의 댓글