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]