object
객체의 필요성
데이터가 늘어나면 늘어날수록 코드도 길어지고 관리하기도 힘들어집니다 하지만 object는 객체 많은 데이터들을 저장할때 사용하기 좋습니다.
객체는 {}(중괄호)로 감싸져 있고, 콜론으로 구분된 이름 / 값 의쌍 들이, 쉼표로 분리된 목록의 형태입니다.
객체의 데이터
객체는 {}안에 다른 데이터 타입 (텍스트, 숫자, 배열 등..)을 넣을수 가 있는데
{}으로 생긴 모양의 객체를 object literal(객체 리터럴)이라고 부릅니다.
객체이름 = { 키: 키값 }
키는 마치 특정 값을 갖고 있는 변수같은 역할을 합니다.
해당 키로 프로퍼티에 어떤 값이 저장돼 있는지 알 수 있습니다.
키의 값에는 텍스트, 숫자 뿐만 아니라 함수, 객체도 넣을 수 있습니다.
키 = property
키를 만들때 다음의 규칙이 있습니다.
- property 이름은 중복될 수 없다.
- property이름과 property값 사이에 : (콜론)으로 구분한다.
- property를 추가할 때는 , (쉼표)를 붙여준다.
- property 값에는 어느 type이나 가능하다(string, number, array, object, function..)
키값 , property값에 접근
. 연산자와 대괄호[]를 사용하여 접근할수 있습니다.
.연산자
"객체.키" 형태로 사용됩니다. 키값이 반환됩니다.
대괄호[] 사용
객체["키값"] 의 형태로 사용됩니다.
대괄호로 접근 하기 위해서는, 키 이름을 따옴표로 감싸서 작성해줘야 합니다.
스페이스가 포함된 키, 숫자로 된 키는 대괄호로 접근해야 합니다.
키값 , property 할당
키값 수정 - 객체에 이미 키가 존재하는데, 다시 한 번 할당하면 값이 교체(수정)됩니다.
키값 추가 - 이전에 없던 키로 접근하면, 새로운 프로퍼티가 추가 됩니다.
주의// const const 로 선언된 변수는 값을 절대 수정할수 없습니다. const로 선언된 변수에 객체를 다시 할당하면 오류가 생기지만 그 객체에 프로퍼티를 추가하거나 수정하는 것은 가능합니다.
객체는 배열과 함께 많이 사용됩니다.
let objData = { name: 50,
address: { email: "gaebal@gmail.com",
home: "위워크 선릉2호점" },
books: { year: [2019, 2018, 2006],
info: [{ name: "JS Guide", price: 9000 },
{ name: "HTML Guide", price: 19000,
author: "Kim, gae bal" }] } };객체와 배열의 차이점
객체는 순서가 없는 데이터의 모음입니다.
반대로 순서가 있는 데이터는 배열입니다.
배열은 index로 접근하기 때문에 순서가 중요하지만 객체는 키로 접근하기 때문에 순서가 상관이 없습니다.
객체 순회하기
객체는 순서가 없기 때문에 for문을 통해서 순회하기는 어렵습니다. 왜냐하면 length를 사용할수 없기 때문에… 하지만 다음 방법으로 반복문 작성이 가능합니다.
1. Object.keys()
Object.keys 메소드는 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드입니다. 객체 생성자인 Object 가 직접 가지고 있는 메소드입니다
리턴하는 값은 배열이기 때문에 이걸로 우리가 반복문을 사용할 수 있습니다!
ES6문법으로 자매품으로 Object.values, Object.entries 가 추가 되었습니다.
Object.values
Object.values 는 객체의 키가 아닌 값으로 이루어진 배열을 리턴합니다.
Object.entries
Object.entries 는 객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열로 이루어진, 배열을 리턴합니다.
인덱스 [0]의 값은 각각의 키를, 인덱스 [1]의 값은 해당 키에 해당하는 값을 가지게 됩니다.
2. for-in
i를 0으로 초기화하고, 배열의 길이와 비교하고, i를 1씩 증가시키는 등의 코드를 생략할수 있게 만든 ES6 문법입니다.
for-in 문은 인덱스의 값으로 무엇을 할당하고, 반복문이 몇번 돌아야 할 지를 자바스크립트 엔진 내부에서 자동으로 결정하게 됩니다.
객체를 가지고 for-in 문을 사용하면, for-in 문의 인덱스에 해당하는 변수가, 숫자가 아닌 객체의 각각의 키에 해당하는 문자열을 할당받게 됩니다.
Method (메서드)
객체에 저장된 값이 함수일 때, 메서드라고 부릅니다.
객체는 reference로 저장된다
객체를 변수에 저장하면 객체 자체가 저장되는 것이 아니라 reference가 저장됩니다
반대로, 텍스트는 변수에 저장하면 텍스트 자체가 저장됩니다.
그래서 텍스트를 저장한 변수를 비교 연산하면 true값이 나옵니다
const a = '안녕'; const b = '안녕'; console.log(a === b);
하지만 객체에 변수를 저장하면 false 가 나옵니다,
const hiObj = { name: '안녕' }; const helloObj = { name: '안녕' }; console.log('객체비교 =>', hiObj === helloObj);
왜냐하면 객체는 변수에 저장할때 객체 자체를 저장하는 것이 아니라 reference를 저장하기 때문입니다.
변수 이름마다 각각의 다른 메모리주소에 저장되고 불러올때 메모리 주소가 다르기 때문에 진짜 값은 다른 것입니다.
