객체
- 여러 종류의 데이터를 묶음으로 관리하는 데이터 타입
- 중괄호 {} 로 묶음 (배열은 대괄호 [])
- key값과 value값이 쌍으로 이루어진 property(=속성)의 집합이다.
- 배열과는 다르게 순서가 없다.
{ name : '홍길동', isMan: true }
// key value key value
key: 특정한 값을 담을 수 있는 그릇.
value: key에 담긴 특정한 값. 모든 데이터 유형이 가능함.
property: key + value. 객체 내부의 속성.
객체 선언
let 객체이름 = {
key이름1: value값,
key이름2: value값
};- 객체를 생성할 때는 {} 안에 key와 value를 쌍으로 묶어서 만들어준다.
- key값이 여러 개일 때는 쉼표(,)로 구분한다.
- 객체를 만드는 방법은 여러가지인데 그 중, 중괄호를 이용해 만드는 방식을
Object Literal이라고 한다.
객체를 만드는데 꼭 알아야 할 규칙
- key값은 문자열 또는 기호여야 하며(스페이스 공백, 한글, 특수문자 등 가능), 중복되어 선언할 수 없다.
- key값과 value값은 :(콜론)으로 구분한다.
- property를 추가할 때는 ,(쉼표)를 붙여준다.
- value값은 모든 데이터 타입이 가능하다. (String, Number, Array(배열)형, Object(객체)형, Funtion(함수)형 등)
객체 속성 접근 방법
- Dot Notation
객체명.프로퍼티명: 마침표(.) 연산자를 사용하며, 접근하려는 객체명은 왼쪽에, 프로퍼티명은 오른쪽에 위치한다. - Bracket Notation
객체명["프로퍼티명"]: 대괄호([])를 사용하여, 접근하려는 객체명은 왼쪽에, 프로퍼티명은 쌍따옴표("")와 함께 대괄호 안에 작성한다.
let mySelf = {
name: '홍길동',
location: {
country: 'South Korea',
city: 'Seoul' },
age: 30,
cats: ['초코', '쿠키', '라떼']
}Dot Notation
.으로 value에 접근- 새로운 변수를 할당하여 접근 불가능
- 존재하지 않는 key에 접근시 undefined 반환
console.log(mySelf.name); // '홍길동'
console.log(mySelf.location); // {country: 'South Korea', city: 'Seoul'}
console.log(mySelf.age); // 30
console.log(mySelf.cats); // ['초코', '쿠키', '라떼']
// 중첩 객체 안의 value 에 접근하고 싶을 때
console.log(mySelf.location.country); // 'South Korea'
console.log(mySelf.cats[0]); // [초코]
console.log(mySelf.cats[1]); // [쿠키]
// 새로운 변수로 할당하여 접근이 불가능
let myKey = 'cats';
console.log(mySelf.myKey); // undefined
// mySelf 객체에 myKey라는 key를 찾아보았더니 값이 없다. 따라서 undefined 반환.
console.log(mySelf.choco); // undefined
// mySelf 객체에 choco라는 key를 찾아보았더니 값이 없다. 따라서 undefined 반환.Bracket Notation
[]로 value에 접근- 새로운 변수로 할당하여 접근 가능
console.log(mySelf['name']; // '홍길동'
console.log(mySelf['location']); // {country: 'South Korea', city: 'Seoul'}
console.log(mySelf['age']); // 30
console.log(mySelf.['cats']); // ['초코', '쿠키', '라떼']
// 중첩 객체 안의 value 에 접근하고 싶을 때
console.log(mySelf['location'].country); // 'South Korea'
// key를 담은 새로운 변수로 접근하는 경우 - Dot Notation으로는 접근 불가
let myKey = 'cats'
console.log(mySelf[myKey]); // ['초코', '쿠키', '라떼']📌 Property 접근
-
console.log(difficult.color);
사실 키만 알고 있으면 dot(.)으로 접근하는 것이 제일 편하다. dot으로 접근할 때는 따옴표 없이 키를 바로 써줘야 한다. 대괄호로 접근하려면['color']과 같이 키 이름을 따옴표로 감싸서 작성해야 한다. -
console.log(difficult['my name']);
스페이스가 포함된 키는 반드시 대괄호로 접근해야 한다. dot으로 접근하면 오류가 난다. -
console.log(difficult['33']);
숫자로 된 키는 반드시 대괄호로 접근해야 한다. dot으로 접근하면 오류가 난다.
📍 중첩된 객체 (Nested Object)
실무에서 사용되는 객체는 거의 중첩되어 있다. 프로퍼티 값이 객체일 수도 있고, 프로퍼티 값인 배열의 요소가 객체일 수도 있다.
let nestedObj = {
type: {
year: '2021',
'comment-type': [{
name: 'Kate'
}]
}
}위에서 'Kate'를 출력하려면?
console.log(nestedObj.type['comment-type'][0].name);*컴퓨터는 왼쪽에서 오른쪽으로 해석한다는 것을 명심할 것!
객체 속성 수정
let obj = {
name: '홍길동',
age: 30,
country: 'South Korea'
};
// 1. Dot Notation
obj.age = 25;
//2. Bracket Notation
obj["age"] = 25;
console.log(obj); // {name: '홍길동', age: 25, country: 'South Korea'};
객체 속성 추가
- 동적으로 객체의 속성 추가
- 객체를 먼저 생성 후, 속성을 추후에 입력하여 추가.
- Dot Notation, Bracket Notation 표기법으로 속성 추가 가능.
let obj = {}; // obj 빈 객체 선언
console.log(obj); // { } = 빈 객체 출력
// 1. Dot Notation 표기법
obj.name = '홍길동'; // 'name' key에 '홍길동'이라는 value 추가
obj.age = 30; // 'age' key에 30이라는 value 추가
obj.country = 'South Korea'; // 'country' key에 'South Korea'라는 value 추가
// 2. Bracket Notation 표기법
obj['name'] = '홍길동';
obj['age'] = 30;
obj['country'] = 'South Korea';
// 3. 변수를 새로 할당하여 Bracket Notation 표기법으로 추가하기
let name2 = 'name';
let age2 = 'age';
let country2 = 'country';
obj[name2] = '김코딩';
obj[age2] = 24;
obj[country2] = 'America';
console.log(obj); // {name: '김코딩', age: 24, country: 'America'}- 정적으로 객체의 속성 추가
- 객체를 생성할 때 속성도 같이 생성함.
let obj = {name: '김코딩', age: 24, country: 'America'};
console.log(obj); // {name: '김코딩', age: 24, country: 'America'}객체 속성 삭제
- delete 객체명.프로퍼티명;
- delete 객체명['프로퍼티명'];
let obj = {name: '홍길동', age: 30, country: 'South Korea'};
// 1. Dot Notation 표기법
delete obj.country; // 객체의 add 속성 (key, value) 모두 삭제
console.log(obj); // {name: '홍길동', age: 30}
// 2. Bracket Notation 표기법
delete obj['age']; // 객체의 age 속성 (key, value) 모두 삭제
console.log(obj); // {name: '홍길동'}
// 3. 변수를 새로 할당하여 Bracket Notation 표기법으로 추가
let name2 = 'name';
delete obj[name2]; // 객체의 name 속성 (key, value) 모두 삭제
console.log(obj); // {}📍 배열이 포함된 객체 속성 수정
let obj = {name: '홍길동', age: 30, country: 'South Korea', cats: ['초코', '쿠키', '크림']};
// 1. Dot Notation 표기법을 이용하여 배열 value 추가
obj.cats[2] = '라떼';
// 2. Bracket Notation 표기법을 이용하여 배열 value 추가
obj['cats'][1] = '라떼'
console.log(obj); // {name: '홍길동', age: 30, country: 'South Korea', cats: ['초코', '쿠키', '라떼']} 배열 추가
let obj = {name: '홍길동', age: 30, country: 'South Korea'};
// 1. Dot Notation 표기법을 이용하여 배열 value 추가
obj.cats = ['초코', '쿠키', '라떼'];
// 2. Bracket Notation 표기법을 이용하여 배열 value 추가
obj['cats'] = ['초코', '쿠키', '라떼'];
// 3. 변수를 새로 할당하여 Bracket Notation 표기법으로 배열 value 추가
let myCats = 'cats';
obj[myCats] = ['초코', '쿠키', '라떼'];
console.log(obj); // {name: '홍길동', age: 30, country: 'South Korea', cats: ['초코', '쿠키', '라떼']} 배열 삭제
- delete 는 단순히 객체와 속성과의 연결을 끊을 뿐, 실제로 메모리에서 제거하는 것은 아니다. --> undefined 반환
- delete 연산자를 사용하기보다, delete 하고 싶은 값을 null 이나 undefined 로 설정하는 것을 추천한다.
let obj = {name: '홍길동', age: 30, country: 'South Korea', cats: ['초코', '쿠키', '크림']};
// 1. Dot Notation 표기법을 이용하여 배열 원소 삭제
delete obj.cats[2]; // '크림' 삭제
console.log(obj); // {name: '홍길동', age: 30, country: 'South Korea', cats: ['초코', '쿠키', undefined]}let obj = {name: '홍길동', age: 30, country: 'South Korea', cats: ['코코아', '쿠키', '라떼']};
// 2. Bracket Notation 표기법을 이용하여 배열 원소 삭제
delete obj['cats'][0]; // '코코아' 삭제
console.log(obj); // {name: '홍길동', age: 30, country: 'South Korea', cats: [undefined, '쿠키', '라떼']}객체의 메소드
- Object.keys(객체명) : 한 객체의 key값만 모아진 배열을 반환
- Object.values(객체명) : 한 객체의 value값만 모아진 배열을 반환
let a = { name : '홍길동', isMan: true };
let b = Object.keys(a);
console.log(b); // ["name", "isMan"]
let c = Object.values(a);
console.log(c); // ["홍길동", true]*Object의 O는 대문자. 필수 키워드.
하늘이의 개발 일기