1. 객체 선언
const 객체이름 = {
property이름1: property값,
property이름2: property값
}
객체는 중괄호 {}로 감싸져 있고,
콜론으로 구분된 이름/값 쌍들이
쉼표로 분리된 목록의 형태이다.
즉, 객체는 이름과 값으로 구성된 프로퍼티들의 집합이라고 할 수 있다.
객체 생성 규칙
객체를 만들 땐 다음의 규칙을 지켜야 한다.
- property 이름은 중복될 수 없다.
- property 이름과 property 값 사이에 :(콜론)으로 구분한다.
- property를 추가할 때는 ,(쉼표)를 붙여준다.
- property 값에는 어느 type이나 가능하다.
(string, number, array, object, funtcion)
프로퍼티(property)란 무엇인가?
https://developer.mozilla.org/en-US/docs/Glossary/property/JavaScript
자바스크립트 프로퍼티는 객체의 특징이며, 종종 데이터 구조와 관련된 속성(attribute)을 설명한다.
프로퍼티의 종류에는 두 가지가 있다.
- 인스턴스 프로퍼티는 지정된 객체 인스턴스와 관련된 데이터를 보관한다.
- 정적(static) 프로퍼티는 모든 객체 인스턴스 간에 공유되는 데이터를 보관한다.
프로퍼티에는 이름(문자열)과 값(원시데이터, 메서드 또는 객체 참조)이 있다.
"프로퍼티가 객체를 가지고 있다"고 말할 떄, 이는 "프로퍼티는 객체 참조를 가지고 있다"의
속기라는 점을 유의해야 한다. 프로퍼티 값을 변경할 때 원래 참조된 객체가 변경되지 않기 때문에
이러한 구별이 중요하다.
인스턴스(instance)란 무엇인가?
https://en.wikipedia.org/wiki/Instance_(computer_science)
객체 지향 프로그래밍(OOP)에서 인스턴스는 어떤 객체의 구체적인 발생이며,
일반적으로 컴퓨터 프로그램의 런타임 중에 존재한다.
형식적으로, "인스턴스"는 각각 특정한 가치(value)이기 때문에 "객체"와 동의어이며,
이것들은 인스턴스 객체라고 할 수 있다; "인스턴스"는 객체의 고유한 정체성을 강조한다.
인스턴스를 만드는 것을 인스턴스화라고 한다.
객체에서 프로퍼티는
const obj = {
name(이름): raul(값) // 이 덩어리가 프로퍼티.(이름과 값으로 구성)
position: striker
}
위의 name은 (아마도) 인스턴스 프로퍼티로 obj라는
객체 인스턴스와 관련된 데이터(name의 raul이라는 값)를 보관한다.
객체는 키(key) -값(value) 쌍으로도니 데이터의 모음으로써 순서가 뒤바껴도 아무 상관이 없다.
여기서 키(key)는 property name이고, 값(value)은 property value이다.
키는 마치 특정 값을 갖고 있는 변수같은 역할을 한다.(컨테이너, 정보를 담는 그릇)
해당 키로 프로퍼티에 어떤 값이 저장되어있는지 알 수 있다.
키의 값에는 텍스트, 숫자 뿐만 아니라 함수, 객체도 넣을 수 있다.
변수 선언과는 달리 객체의 키에는 스페이스, 한글, 특수문자 등이 들어갈 수 있다.
2. 객체의 property 값 접근
- 객체이름.property이름
- 객체이름["property이름"]
1.마침표(.) 연산자를 사용하며, 접근하려는 객체명은 왼쪽, 프로퍼티명(키)은 오른쪽에 위치
2.대괄호([])를 사용하여, 접근하려는 객체명은 왼쪽, 프로퍼티명(키)은 쌍따옴표("")와 함께 대괄호 안에 작성
접근 방법은 2가지가 있지만 쓰임에 차이가 있다.
키만 알고 있으면 마침표(.)으로 접근하는 것이 가장 편하다.
마침표는 키로 바로 접그날 때 사용하는 것.
마침표로 접근할 때는 따옴표 없이 키를 바로 써줘야 한다.
대괄호 안에는 변수가 들어갈 수 있다.
예를 들어 아래의 obj 객체의 name이라는 프로퍼티에 접근하고 싶을 때는,
const obj = {
name: raul
position: striker
}
let propertyName = "name" //객체 obj의 name에 쌍따옴표가 있음
console.log(obj[propertyName]) // raul [] 안 변수의 이름에는 쌍따옴표가 없음2-1. 프로퍼티 값의 수정
변수로 접근할 수 있으니, 변수를 통해 프로퍼티의 값을 수정할 수도 있다.
const obj = {
name: 'raul',
position: 'striker'
}
let anotherName = "name"
// anotherName이라고 변수를 선언하고, obj의 name을 할당한다.
obj[anotherName] = ["raulito", "raul madrid", "blanco"]
//anotherName으로 obj에 접근, 값을 수정한다.
// 결과는 { name: [ 'raulito', 'raul madrid', 'blanco' ], position: 'striker' }변수를 통해 프로퍼티의 값을 수정했지만 기존의 프로퍼티 이름(name)은 수정되지 않았다.
변수틀 통해 프로퍼티의 값을 수정했지만 기존의 프로퍼티 이름은 수정되지 않았다.
객체에 없는 키로 접근하면, 새로운 프로퍼티가 추가 된다.**
ojb[nationality] = "Spain"
// obj 객체에 nationality 라는 key와 spain이라는 value를 가진 프로퍼티가 생성됨2-2. 객체의 키를 변수로 접근
변수를 통해 객체의 특정 키의 값을 가져오는 것도 가능하지만,
반대로 객체에 특정 키를 만들고 값을 할당하는 것도 가능하다고 하였다.
mj라는 객체 하나를 만들었다.
cont mj = {
name: 'Michael Jordan'
}여기에 키 하나를 생성하고, 그 키에 값을 할당해주려고 한다.
그런데 키와 값을 변수를 통해 받아온다면 어떻게 해야할까?
const job = 'sell shoes'
const project = 'Jordan8'job의 값을 키로 사용해야 하고,
project의 값을 키의 값으로 사용한다고 했을 때.
mj[job] = project // A
mj["sell shoes"] = 'Jordan8' // BA와 B 둘다 할당이 가능하다.
하지만 A와 같은 방법은 변수 job과 project가 가지는
값에 따라 다른 키와 다른 값을 가지는게 가능해진다.
const mj = {
name : "Michael Jordan"
}
const job = "sell shoes"
const project = "Jordan13"
mj[job] = project
console.log(mj);
//{ name: 'Michael Jordan', 'sell shoes': 'Jordan13' }3. 메서드
객체에 저장된 값이 함수일 때, 메서드라고 부른다.
console.log();
console이라는 객체에 .(마침표)로 접근, log라는 키의 값인 함수를 부른다.
객체에 메서드를 정의할면 아래와 같이 할 수 있다.
let methodObj = {
do: function() {
console.log('메서드 정의는 이렇게');
}
}
호출 방법은 다음과 같다
methodObj.do();4. 객체 순회하기
객체는 순서가 없고 키를 통해서만 접근해야한다.
객체도 배열처럼 순회가 가능하다.
다만 배열과 달리, 명확하게 정해진 순서가 없기 때문에,
어떤 순서에 따라 객체의 키에 접근하게 될지는 알 수 없다.
기존 배열의 경우, 다음과 같은 for문을 사용했다.
const arr = ['coconut', 'banana', 'pepper', 'coriander']
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
이런 반복문은 배열이 length라는 키를 가지고 있고, 인덱스를 통해 각 배열 요소에 접근할 수 있었기 때문이다. 객체는 length키가 따로 주어져있지 않고, 인덱스도 없기 때문에 이런식의 반복문은 불가능하다.
4-1. Object.keys()
이 메소드는 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드이다.
객체의 내장 메소드가 아니라 객체 생성자인 Object가 직접 가지고 있는 메소드이다.
const obj = {
name: 'melon',
weight: 4350,
price: 16500,
isFresh: true
}
Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']이 메소드가 리턴하는 값은 배열이기 때문에 이를 통해 반복문을 사용할 수 있다.
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)
}
4-2. for-in
객체를 순회하는 두 번쨰 방법은 for-in문이다.
반복문인 for문과 같은 종류의 문법이지만, ES6에서 추가됨.
위의 for문을 다음과 같이 바꿀 수 있다.
for (let i in arr) {
console.log(i)
console.log(arr[i])
}i를 0으로 초기화하고, 배열의 길이와 비교하고, i를 1씩 증가시킨다.(let i=0; i<arr.length; i++)
라는 코드를 생략할 수 있게 만들었다.
for-in문은 배열뿐 아니라 객체에서도 작동하도록 만들어졌다.
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)
}1.obj의 key를 반복한다.
2.변수 value는 ojb[key] 값을 할당한다. 즉, obj에 key로 접근하여 나오는 값(value)을 할당한다.
3.key를 콘솔에 표시
4.value를 콘솔에 표시
반복을 통해 키가 값에 접근할 수 있다.
결과는?
'name'
'melon'
'weight'
4350
'price'
16500
'isFresh'
true
어렵다어려워.
