[JavaScript] 객체(Object)

1. 객체(Object)란

배열과 마찬가지로 다량의 데이터를 한 번에 다룰 수 있는 참조자료형 데이터

• 0개 이상의 프로퍼티(property)의 조합으로 되어 있다.
• 프로퍼티란 객체의 상태를 나타내는 값(data)
  키(key): 값(value)의 조합으로 이루어져 있다

    { name: "고양이" }

2. 배열과 객체 비교

• 배열은 데이터의 순서정보(index)를 가지고 있는 자료형
• 객체는 데이터에 이름(key)을 부여

let myCatObj = { 
  name:"미오",  
  age: 8, 
  sex: "female-cat" }

let myCatArr = ["미오", 8, "female-cat"]

consol.log(personObj.name)

3. 객체의 Property

JavaScript에서 사용 가능한 모든 타입의 값은 프로퍼티가 될 수 있다.

let myCatMio = {
  이름: "미오", // 문자열
  나이: 9, // 숫자
  중성화: true, // boolean
  가족: ["엄마", "아빠", "오빠", "언니"], // 배열
  '좋아하는 것들': { 친구: "미미", 좋아하는_간식: "츄르" }, // 객체
  손: function() {
       return`${this.나이}살 ${this.이름}가 손을 내민다.`; // this가 myCatMio라는 객체를 가리킨다
  }, // 함수(메서드)    
}

메서드(method) : 프로퍼티를 참조하고 조작할 수 있는 동작

• 즉, 객체의 값(value)으로 함수를 지정한 것

let greetings = {
  sayHello: function(){
  	return 'hello!'
  }, 
  sayHi: function(name){
    return `hi ${name}` 
  },
  sayBye: function(){
    return 'bye'
  }
}

console.log(greetings.sayHello()); // hello!
console.log(greetings.sayHi('Mio')); // hi Mio
console.log(greetings['sayBye']()); // bye

4. 객체 다루기

📖 객체 프로퍼티 네임(key) 규칙

따옴표 없이 쓰는 경우

• 첫 글자는 반드시 문자, 밑줄_, 달러 기호$ 중 하나로 시작
• 띄어쓰기 금지
• 하이픈- 금지
  따옴표로 감싸는 경우 사용 가능하다

📖 프로퍼티를 참조(read)하는 방법

• dot notation(점 표기법) 객체.key
  
  
• bracket notation(대괄호 표기법) 객체['key']
  • 반드시 문자열을 입력해야 한다.
  • 대괄호 안에는 문자열을 변수로 지정해서도 사용 가능
  • + 로 문자열을 결합해서도 사용 가능
  • 객체 안의 객체는 대괄호[]를 나열해서 값을 참조(read)

💡객체의 프로퍼티 key가 변수일 때에는 무조건 [] Bracket Notation으로 값을 호출해야한다.

console.log(myCatMio.이름)   // 미오
console.log(myCatMio["이름"]) // 미오

let name = "이름";
console.log(myCatMio[name]); // 미오

let favorite = '좋아하는';
console.log(myCatMio[favorite + ' 것들'][favorite + '_간식']) // 츄르

📖 객체 내부에 값으로 들어 있는 배열과 객체, 함수도 똑같은 방법으로 접근 가능

myCatMio.가족.push('언니의 남편');
console.log(myCatMio.가족); // [ '엄마', '아빠', '오빠', '언니', '언니의 남편' ]


myCatMio['좋아하는 것들']['장난감'] = '실뭉치';
console.log(myCatMio['좋아하는 것들']); 
// { '친구': '미미', '좋아하는_간식': '츄르', '장난감': '실뭉치' }

console.log(myCatMio.손()); // 9살 된 고양이 미오가 손을 내민다.

📖 프로퍼티 추가(Create) / 삭제(delete)

객체.key = value : 프로퍼티 추가 / 수정
delete 객체.key : 프로퍼티 삭제

delete myCatMio.손
console.log(myCatMio);
/* {
  '이름': '미오',
  '나이': 9,
  '중성화': true,
  '가족': [ '엄마', '아빠', '오빠', '언니' ],
  '좋아하는 것들': { '친구': '미미', '좋아하는_간식': '츄르' },
} */

myCatMio.성별 = "남";
console.log(myCatMio); 

/*{
  '이름': '미오',
  '나이': 9,
  '중성화': true,
  '가족': [ '엄마', '아빠', '오빠', '언니' ],
  '좋아하는 것들': { '친구': '미미', '좋아하는_간식': '츄르' },
  '성별': '남'
} */

