TIL] Unit. 8 배열과 객체 2 - 코드스테이츠

SEB_FE_45

Section.1 Unit.8 배열과 객체 2

---

1. 객체

가. 객체의 개념

객체란 회원주소록과 같이 하나의 변수(회원 정보)에 의미있는 데이터들(이름, 주소, 연락처, 생년월일 등)을 묶음으로 관리할 수 있는 데이터 타입이다.

객체의 구성은 아래 코드블럭과 같다.

//객체의 구조
let object = { 
	property1 : value,
	property2 : value,
	...,
	propertyn : value
}

// {} : 중괄호로 묶여있다.
// 속성(property)과 값(value)로 나눠져있다. 
// 속성 : 값의 묶음을 쌍이라 한다.
// 속성과 값의 구분은 콜론(:) 으로 한다. 
// 여러 (속성값)쌍이 있는 경우에는 쉼표(,)로 구분한다.

만약 회원 정보를 배열로 작성한다면, 어떤 문제가 생길까?

코드를 작성한 사람의 경우 회원정보임을 알고, 각각의 인덱스 요소가 무엇을 의미하는 지 알것이다. 다만, 다른 사람이나 컴퓨터가 이 코드를 본다면 어떨까?

해당 배열의 인덱스 요소가 무엇을 의미하는지 해석하는데 많은 시간이 필요할 것이다. 

반면, 객체를 사용한다면 각각의 값들이 어떤 의미인지를 해석하는데 유용하다.

// 배열
let user = ['YongTree', 30, '010-xxxx-xxxx', '19xx.xx.xx' ...]

// 객체
let user = {
	name: 'YongTree',
	age: 30,
	CP: '010-xxxx-xxxx',
	year: '19xx.xx.xx' ...
}

// 회원정보와 같은 데이터는 객체로 정리하는게 보기가 편하다.

 

---

나. 객체 값 사용 방법

객체 값을 사용하는 방법은 1) dot notation, 2) bracket notation 두 가지가 있다.

let user = {
	name: 'YongTree',
	age: 30,
	CP: '010-xxxx-xxxx',
	year: '19xx.xx.xx' ...
}

//dot notation으로 속성 값 가져오기(object.property;)
user.name;  // 'YongTree'


//bracket notation으로 속성 값 가져오기(object['property'];)
user['name']; // 'YongTree'

bracket notation 으로 속성값을 불러올 때, 대괄호([ ]) 내부에 작성하는 속성은 문자열로 입력해주어야 한다.

두 방법은 모두 속성 값을 불러올 수 있지만, 사용 방법에 차이를 보인다.

우선 속성(property)가 유동적일 경우, bracket notation만 사용이 가능하다.

속성이 고정되있는 경우에는 두 가지 방법 모두 유효하다.

---

다. 객체 속성을 추가, 삭제, 조회 방법

let user = {
	name: 'YongTree',
	age: 30,
	CP: '010-xxxx-xxxx',
	year: '19xx.xx.xx' ,
	city: seoul // 추가
}

// dot vs bracket(object.property / object['property'])
user.name === user['name'] // true

// 객체 내 속성:값 추가(object.property = value / object['property'] = value)
// value : number, string, boolean, array, object 등 가능
user.city = seoul; 
user['city'] = seoul;

// 객체 내 속성:값 삭제(delete object.property / delete object['property'])
delete user.age; 
delete user['age'];

// 객체 조회(in 연산자) - boolean 타입으로 반환
property in object; // true of false

---

2. 하루 늦은 회고..

객체와 배열의 차이에 대해 알 수 있었다.

배열의 경우 코플릿을 풀면서 코딩 공부하는 것을 잘 선택한건지 고민이 생길 정도로 답답함이 가득했었다.

그런데 객체와 관련한 코플릿을 푸는 도중 이전에는 보이지 않던 코드의 길이 떠올랐다.

객체 코플릿에서도 레퍼런스를 많이 참조하긴 했지만, 디버거를 돌려보면서 왜 이렇게 동작하는지를 공부했다.

그리고 내가 쓴 코드는 어디서 동작을 하지 않는지 고민해보면서, 코드에 대한 이해도가 늘어난 것 같다.

새로운 언어를 학습함에 있어 3주는 짧은 시간이다. 완벽하게 하는 것이 좋지만, 지금은 실수하고 많이 사용해봐야 한다.

실수하고 생각이 나지 않아 짜증나는 일이 생기겠지만, 좌절하지 말고 한 발자국씩이라도 딛어보도록 하자!