{key: value}
로 구성된 property(내부 속성)
로 이루어져 있다. const object1 = { key : value }
const object2 = { "hello java" : "hello script"}
const object3 = { "hello-java" : "hello script"}
const person1 = {
name: "sangwoong",
age: 27,
mbti: "ENTJ",
favorite: "sports"
}
다음과 같이 key
자리에 해당하는 부분에 공백이나 특수문자가 들어갈 경우 큰따옴표
로 감싸준다.
key
값이 여러개일 경우 쉼표(,)
로 구분해준다.
1. 객체 접근 방법
key를 활용하여 객체의 값 얻기
const object = {
key1: "첫번째",
key2: "두번째",
key3: "세번째"
}
const first = object.key1
consolt.log(first) // "첫번째"
변수를 활용하여 객체의 값 얻기
const object2 = {
1: "첫번째",
2: "두번째",
3: "세번째"
};
const two = 2;
const value = object2.two;
consolt.log(value); // "두번째"
```
Object.keys
를 활용하기
const object2 = {
1: "첫번째",
2: "두번째",
3: "세번째"
};
const keys = Object.keys(object2);
consolt.log(keys); // ["1", "2", "3"],, 배열로 추출
// Object.keys() 활용하기
let newArray = [];
keys.filter(key => newArray.push(object2[key]));
console.log(newArray) // ["첫번째", "두번째", "세번째"]
const object2 = {
1: "첫번째",
2: "두번째",
3: "세번째"
};
// 추가
object2[4] = "네번째"
console.log(object2)
// {1: "첫번째", 2:"두번째", 3:"세번째", 4:"네번째"}
// 삭제
delete(object2[2])
console.log(object2)
// {1: "첫번째", 3:"세번째", 4:"네번째"}
// 수정
object[3] = "셋"
console.log(object2)
// {1: "첫번째", 3:"셋", 4:"네번째"}
객체 및 함수 생성
const coffeeBrnad = {
name: "메가 커피",
best: "아이스 아메리카노",
where: "역 근처"
};
function myFunction(coffee) {
const text = `${coffee.where} ${coffee.name}의 가장 잘 팔리는 음료는 ${coffee.bset}입니다.`;
console.log(text);
}
myFunction(coffeeBrand);
// result
// "역 근처 메가 커피의 가장 잘 팔리는 음료는 아이스 아메리카노입니다."
객체의 value
값은 다음과 같이 접근할 수 있다.
객체 이름.key
객체 이름[key] //띄어쓰기나 특수문자가 있는 경우
객체 비구조화 할당을 통해 간결하게 객체에 접근할 수 있다.
예시 1)
const coffeeBrnad = {
name: "메가 커피",
best: "아이스 아메리카노",
where: "역 근처"
};
function myFunction(coffee) {
// 비구조화 할당
const { where, name, best } = coffee;
const text = `${where} ${name}의 가장 잘 팔리는 음료는 ${bset}입니다.`;
console.log(text);
}
myFunction(coffeeBrand);
객체에서 값을 추출하여 새로운 상수로 선언을 해주는 것이다.
const { key1, key2, ... , keyN } = 객체 이름
예시 2) 파라미터에서 구조 분해하기
const coffeeBrnad = {
name: "메가 커피",
best: "아이스 아메리카노",
where: "역 근처"
};
function myFunction({ name, where, best }) {
const text = `${where} ${name}의 가장 잘 팔리는 음료는 ${bset}입니다.`;
console.log(text);
}
myFunction(coffeeBrand);
객체의 값으로 함수를 넣을 수 있다.
const myDog = {
name: "땡구",
sound: "왈왈!",
say: function hello() {
console.log(this.sound);
}
};
myDog.say();
// result
// 왈왈!
객체 내부에 함수가 사용되면 this
는 자신이 속한 객체를 가리킨다.
함수를 선언할 때는 이름이 없어도 되지만, 화살표 함수를 사용하게 되면 this
가 가리키는 것이 달라 제대로 작동하지 않는다.
화살표 함수에는 this
가 없고 화살표 함수를 둘러싸는 (상위) 스코프 블
록의 this
를 참조하게 되기 때문이다.
[참고자료]
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions