TIL 5 객체

연결된 데이터를 다루기 위해서 사용한다.
순서가 없어 key를 통해 value에 접근할 수 있다.

// each value
let title = "Hello world"
let createdAt = "2020-12-07"
let author = "reone1"

// object
let book = {
	title: "Hello world",
	createdAt: "2020-12-07",
	author: "reone1",
};

위와 같이 분리된 제목, 출판일, 작가의 이름을 하나의 object(객체)에 담아 연관지어 사용할 수 있다.

Syntax

let objet = {
	key : value,
	key2 : value,
}

객체는 key-value의 쌍으로 이루어져 있으며,
key의 타입은 string,
value의 타입은 아무거나 상관 없다. (string, number, function, object, null....)

Value를 조회하는 방법

Dot notation과 Bracket notation 두 가지 방법이 있다.

Dot notation

let book = {
	title: "Hello world",
	createdAt: "2020-12-07",
	author: "reone1",
};

// Dot notation
console.log(book.title) // "Hello world"
book.title = "Hi javascript"

console.log(book) 
// {
//	title: "Hi javavscript",
//	createdAt: "2020-12-07",
//	author: "reone1",
// };

Bracket notation

let book = {
	title: "Hello world",
	createdAt: "2020-12-07",
	author: "reone1",
};

// Dot notation
console.log(book["title"]) // "Hello world"
book["title"] = "Hi javascript"

console.log(book) 
// {
//	title: "Hi javavscript",
//	createdAt: "2020-12-07",
//	author: "reone1",
// };

Bracket vs Dot

key에 숫자만으로 이루어진 경우 Dot은 접근이 불가능하다.

key값을 전달인자로 넘겨줄수 있는 방법은 Bracket notation만 가능하다.

let object = { 
	1: "hi",
	2: "my",
	3: "name",
}

object.1 // Err : Unexpected number
object[1] // "hi"

let number = 2;

console.log(object.number) // undefined
console.log(object[number]) // "my"

외부의 변수를 통해 key를 할당하거나 key의 value를 조회하려 한다면, Bracket notation을 사용해야한다.

객체에서의 반복

let book = {
	title: "Hello world",
	createdAt: "2020-12-07",
	author: "reone1",
};

for (let i in book) {
	console.log(i)
}
// title
// createdAt
// author

Object.prototype.someFunc = function () {};

for (let i in book) {
	console.log(i)
}
// title
// createdAt
// author
// someFunc

객체에서의 반복은 for ... in을 사용하면 key값을 통해 object를 순회할 수 있다.

하지만, 위처럼 prototype으로 새로운 object의 확장 속성까지도 조회하게 된다.

let book = {
	title: "Hello world",
	createdAt: "2020-12-07",
	author: "reone1",
};
Object.keys(book) // ["title", "createdAt", "author"]

Object.prototype.someFunc = function () {};
Object.keys(book) // ["title", "createdAt", "author"]

Object의 내장함수 keys() 를 이용하면 key값의 배열을 확인할 수 있다.

알게 된 것

• Array와 Object의 타입은 모두 Object이다.
• key 값에는 숫자를 할당할 수 있고, 접근할 때는 숫자열, 문자열 상관없이 조회 할 수 있다.
  ⇒ 다만, 숫자로 작성하면 dot notation으로 조회하는 것이 어렵다. 문자로 하는것이 좋다.
• for...in 의 사용을 자제해야 한다. Object.keys(array) 를 이용하자
• 배열을 복사해 조작하는것은 때에 따라 결과가 다르다. 깊은 복사 와 얕은 복사 에 대해 알아보기