본문 바로가기

javaScript

Object 객체(JS)

 

let user = {
	firstName: 'Steve',
	lastName: 'Lee',
	email: 'steve@codestates.com',
	city: 'seoul',
};

// firstNmae -> key(키)
// 'Steve' -> value(값)
// , 콤마로 키값을 구분해준다
  • 객체의 값을 사용하는 방법 두가지!
// 1. Dot notation
user.firstName; // 'Steve'
user.city; // 'Seoul'

//2. Bracket notation
user['firstName']; // 'Steve'
user['lastName']; // 'Lee'
// text만 들어가면 되기에 '', "", ``도 사용가능!
// 연습
let tweet = {
	writer: 'stevelee',
	createdAt: '2019-09-10 12:03:33',
	content: '프리코스 재밌어요!',
};

stevelee라는 아이디를 가진유저가 SNS에 새로운 글을 올렸다.
그가 작성한 글 "프리코스 재밌어요!"라는 내용을 bracket notation으로 어떻게 가져올까?
=> tweet['content']
or tweet.content

  • Error를 그냥 넘기지 마라
// console창에..
tweet[content]
> ReferenceError: content is not defined
// content가 정의되지 않았다?
// content라는 변수를 정의한 적이 없다.
// ['content']는 문자열 형식으로 받지만 [content]는 변수로 파악한다.

let keyName = 'content';
tweet[keyName]
> "프리코스 재밌어요!" 
tweet[keyName] === tweet['content']
> true

즉!
tweet[keyName]에서 keyName은 변수로 지정되고
tweet['content']에서 content는 키값!!(문자열)
  • dot/bracket notation을 이용해 값을 추가하자
let tweet = {
	writer: 'stevelee',
	createdAt: '2019-09-10 12:03:33',
	content: '프리코스 재밌어요!',
};

tweet['category'] = '잡담';
tweet.isPublic = true;
tweet.tags = ['#codestates', '#프리코스'];

  • delete를 이용해 삭제 가능
let tweet = {
	writer: 'stevelee',
	createdAt: '2019-09-10 12:03:33',
	content: '프리코스 재밌어요!',
};

delete tweet.createdAt;

  • in 연산자를 이용해 해당키가 있는지 확인 가능
let tweet = {
	writer: 'stevelee',
	createdAt: '2019-09-10 12:03:33',
	content: '프리코스 재밌어요!',
};

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


몰랐거나 이해가 안가거나 아직 부족한

  • Object.key().length  > 개체 안의 속성 개수를 구할 때!
  • for ~ in은 객체에 사용하고, for ~ of는 배열
  • 원본 배열을 변화시키는 메서드의 활용에 대하여(unshift(), shift(), pop(), push()...) <=> slice( , )와 차이