학습 목표
- 객체의 구조를 이해하고 언제, 어떻게 사용하는지 이해할 수 있다.
- 배열과 객체의 차이에 대해 이해할 수 있다.
- 객체 속성 (property)의 조회, 추가, 변경, 삭제를 할 수 있다.객체
객체란?
= 데이터(정보)를 효과적으로 저장하기 위한 도구이며,딕셔너리와 유사하다.// 객체를 선언하는 방법도 변수를 선언하고 할당하는 방법과 같다.
let 객체이름 = {}; --> 비어있는 객체
// 객체는 중괄호 { }를 사용하며, '키'와 '값'으로 이루어져 있다.
'키'는 나타내고자 하는 데이터(정보)를, '값'은 정보에 대한 값을 나타낸다.
let 객체이름 = { 키: 값 }; --> 비어있는 객체
// ex) 만약 상자 안에 토마토가 30개 들어 있다는 것을 객체로 나타낸다면?
const box = { 토마토: 30 }--> 토마토가 30개인 상자
- 나타내고자 하는 데이터는 상자 안에 있는 토마토의 수이다.
- 따라서 키는 '토마토', 값은 '30'이다.// 다른 데이터(정보)도 담기 위해서는 ','로 구분하면 된다.
// 객체 안에 있는 데이터가 2개 이상일 때는 가독성을 위해 줄을 바꿔주는 게 좋다.
ex) const box = {
토마토: 30,
감자: 31,
양파: 33,
고구마: 29,
}; 배열과 객체의 차이
배열과 객체의 차이는?
- 배열은 대괄호 [ ]를 사용하고, 객체는 중괄호 { }를 사용한다.
- 배열은 많은 양의 데이터를 한번에 담을 수 있는 대신
특정한 '데이터(정보)'를 저장하고 찾는 데에는 어려움이 있다.
반면, 객체는 '데이터(정보)'를 저장할 수 있다.객체에 있는 정보 조회하기
객체에 저장된 데이터 불러오기
= 데이터를 가지고 있는 객체 안에 있는 개수를 조회하기 위한 두 가지 방법이 있다.
마침표(.)를 찍는 방법과 인덱싱과 유사한 방식으로 값을 뽑아올 수도 있다.-
'.'을 이용한 방법
-객체이름.키의 형태로 조회하면 '값'을 조회할 수 있다.['.'을 이용하여 객체 안에 있는 정보를 조회하는 방법] console.log(box.토마토); // 30 console.log(box.감자); // 31 console.log(box.양파); // 33 console.log(box.고구마); // 29
<실습 1>
<도전! 농작물의 정보가 담긴 객체 만들기>
// 앗! 행운이 농장에 주문이 들어왔어요!
// 토마토 8개, 당근 5개,
// 딸기 6개, 감자 7개를 보내야해요.
// 주문 갯수에 맞는 객체를 만들어보세요!
// 👇 그럼, 여기서부터 코드를 작성해보세요 :)
const box = {
토마토:8,
당근:5,
딸기:6,
감자:7,
};
export default box;<결과물 1>
객체에 있는 정보 추가하기
객체에 새로운 값 추가하기
= 객체에 새로운 키와 값을 추가할 수 있으며, 객체에 값을 추가하기 위한 두 가지 방법이 있다.
마침표(.)를 찍는 방법과 인덱싱과 유사한 방법을 사용하여 값을 추가할 수 있다.-
'.'을 이용한 방법
-객체이름.키 = 값의 형태로 작성하면 객체가 추가된다.
-객체 안에 존재하지 않는 키를 입력하면, 자동으로 새로운 키가 생성된다.
-이때, 값은 반드시 함께 입력해줘야 한다.
-만약, 객체 안에 존재하는 키를 입력하면, 해당 키의 값이 변경된다.const box = { // 농작물이 들어 있는 상자 토마토: 8, 당근: 5, 딸기: 6, 감자: 7, }; box.키위 = 5; // 상자 안에 키위 5개를 추가하기 console.log(box.키위); // 키위를 조회해보면, 5가 출력된다. box.당근 = 7; // 이미 존재하는 키일 경우, 값이 반영된다. console.log(box.당근); // 당근을 조회해보면, 7이 출력된다.기존 31개인 감자의 수에 3을 더하는 방법도 있다. box.감자 = box.감자 + 3; // 기존 감자의 수 31개 + 3개 console.log(box.감자); // 감자를 조회해보면, 34개가 출력된다.
<실습 2>
// 앗, 방금 들어온 주문이 수정됐어요!
// 딸기는 9개를 보내고,
// 고구마도 4개를 보내야 해요.
// 주문 갯수에 맞게 객체를 수정해보세요!
// box 객체를 직접 수정하지 말고,
// dot notation을 사용하세요!
const box = {
토마토: 8,
당근: 5,
딸기: 6,
감자: 7
};
// 👇 여기서부터 코드를 작성해보세요 :)
box.딸기 = 9;
box.고구마 = 4;
export default box;<결과물 2>
developerpyk