1. object란
이름(key)과 값(value)으로 구분된 프로퍼티(property)들의 집합.
중괄호를 사용하며 각 프로퍼티(property)의 이름(key)은 중복될 수 없다. (값(value)은 중복 가능)
예시)
let plan1 = { name: "Basic", price: 3.99, space: 100, transfer: 1000, pages: 10 };객체 plan1의 프로퍼티(property)는 총 5개이고 이름(key)은 name, price, ... , pages 이며 값(value)는 "Basic", 3.99, ... , 10 이 된다.
1-1. 해당 객체의 property값(value)으로 접근하려면
let plan1 = { name: "Basic" }; console.log(plan1.name); console.log(plan1["name"]);
- 객체명.key -> dot(.) notation
객체의 이름을 그대로 입력할 때
- 객체명["key"] -> bracket notation
- key 값에 변수를 설정해서 적용시킬때
- key 값에 숫자를 쓸 때
위 두 가지 방법을 사용
let plan1 = { name: "Basic" }; let propertyName = "name"; console.log(plan1[propertyName]); //console.lg(plan1.propertyName); -> 불가능bracket notation으로 변수 명으로 key값을 설정 가능
dot notatoin은 불가능
1-2. property 값(value)을 할당하려면
difficult[name] = '값 바꾼다'; console.log(difficult[name]); // 객체에 이미 키가 존재하는데, 다시 한 번 할당하면 값이 교체(수정)된다. difficult.color = '색깔'; console.log(difficult.color); //이전에 없던 키로 접근하면, 새로운 프로퍼티가 추가 된다. console.log('생성전: ' + difficult.new); difficult.new = '새로 추가된 프로퍼티'; console.log('생성후: ' + difficult.new); //아직 없던 키에 접근하면 프로퍼티를 추가할 준비는 되어있지만, 값이 없다.
2. method(메서드)
객체에 저장된 값이 함수 일때 메서드라고 부른다.
let methodObj = { do: function() { console.log('메서드 정의는 이렇게'); } }메서드 정의 내리는 방법
methodObj.do();메서드 호출 방법
3. 중첩된 객체(Nested Object)
실무에서 사용되는 객체는 거의 중첩이 되어있다.
프로퍼티 값이 객체일 수도 있고, 프로퍼티 값인 배열의 요소가 객체일 수도 있다.
//예시 let nestedObj = { type: { year: '2019', 'comment-type': [{ name: 'simple' }] } }'simple'을 출력하기 위한 방법
console.log(nestedObj.type['comment-type'][0].name);
4. 객체는 reference로 저장된다.
객체를 변수에 저장하면 객체 자체가 저장되는 것이 아니라 reference가 저장된다.
반대로, 텍스트는 변수에 저장하면 텍스트 자체가 저장된다. 그래서 서로 같은 텍스트를 비교연산하면 서로 값이 같으므로 true이다.
const a = '안녕'; const b = '안녕'; console.log(a === b);a와 b는 같은 텍스트를 포함하고 있었으므로 true를 반환.
const hiObj = { name: '안녕' }; const helloObj = { name: '안녕' }; console.log('객체비교 =>', hiObj === helloObj);hiObj와 helloObj는 겉으로 보기엔 담고 있는 내용이 같아 보이지만 객체는 각각의 메모리에 담긴 reference를 저장하기 때문에 false 반환.
참고 이미지)
하지만console.log('객체값비교 =>', hiObj.name === helloObj.name);이렇게 객체의 property 값(value)를 비교하는 것은 true로 반환될 수 있다.
5. 객체의 키를 변수로 접근하는 방법
const information = { name: '김개발' }객체를 생성하고 키와 값을 할당해주려고 할 때
const verb = 'developes' const project = 'facebook'이렇게 변수를 통해 만들어진 것들을 키와 값으로 설정한다고 했을 때
information[verb] = project // [A] information.developes = 'facebook' // [B][B]의 방법은 이 경우는 키와 값이 항상 정해져 있다.
[A]의 방법을 이용하면 변수 verb와 profect가 가지는 값에 따라 다른 키와 다른 값을 가지는 게 가능해진다.
6. 객체 순회하기
객체는 순서가 없고 키를 통해서만 접근이 가능.
하지만 여러가지 이유로 객체에 있는 모든 키에 한 번씩 접근해야하는 코드를 써야 할 경우에 사용하는 방법 2가지가 있다.
6-1. Object.keys()
Object.keys 메소드는 어떤 객체가 가지고 있는 키들의 목록을 '배열'로 리턴하는 메소드다.
사용방법)
const obj = {
name: 'melon',
weight: 4350,
price: 16500,
isFresh: true
}
Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']Object.keys 메소드가 리턴하는 값은 배열이기 때문에 이걸로 반복문을 사용할 수 있다.
const keys = Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']
for (let i = 0; i < keys.length; i++) {
const key = keys[i] // 각각의 키
const value = obj[key] // 각각의 키에 해당하는 각각의 값
console.log(value)
}이 외에도 Object.values, Object.entries 도 있다.
const values = Object.values(obj)
// values === ['melon', 4350, 16500, true]
const entries = Object.entries(obj)
/*
entries === [
['name', 'melon'],
['weight', 4350],
['price', 16500],
['isFresh', true]
]
*/
6-2. for-in
반복문인 for 문과 같은 종류의 문법이지만, 객체와 배열을 위해 특별히 존재하는, ES6에서 추가된 문법.
객체 순회 외에도, 일반적인 배열을 순회할 때도 아주 유용하게 쓰인다.
const arr = ['coconut', 'banana', 'pepper', 'coriander'] for (let i = 0; i < arr.length; i ++) { console.log(i) console.log(arr[i]) // 기존의 for문 } for (let i in arr) { console.log(i) console.log(arr[i]) // 새롭게 추가된 for-in문 }i를 0으로 초기화하고, 배열의 길이와 비교하고, i를 1씩 증가시키는 등의 코드를 생략할 수 잇게 만든 문법.
const obj = { name: 'melon', weight: 4350, price: 16500, isFresh: true } for (let key in obj) { const value = obj[key] console.log(key) console.log(value) }이렇게 객체에서도 for-in문의 인덱스에 해당하는 변수가, 숫자가 아닌 객체의 각각의 키에 해당하는 문자열을 할당받게 된다.
