TIL) 객체, object 기본 개념 쉬운 설명, 자바스크립트

 

객체를 배우는 이유!

 

각기 다른 값을 가지지만, 입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있다. 

 

목표!
배열과 객체의 특징을 구분하고, 배열과 객체의 특징에 따라 웹 애플리케이션 개발 시 어떻게 사용되는지 이해한다.
객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다.
객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해한다.
배열과 객체, 반복문을 응용하여 능숙하게 대량의 정보를 다룰 수 있다.

 

객체는 키(key)와 값(value)으로 이루어져 있다. 

 

let user = {
	firstName: ‘Hailie’,
	lastName: ‘Lee',
	email: ‘0000@gmail.com’,
	city: ‘Gyeonggi’
}

// 키(key)는 firstName, lastName, email, city
// 값(value)는 ‘Hailie’, ‘Lee', ‘0000@gmail.com’, ‘Gyeonggi’
// 키와 값 사이는 콜론: 으로 구분한다.
// 중괄호{curly bracket}를 이용해서 객체를 만든다. 
// 키-값 쌍은 쉼표,로 구분해준다. 

 

 

 

객체의 값에 접근하는 방법 / 사용하는 방법

 

방법1. Dot notation

let user = {
	firstName: ‘Hailie’,
	lastName: ‘Lee',
	email: ‘0000@gmail.com’,
	city: ‘Gyeonggi’
}

user.firstName; // 'Hailie'
user.city; // ‘Gyeonggi’

 

 

 

방법2. Bracket notation => 반드시 써야하는 경우는 키 값이 변수일때!! 

let user = {
	firstName: ‘Hailie’,
	lastName: ‘Lee',
	email: ‘0000@gmail.com’,
	city: ‘Gyeonggi’
}

user['firstName']; // 'Hailie'
user['city']; // ‘Gyeonggi’

 

⭐️⭐️⭐️중요포인트⭐️⭐️⭐️

진짜 key 값을 가져올때

user.firstName

user['firstName']

 

firstName라는 변수를 가져올때 

user[firstName]

 

 

값 추가하기

 

let user = {
	firstName: ‘Hailie’,
	lastName: ‘Lee',
	email: ‘0000@gmail.com’,
	city: ‘Gyeonggi’
}

user['category'] = 'blog';
user.isStudent = false;
user.color = 'yellow';

 

 

 

값 삭제하기 delete

 

let user = {
	firstName: ‘Hailie’,
	lastName: ‘Lee',
	email: ‘0000@gmail.com’,
	city: ‘Gyeonggi’
}

delete user.email; // email 키-값 지우기

// users는 다음과 같게 된다. 
{firstName: ‘Hailie’,lastName: ‘Lee', city: ‘Gyeonggi’}

 

 

찾고 싶은 키가 있는지 확인하기 in 연산자

 

let user = {
	firstName: ‘Hailie’,
	lastName: ‘Lee',
	city: ‘Gyeonggi’
}

'city' in user; // true
'email' in user; // false