//! 1. 객체는 배열과 마찬가지로 다량의 데이터를 한 번에 다룰 수 있는 참조자료형 데이터
// 0개 이상의 프로퍼티의 조합으로 되어 있다.
// 프로퍼티는 키와 값의 조합으로 이루어져 있다.
let person = {
name: "James",
}
//? key: ( name ) value: ( "James" )
// 프로퍼티(속성) => 키 + 값
//! 2. 배열과 객체 비교: 배열이 데이터의 순서정보(index)를 가지고 있는 자료형이었다면,
//! 객체는 데이터에 이름(key)을 부여할 수 있다.
let personObj = { name:"James", position: "ESE", age:"??", phone: "010-2345-4567" }
let personArr = ["James", "ESE", "???", "010-2345-4567"]
console.log(personObj.name)
//? (key)를 통해 데이터에 의미를 부여할 수 있고, (key)를 사용하여 데이터에 접근할 수 있다.
//! 3. JavaScript에서 사용 가능한 모든 타입의 값은 프로퍼티가 될 수 있다.
let myCatNabi = {
이름: "Nabi", // 문자열
개월: 10, // 숫자
중성화: true, // boolean
보유장난감: ["오뎅꼬치", "스프링", "낚싯대", "터널"], // 배열
집사 : {
name: "James",
company: "somewhere"
}, // 객체
손: function() {
return `${this.개월}개월 된 고양이 ${this.이름}가 손을 내민다.`;
}, // 함수(메서드)
그루밍: function() {
return `${this.이름}는 마음을 안정시키기 위해 그루밍을 시작합니다.`
}
}
// 프로퍼티: 객체의 상태를 나타내는 값(data)
// 메서드: 프로퍼티를 참조하고 조작할 수 있는 동작 => 객체 내부의 함수
// this는 myCatNabi라는 객체를 가리킨다.
//! 4. 객체 다루기
// 1) 프로퍼티를 참조(Read)하는 방법에는 두 가지가 있다.
//? (1) ( ) notation
console.log(myCatNabi.이름)
//? (2) ( ) notation
console.log(myCatNabi["이름"])
// bracket notation 사용시 반드시 문자열을 입력해야 한다.
console.log(myCatDoi[이름])
// 단, 문자열이 할당된 변수를 입력하는 것은 가능하다.
let 이름 = "이름";
console.log(myCatDoi[이름]);
// 2) 프로퍼티 추가(Create)
myCatNabi.성별 = "남";
// myCatNabi["성별"] = "남";
console.log(myCatNabi);
// 빈 객체에 추가하면? (15번 문제처럼)
let newObj = {};
newCat['이름'] = myCatDoi['이름']
console.log(newCat);
// 3) 프로퍼티 제거
delete myNabi.성별
console.log(myCatNabi);
// 4) 프로퍼티 수정(Update)
myCatNabi.개월 = 10;
console.log(myCatNabi);
// 5) 프로퍼티 유무 확인
console.log('개월' in myCatNabi)
console.log('생일' in myCatNabi)
// 5. 객체 내부에 값으로 들어 있는 배열과 객체, 함수도 똑같은 방법으로 접근 가능하다.
myCatNabi.장난감.push('마따다비');
myCatNabi.집사['phone'] = '010-1212-3434';
myCatNabi.손();
// 6. 객체 메서드
// 1) Object.keys() -> key를 모아서 배열로
console.log(Object.keys(myCatDoi))
// 2) Object.values() -> value(값)을 모아서 배열로
console.log(Object.values(myCatDoi))
// 3) Object.assign() -> 객체 합치기, 객체 복사
let user = {name: 'kimcoding', job: 'student'};
let info = {job: 'engineer', age: 25};
let userInfo = Object.assign(user, info);
console.log(userInfo);
// arr.slice()와 동일한 기능으로 사용할 수도 있다.
let myCatKkanbam = Object.assign({}, myCatDoi);
myCatKkanbam['이름'] = 'Bina';
myCatKkanbam.개월 = 3;
myCatKkanbam.중성화 = false;
console.log(myCatNabi);
console.log(myCatBina);
// 4) Object.is(obj1, obj2) -> 두 객체가 같은지 비교
console.log(Object.is(myCatNabi, myCatBina));
console.log(Object.is({}, {}));
// 7. for in 반복문
for (let property in myCatNabi) {
if (typeof myCatNabi[property] === 'object') {
delete myCatNabi[property]
}
}
'FE > JavaScript' 카테고리의 다른 글
[JS] 원본 배열을 변경하는 / 변경하지 않는 배열 메서드 (0) | 2023.03.01 |
---|---|
[코플릿/JS] 반복문 _ 소수찾기 & 소수 이어 붙이기 🤍 (0) | 2023.02.28 |
[JS] 객체 Object (0) | 2023.02.27 |
(JS) 배열의 반복 & 배열 메서드 (0) | 2023.02.27 |
(JS) 배열의 기초 (0) | 2023.02.27 |