[javascript] 객체

객체는 왜 쓸까❓

회원 주소록을 만들어본다고 가정해볼때

let userFirstName = 'Steve';
let userLastName = 'Kim';
let userEmail = 'steve@gmail.com';
let userCity = 'Seoul';

한사람에 정보에 이름, 이메일, 사는 지역 등을 필요하다.
만약 다른 한사람이 추가 되었다고 한다면 user2FirstName, user2LastName ...으로 변수를 따로 선언해서 정보를 넣어줘야 할까??? 데이터가 1000개라고 생각해보면 일일히 다 써주는건 매우 비효율적이고, 상상만해도 끔찍하다.

이런 문제를 개선하기 하기 위해 배열을 써본다고 하자.

let user = [
	'Steve',
	'Kim',
	'steve@gmail.com',
  	'Seoul';
];

let user2 = [
	'Dan',
	'Park',
	'dan@gmail.com',
  	'Busan';
];

user별로 정보가 묶여있긴하지만 index가 값이 Steve라 했을 때 어떤 정보를 나타내는지 명확히 알 수 없기 때문에 index가 어떤 정보인지 미리 알고 있어야하고 index로 접근하는 것이 가독성도 떨어진다.

이럴 때 효율적으로 사용할 수 있는 것이 객체이다.
객체는 하나의 변수안에 여러가지의 정보가 담겨져 있을 때 쓰기 적합하다.

배열과 객체의 가장 큰 차이점은 순서의 유무이다. 배열은 요소에 0부터 순차적으로 접근할 수 있지만 객체는 속성에 순서대로 접근하지 않고, key를 통해서 value에 접근한다.

객체 생성

객체는 키와 값의 쌍(key-value)으로 구성된 프로퍼티(property)로 이루어져 있다. 중괄호로 객체를 만들어 주고, 키, 값 사이는 콜론(:)으로 구분한다.

키(key)의 값의 형태는 모든 자료형이 올 수 있다.

let user = {
	FirstName: 'Steve',
	LastName: 'Kim',
	Email: ['steve@gmail.com', 'steve2@naver.com'],
	City: 'Seoul',
  	Married: true
};

프로퍼티 값 얻기

프로퍼티 값을 얻는 방법은 두 가지가 있다.

프로퍼티의 값은 키를 불러와서 얻을 수 있는데 Dot notation과 Bracket notation으로 키를 표현해 값을 얻을 수 있다.

1) Dot notation

점(.)을 사용해 나타내는 표시법이다.

let me = {
  firstName: 'joni',
  lastName: 'park'
}
user.lastName;	// park

변수명.키를 쓰면 lastName의 값을 얻을 수 있다.

2) Bracket notation

대괄호([])를 사용해 나타내는 표시법이다. 이 때 대괄호 안에 키는 문자열로 들어가야한다.

let me = {
  firstName: 'joni',
  lastName: 'park'
}
user['firstName'];	// joni

user[city]로 치면 에러가 나온다.
➡️ 문자열 형식으로 써주지 않아서 is not defined 에러 메세지가 뜬다. 키값이 아니라 city를 변수로 인식한다.

Dot notation은 키가 딱 정해져있을 때 쓰기 편하고, 키를 변수로 받을 경우에는 Bracket notation을 써야한다. 키가 동적일 때 주로 쓰인다.

property매개변수가 string 타입으로 key 자리에 들어갈 때, key는 property에 전달되는 인자값에 따라 변할 것이다.
Dot notation을 쓰면 property 자체를 하나의 key로 인식하기 때문에 전달인자를 받아오지 못한다. 이때 Bracket notation을 써준다.

//obj : 임의의 속성을 갖는 객체
// property : string 타입의 키
// value :기본 자료형(Primitive type)

function addPropertyAndValue(obj, property, value) {
  obj[property] = value;
}

프로퍼티 추가

dot/bracket notation을 이용해 값을 추가 할 수도 있다.

정의되지 않은 key에 값을 할당하게되면 객체에 프로퍼티가 추가된다.

let user = {
	FirstName: 'Steve',
	LastName: 'Kim',
	Email: 'steve@gmail.com',
	City: 'Seoul'
};

user['Job'] = 'CEO';
user.isWomen = true;
//배열을 값으로 넣은 것
user.tags = ['#joy', '#fun'];

프로퍼티 삭제

delete 키워드를 이용해 삭제도 가능하다.

delete 변수명.키;

존재하지 않는 키를 삭제하는 명령을 쓰면 에러도 나지 않고 아무 영향을 미치지 않는다.

let user = {
	FirstName: 'Steve',
	LastName: 'Kim',
	Email: 'steve@gmail.com',
	City: 'Seoul'
};

delete user.City;	//true;
user;	// {FirstName: "Steve", LastName: "Kim", Email: "steve@gmail.com"}

delete user['LastName']	//true
user;	//{FirstName: "Steve", Email: "steve@gmail.com"}

키(key) 존재 여부 판단

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

let user = {
	FirstName: 'Steve',
	LastName: 'Kim',
	Email: 'steve@gmail.com',
	City: 'Seoul'
};

'City' in user;	//true
'Gender' in user; 	//false

객체 메소드

Object.keys(obj)

객체의 키를 요소로 갖는 배열을 반환하는 메소드이다.

let user = {
	FirstName: 'Steve',
	LastName: 'Kim',
	Email: 'steve@gmail.com',
	City: 'Seoul'
};

Object.keys(user);	//["FirstName", "LastName", "Email", "City"]

Object.values(obj)

객체의 값을 요소로 갖는 배열을 반환

Object.values(user); //["Steve", "Kim", "steve@gmail.com", "Seoul"]

Object.entries(obj)

[키, 값] 쌍을 담은 배열을 요소로 갖는 배열을 반환

Object.entries(user); 
//[Array(2), Array(2), Array(2), Array(2)]
//0: (2) ["FirstName", "Steve"]
//1: (2) ["LastName", "Kim"]
//2: (2) ["Email", "steve@gmail.com"]
//3: (2) ["City", "Seoul"]

객체의 길이 알기

Object.keys(obj).length를 사용해 객체의 길이를 알 수 있다.

배열에서는 .length로 배열의 길이를 알 수 있었지만 객체에 .length를 쓰면 undefined가 나온다.

객체의 길이를 알려면 Object.keys().length를 써야한다.
key를 갖는 배열을 만들어서 .length로 길이를 알 수 있는 것이다.

let person = {
  name: '이경규',
  age: 18,
  married: false
};

person.length; 	// undefined
Object.keys(person).length	//3