[TIL-17] Object

JavaScript의 Object를 조금 더 자세히 공부해보았다.

객체(Object)

• '이름(key):값(value)' 형태의 프로퍼티들을 저장하는 컨테이너
• 여러개의 프로퍼티들을 포함할 수 있다.

객체 선언하기

• 중괄호로 감싼다.
• 콜론으로 key와 value를 구분한다.
• 쉼표로 프로퍼티를 구분한다.
• 프로퍼티 이름은 중복되면 안된다.
• 프로퍼티 타입은 모두 가능하다.

const 객체명 = {
  property이름1: property1값,
  property이름2: property2값
}

프로퍼티 값에 접근하기

let obj = {
            "my name" : '홍길동',
            address : '서울특별시',
            age : 24,
						1 : "one"
					}

• 대괄호 표기법(거의 안씀)
  • 객체이름[”프로퍼티이름”]
  • 대괄호 안에 변수가 들어갈 수 있다.
  • 대괄호 안에 띄어쓰기가 들어가도 인식한다.
  • key가 숫자로 되어있어도 접근할 수 있다.

console.log(obj["my name"]); // 홍길동
console.log(obj["address"]); // 서울특별시
console.log(obj["gender"]); // undefined
console.log(obj["age"]); // 24
console.log(obj["1"]); // one

const propertyName = "my name";
console.log(obj[propertyName]); // 홍길동

• 마침표 표기법
  • 객체이름.프로퍼티이름
  • 변수로는 프로퍼티에 접근할 수 없다.

console.log(obj.my name); // error
console.log(obj.address); // 서울특별시
console.log(obj.gender); // undefined
console.log(obj.age); //24
console.log(obj.1); //error

const propertyName = "my name";
console.log(obj.propertyName); // undefined
//obj에는 propertyName이라는 프로퍼티가 없다.

프로퍼티 추가 / 삭제

• 새로운 키 값 선언

obj.gender = "female";

obj.programming = function(){
            console.log("개발자");
        }

//호출
obj.programming();

• 기존에 있던 내용 수정

obj.age = 34;
console.log(obf.age);

• 삭제

delete obj.address;

console.log(obj.address); // undefined

객체 리터럴(object literal)

• {}로 직접 객체를 생성하는 방식

const hello = {};

key : value

• key값으로 value에 접근하기 때문에 배열처럼 순서가 중요하지 않다!
• key는 property name이라고도 한다.
• value는 property value라고도 한다.
• key는 특정 값을 갖고 있는 변수와 같은 역할을 한다.
• key에는 텍스트, 숫자 뿐만 아니라 함수나 객체도 넣을 수 있다.
• 객체의 key에는 변수와 다르게 스페이스, 한글, 특수문자 등이 들어갈 수 있다.

Method(메소드)

• 객체에 저장된 값이 함수이다.

const methodObj = {
  do: function() {
    console.log('메서드 정의');
  }
}

//호출
methodObj.do();

중첩된 객체(Nested Object)

• 프로퍼티 값이 객체이거나 프로퍼티 값인 배열의 요소가 객체일 수도 있다.

const nestedObj = {
	type: {
		year: '2022',
		'comment-type': [{
			name: 'simple'
		}]
	}
}

console.log(nestedObj.type['comment-type'][0].name); // simple

→ nestedObj : 객체 명

→ nestedObj.type : year, comment-type 이 있는 객체

→ nestedObj.type['comment-type'] : nestedObj 객체의 type 객체의 comment-type 배열

→ nestedObj.type['comment-type'][0] : nestedObj 객체의 type 객체의 comment-type 배열의 첫번째 요소인 객체 선택

→ nestedObj.type['comment-type'][0].name : nestedObj 객체의 type 객체의 comment-type 배열의 첫번째 요소인 객체의 key값인 name 선택

reference

• 객체를 변수에 저장하면 reference가 저장된다.
• 텍스트는 변수에 저장하면 텍스트 자체를 저장한다.

const a = '안녕';
const b = '안녕';
console.log(a === b); //true

const hiObj = { 
  name: '안녕' 
};
const helloObj = {
  name: '안녕'
};
console.log(hiObj === helloObj); //false

• 객체를 변수에 저장하면 객체가 담긴 어느 메모리의 주소(reference)를 저장한다.
• hiObj객체가 갖고있는 값은 해당 내용이 담긴 메모리의 위치이다.
• helloObj객체는 해당 객체의 값을 가지고 있는 다른 메모리의 위치이다.

const mutableObj = {
  name: '객체'
};

mutableObj = {
   name: '재할당'
	 //Uncaught TypeError: Assignment to constant variable.
}

mutableObj.name = '수정 됩니다!';

• const로 선언된 변수는 값이 바뀌면 안된다.
• mutableObj에 새로운 객체를 할당하면 에러가 발생한다. → 새로운 메모리의 주소로 수정을 하려고 하기 때문!
  
• 프로퍼티로 접근해서 수정하면 객체 내부의 프로퍼티값이 수정되기 때문에 수정이 가능하다.

객체의 키를 변수로 접근하기

const information = {
  name: '홍길동'
}

const key = 'job';
const value = 'developer';

information[key] = value // job : 'developer'
information.key = 'developer' // key : 'developer'

객체 순회하기

• 객체는 순서가 없으므로 순서가 보장되지 않은 순회를 한다.
• 순서가 없기 때문에 for문 등을 사용할 수 없다!

Object.keys()

• 어떤 객체가 가지고 있는 키들의 목록을 배열로 반환한다.
• 객체 생성자인 Object가 직접 가지고 있는 메소드이다.
• 반환된 값은 배열이므로 for문 사용이 가능하다.

const information = {
  name: '홍길동',
	job : 'developer'
}

const keys = Object.keys(information) // (2) ['name', 'job']

for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  const value = information[key];
  
  console.log(value);
}

//홍길동
//developer

ES6 - Object.values()

• 객체의 키가 아닌 값으로 이루어진 배열을 반환한다.

const values = Object.values(information);
// (2) ['홍길동', 'developer']

ES6 - Object.entries()

• 객체의 키와 값의 쌍으로 이루어진, length가 2인 배열을 반환한다.

const entries = Object.entries(information);

/*
(2) ['name', '홍길동']
(2) ['job', 'developer']
*/

ES6 - for-in

• 객체 뿐만 아니라 일반적인 배열에서도 사용할 수 있다.
• 인덱스의 값으로 어떤걸 할당할지, 반복문이 도는 횟수 등을 자바스크립트 엔진 내부에서 자동으로 결정하게 된다.

const arr = ['coconut', 'banana', 'strawberry', 'apple'];

for (let i = 0; i < arr.length; i++) {
  console.log(i)
  console.log(arr[i])
}

//위의 for문과 같은 코드!
for (let i in arr) {
  console.log(i)
  console.log(arr[i])
}
//0
//coconut
//1
//banana
//2
//strawberry
//3
//apple