8장 객체
본문 바로가기

채팅

설문조사

 

객체란?

객체는 key와 value의 쌍으로 이루어진 데이터 집합입니다.  우리가 실행활에서 인식할 수 있는 사물 이라고 생각하면 됩니다. 말로는 어려우니 직접 예시를 봅시다.

사람 이라는 객체입니다. 객체안에 사람을 표현할 수 있는 여러 정보들이 들어있습니다.

const person = {
  name: "js",
  age: 10,
  address: "Seoul/Korea",
  phone: "01012345678"
};

 

사용법

const 객체명 = {

    key : value,
    key : value,
    key : value,
    ...
}

여기서 key값은 뒤의 value 값을 가져다 쓸수 있게 해줍니다.

객체명.key를 사용하게되면 value값이 나옵니다.

객체 생성

객체의 value에 또다른 key value 쌍을 넣을 수 있습니다

const person = {
  name: "js",
  age: 10,
  address: { 
    country: "Korea", 
    city: "seoul" 
  },
  phone: "01012345678"
};
console.log(person.name)
console.log(person.age)
console.log(person.address.city)

console.log(person['name'])
console.log(person['age'])
console.log(person['address']['city'])

 

 

객체 수정

수정은 간단합니다. 

"" 를 사용하면 빈 값이라는 의미입니다. null을 넣으면 null 자체가 들어값니다 

person.name = "홍길동"
person.phone= ""

console.log(person.name, person.phone);

객체 삭제

delete 연산자를 사용해 간단하게 삭제 할수 있습니다.

delete person.address;

반복문

객체를 출력할 때 반복을 사용하여 수고를 줄일 수 있습니다.

for in 문

key는 객체에 들어있는 key값이며 반복을 돌때마다 객체에서 KEY값을 위에서부터 순서대로 꺼내옵니다.

for key in 객체 {
	...
}
const obj = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3',
}

for (const key in obj) {
  console.log(obj[key]);
}

비구조화 할당

비구조화 할당은 객체에서 원하는 값을 추출 할때 편리하게 사용하기 위해서 사용됩니다.

 

원래의 방법

const person = {
  name: "js",
  age: 10,
  address: { 
    country: "Korea", 
    city: "seoul" 
  },
  phone: "01012345678"
};

const name = person.name
const phone = person.phone

비구조화 할당의 문법

중괄호로 감싸서 객체안의 key값에 해당하는 value를 상수에 할당한 예시입니다 

이때 꺼내오지않은 key value는 사용할 수 없습니다.

const person = {
  name: "js",
  age: 10,
  address: { 
    country: "Korea", 
    city: "seoul" 
  },
  phone: "01012345678"
};

const { name, age, address } = person 
console.log(name, age, address) --- o

const { name, age } = person
console.log(address) --- x

문제

Q1. 비구조화 할당을 사용하여 name, age만 출력하시오

const person = {
  name: "js",
  age: 10,
  address: { 
    country: "Korea", 
    city: "seoul" 
  },
  phone: "01012345678"
};

Q2. for in문을 사용하여 country만 출력하시오

'Javascript' 카테고리의 다른 글

10장 React 기초  (0) 2020.12.07
9장 html 기초  (0) 2020.12.07
7장 함수  (0) 2020.12.07
6장 반복문  (0) 2020.12.06
5장 배열  (0) 2020.12.05

FlaShLab