S1U9 객체 정리

이유정·2022년 9월 5일

코드스테이츠 TIL

목록 보기

10/62

각기 다른 값을 가질 수 있지만, 입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있다. 이렇게 공통적인 속성을 가지는 경우 객체를 사용해야 합니다.

회원 주소록을 만들때

let userFirstName = 'steve'
let userLastName= 'Lee'
let userEmail = 'steve'
let userCity = 'seoul'

let userFirstName = 'yujeong'
let userLastName= 'Lee'
let userEmail = 'fordang@naver.com'
let userCity = 'seoul'

문제점:)

관계성이 없다.(userFirstName과 userLastName의 관계성이 연결되지 않는다. )
코드가 너무 길어진다.

이 상황에서 배열을 쓴다면?

각 값이 하나의 변수로 묶여있긴 하지만 이 경우에는 각 index가 어떤 정보를 갖고 있는지 미리 알고 있어야 한다. index로 접근할 경우 가독성도 떨어진다.

let user = [
'Steve',
'Lee', 
'steve@codestates.com'
'Seoul'
]

따라서 객체를 쓴다.
하나의 변수안에 여러가지 정보가 담겨있을때 적합한 자료구조

객체선언을 이런식으로 한다.

let user : {(중괄호)
firstName: 'Steve',(쉼표)
lastName(키):(콜론)  'Lee'(값),
email: 'steve@codestates.com',
city: 'Seoul',
}

객체의 값을 사용하는 방법은 두가지가 있다.

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

방법1: Dot notation

user.firstName; //'Steve'
user.city; //'Seoul'

=> 키 값이 동적일때 사용 못한다.

방법2: Bracket notation(대괄호)

user['firstName']; //'Steve'
user['city']; // 'Seoul'

=> 키 값이 동적으로 변할때 사용한다.

bracket notation을 사용하여 값을 조회할 때는 key를 따음표('', "")로 감싸주어야 합니다. 백틱( )도 사용이 가능합니다.

Chapter 2-2 객체 다루기

1) 변수를 활용해서 객체를 다룰 수 있다.

let content = 'content'
tweet[content] === tweet['content']
true

2) 동적으로 바뀌는 인자들을 받는 매개변수로 객체를 가져오려면
obj.propertyName 놉
obj['propertyName'] 놉
obj[propertyName] 오키

let person = {
    name:'steve',
    age: 16
};

function getProperty(obj, propertyName) {
    return obj[propertyName]
}

let output = getProperty(person, 'name');
console.log(output);
//steve
let output2 = getProperty(person, 'age');
console.log(output2)
//16

3)dot/bracket notation을 이용해

let tweet = {
  writer : 'stevelee',
  createdAt: '2019-09-10 12:03:33',
  content: '프리코스 재밌어요!'
}

값을 추가할 수도 있다.
tweet['category'] = '잡담';
tweet.isPublic = true;
tweet.tags = ['#코드스테이츠', '#프리코스'];

삭제도 가능하다. (속성 그 자체를 삭제하는 것)
delete tweet.createdAt;
// createdAt 키-값 쌍을 지웁니다.
// tweet은 다음과 같게 된다
// {writer: 'stevelee', content: '프리코스 재밌어요!'}

in 연산자를 이용해 해당하는 키가 있는지 확인할 수 있다.

let tweet = {
  writer : 'stevelee',
  createdAt: '2019-09-10 12:03:33',
  content: '프리코스 재밌어요!'
}

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

알고가야 할 것)
1) obj[] 이 대괄호 안에 있는 것을 변수로 취급한다.
따라서 '', "",``를 사용해줘야 한다.
변수로서 사용하려면
let key = 'string'
이렇게 선언한 후,
obj[key] 를 사용하면 된다.

2) 자바스크립트 상에서는 두 배열을 "주소가 다른 두 개의 빈 배열"이라고 생각한다.