FRONTEND/Javascript

객체 (Object)

1224minutes 2022. 7. 18. 11:44

객체

원시형(primitive type)
자바스크립트 여덟 가지 자료형 중 일곱 개는
오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있음

객체(object)
다양한 데이터를 담을 수 있음.
키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장.
주소록에 적합한 자료 구조.

객체는 자바스크립트 거의 모든 면에 녹아있는 개념이므로
자바스크립트를 잘 다루려면 객체를 잘 이해해야함

1. 객체 선언

let objectName = {
keyName1 :'valueName1',
keyName2 :'valueName2',
keyName3 :'valueName3'
}
(객체 리터럴 문법)
중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있는데, 키엔 문자형, 값엔 모든 자료형이 허용.

let user = {
	firstName : ‘yebbang',
	lastNanme : ‘kim’,
	email : mm@gmail.com,
	city : ‘Busan’
	}

여기서 firstName은 key
‘yebbang’은 value. (key - value pair)
  • const로 선언된 객체는 수정 가능
const user = {
  name: "John"
};

user.name = "Pete"; // (*)

alert(user.name); // Pete

(*)로 표시한 줄 오류 발생 x.
const는 key만 고정, value는 고정 x
user=...를 전체적으로 설정하려고 할 때만 오류 발생.

2. 조회

1) dot notation

key값이 정적일 때

user.firstName ; // 'yebbang'

2) bracket notation

key값이 동적일 때

User[‘firstName’]; // ‘webbing’

3) in 연산자

object에 해당하는 key가 있는지 확인

tweet { writer : ’yebbang’; 
		createAt:2022-01-01 12-03:33; 
		content :'댓글’;
		}
‘content’ in tweet; // true
‘age’ in tweet; // false

ex) tweet에서 key ‘writer’ 값을 불러올 때

tweet { writer : ’yebbang’; 
		createAt:2022-01-01 12-03:33; 
		content :'댓글’;
		}
tweet.writer; // ‘yebbang’ 
tweet[‘writer’]; ‘yebbang' 
let keyname = ‘writer' tweet[keyname]
// ‘yebbang' tweet[keyname] === tweet[‘writer’]

3.추가

objectName[ ‘keyName’ ] = ‘value'
objectName.keyName = ‘value'

ex)tweet에 key, value 값을 추가할 때

tweet { writer : ’yebbang’; 
		createAt:2022-01-01 12-03:33; 
		content :'댓글’;
		}


tweet[ ‘category’ ] = ‘잡담'
tweet.isPublic = true;
tweet.tags = [‘#일상’, ‘#소통’]

4.변경

tweet { writer : ’yebbang’; 
		createAt:2022-01-01 12-03:33; 
		content :'댓글’;
		}


tweet.writer = 'doong'
tweet['writer']= 'doong'
// tweet.writer === 'doong'

5.삭제

delete objectName['keyName']

delete tweet[‘writer’] 

6. key값들의 배열 만들기

const obj = {
  a: 1,
  b: 2,
  c: 3,
};

Object.keys(obj) // [a, b, c]