✅ Achievement Goals
- 배열과 객체의 구조를 이해하고 언제, 어떻게 사용하는지 이해할 수 있다.
- 배열과 객체의 특징을 구분하여 사용할 수 있다. (순서를 가진다, 의미를 가진다)
- 배열과 객체의 특징에 따라 실생활에서 언제 쓰는지 이해할 수 있다.
- 객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다.
- 객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해한다.
- dot notation을 이용한 객체 할당 방식을 능숙하게 다룰 수 있다. obj.a = "hello"
- 객체 속성 삭제를 위한 delete 키워드를 사용할 수 있다.
- 객체를 위한 for문 for ... in 문을 이해하고 다룰 수 있다.
배열과 객체, 반복문을 응용하여 능숙하게 대량의 정보를 다룰 수 있다.
객체(Object)란?
자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다.
원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조다.
원시 타입 값은 변경 불가능한 값(immutable value)이지만
객체 타입 값, 즉 객체는 변경 가능한 값(mutable value)이다.
객체는 0개 이상의 프로퍼티로 구성된 집합이고, 프로퍼티는 키(key)와 값(value)으로 구성된다.
객체의 기본적인 구조는 다음과 같다. 중괄호 안의 name, age 는 객체의 키(key)
Jae, 29 은 객체의 값(value)을 나타낸다.
키(key)와 값(value) 둘이 합해져서 person 객체의 프로퍼티가 된다.
let person = {
// 프로퍼티
name: 'Jae', // 키: 값
age: 29,
// 메서드
}Property & Method
프로퍼티 : 객체의 상태를 나타내는 값(data)
메소드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(bahavior)
자바스크립트의 함수도 객체의 프로퍼티 값(value)으로 사용할 수 있다. 객체의 프로퍼티 값이 함수인 경우 이것을 메소드(method) 라고 부른다.
아래의 코드를 보면 변수 counter 할당된 객체는 num: 0 이라는 프로퍼티와 increase라는 키를 가진 메소드로 구성된다. 객체 내 메소드는 object.method()의 형식으로 호출할 수 있다. counter.increase()가 호출될 경우, increase의 값으로 들어가있는 함수가 num을 1 증가시키는 방식으로 메소드가 동작한다.
let counter = {
num: 0,
increase: function() {
this.num++;
}
};객체 리터럴에 의한 객체 생성
- Dot notation -> key값을 바로 받아옴 string으로 출력됨
let user = {
firstName : 'jaewan',
lastName : 'kim',
email : 'wanzekim@gmail.com',
city : 'seoul'
};
user.firstName; //'jaewan'
user.city; // 'seoul'- Bracket notation -> key값이 포함된 변수를 가져옴
let user = {
firstName : 'jaewan',
lastName : 'kim',
email : 'wanzekim@gmail.com',
city : 'seoul'
};
user['firstName'];
user['city'];
같은 notation // user.firstName === user['firstName']
변수 할당할 때 user[firstName]
boolean
true
function allKeys(obj) {
for (let key in obj) {
console.log(key)
}
}