myCatMio.성별 = "여";
console.log(myCatMio);
/*{
  '이름': '미오',
  '나이': 9,
  '중성화': true,
  '가족': [ '엄마', '아빠', '오빠', '언니' ],
  '좋아하는 것들': { '친구': '미미', '좋아하는_간식': '츄르' },
  '성별': '여'
} */

📖 프로퍼티 유무 확인

• key in 객체
• 객체.key !== undefined

console.log('이름' in myCatMio); // true
console.log(myCatMio.가족 !== undefined); //true
console.log(myCatMio.출신 !== undefined); //false

5. 객체 매서드

📖 Object.keys() key들의 배열
📖 Object.values() value(값)들의 배열

console.log(Object.keys(myCatMio));
// [ '이름', '나이', '중성화', '가족', '좋아하는 것들', '성별' ]

console.log(Object.values(myCatMio));
// [ '미오', 9, true, [ '엄마', '아빠', '오빠', '언니', '언니의 남편' ], { '친구': '미미', '좋아하는_간식': '츄르', '장난감': '실뭉치' }, '여' ]

📖 Object.assign() 객체 합치기(복사)

• 중복되는 key의 값(value)은 덮어씌워진다

let user = {name: 'kimcoding', job: 'student'};
let info = {job: 'engineer', age: 25};

let userInfo = Object.assign(user, info);
console.log(userInfo); 
// { name: 'kimcoding', job: 'engineer', age: 25 } 

배열.slice()와 비슷하게 객체 복사로 사용할 수도 있다.

let myDogJjong = Object.assign({}, myCatMio); 
console.log(myDogJjong);
// {'이름': '미오', '나이': 9, '중성화': true, '가족': [ '엄마', '아빠', '오빠', '언니', '언니의 남편' ], '좋아하는 것들': { '친구': '미미', '좋아하는_간식': '츄르', '장난감': '실뭉치' }, '성별': '여'}

// 프로퍼티는 복사되었지만 아예 다른 객체이다.
console.log(Object.is(myCatMio, myDogJjong)); // false

// myDogJjong 객체를 수정해도 myCatMio가 수정되지 않는다.
myDogJjong['이름'] = '쫑'; 
myDogJjong.나이 = 3; 
delete myDogJjong['좋아하는 것들']

console.log(myDogJjong); // {'이름': '쫑', '나이': 3, '중성화': true, '가족': [ '엄마', '아빠', '오빠', '언니', '언니의 남편' ], '성별': '여'}
console.log(myCatMio); // {'이름': '미오', '나이': 9, '중성화': true, '가족': [ '엄마', '아빠', '오빠', '언니', '언니의 남편' ], '좋아하는 것들': { '친구': '미미', '좋아하는_간식': '츄르', '장난감': '실뭉치' }, '성별': '여'}

📖 Object.is(obj1, obj2) 두 객체가 같은지 비교
아래 중 하나를 만족하면 두 값은 같다

• 둘 다 undefined
• 둘 다 null
• 둘 다 true 또는 둘 다 false
• 둘 다 같은 문자에 같은 길이인 문자열
• 둘 다 같은 객체
  • 프로퍼티, 배열의 요소가 같다고 같은 객체 X
  • 같은 값을 참조 해야 같은 객체
• 둘 다 숫자이며
  • 둘 다 +0
  • 둘 다 -0
  • 둘 다 NaN
  • 둘 다 0이나 NaN이 아니고 같은 값을 지님

console.log(Object.is("", "")); //true
console.log(Object.is(null, null));  // true
console.log(Object.is(undefined, undefined)); // true
console.log(Object.is(NaN, NaN)); // true
conlsole.log(Object.is(NaN, 0/0));  // true

let arry1 = [];
let arry2 = arry1;
console.log(Object.is(arry1, arry2)) // true

console.log(Object.is([], [])); // false
console.log(Object.is({}, {})); // false
console.log(Object.is(0, -0));   // false
console.log(Object.is(-0, -0)); // true

6. 문자형 숫자의 key

💡 객체의 key를 문자형 숫자로도 지정할 수 있지만,
자동 오름차순 정렬되어 의도하지 않은 결과가 나올 수 있으므로 주의해야한다.

• 숫자로 지정해도 key의 type은 무조건 문자열(string)이다.
• 점표기법으로는 호출이 불가하며, 대괄호 표기법만으로 호출 가능하다.

let numKey = {
  day: '2023.01.01',
  2: '두번째',
  한글: '가나다',
  1: '첫번째',
  3: '세번째'  
}

console.log(numKey);
// { '1': '첫번째', '2': '두번째', '3': '세번째', day: '2023.01.01', '한글': '가나다' }

console.log(typeof numKey['2']); // string