Object
1. Object 생성 방법
1) object literal
const obj1 = {};
const popi = { name: 'popi', age: 2};
// 클래스가 없어도 괄호를 이용해 Object 생성 가능2) object constructor
const obj2 = new Object();
// new 키워드를 이용해 생성하면 Object에 정의된 constructor가 호출javascript는 dymamically typed language(동적으로 Runtime일 때 type이 결정되는 언어) 이기 때문에 이미 object를 정의했음에도 이후에 데이터 추가/삭제 가능 (추천❌)
(Runtime: 프로그램이 동작하고 있을 때)
코드를 빨리 작성하는데 도움을 줄 수 있으나 유지보수가 힘들고 예상치 못한 에러가 발생할 우려가 있어 위의 방식은 지양함
Object는 key와 value의 집합체( Object = {key : value} )
Object는 접근할 수 있는 변수(property)와 변수가 가지고 있는 값(value)으로 나뉨
2. Object 안에 데이터 접근 방법
1) object.key // .(점)을 이용
=> 코딩할 때 key에 해당하는 value를 받아올 때 사용하는 방법
2) object['key'] // []를 이용 : computed properties
배열에서 데이터를 받아오는 것처럼 key(property)는 string 형태로 지정!(object[key]❌)
=> 정확하게 어떤 key가 필요한지 모르고 Runtime에서 결정 될 때(실시간으로 원하는 key값 받아올 때) 사용하는 방법
나중에 동적으로 key와 관련된 value를 받아야 할 때 유용하게 사용할 수 있는 방법
// 원하는 key를 user에게 입력 받아 출력하는 함수
// 코딩 시점에는 출력해야하는 값을 알지 못함
function printValue(obj, key) {
// console.log(obj.key); // undefined
console.log(obj[key]); // popi
}
printValue(popi, 'name');
printValue(popi, 'age');3. 함수를 이용한 간편한 Object 생성 방법
function makePet(name, age) {
return {
name, // name :name
age, // age: age
};
}
const pet = makePet('koko', 3);
const pet2 = { name: 'anny', age: 1 }; // 일반적인 방법Object를 필요할 때마다 일일이 만들면 동일한 key와 value를 반복해서 작성해야 하는 문제점 발생💢
=> (클래스와 유사한 형태) 함수를 이용해 인자를 전달하여 Object를 생성
Javascript에는 property value shorthand 기능을 갖고 있어 key와 value의 이름이 동일하다면 생략 가능
4. Constructor Function
function Pet(name, age) {
// this = {};
this.name = name;
this.age = age;
// return this;
}
const pet3 = new Pet('bob', 2);일반적인 함수처럼 로직 없이 순수하게 Object를 생성하는 '함수명'은 보통 대문자로 시작.
Class에서의 constructor(객체의 기본 상태를 설정해주는 생성자 메서드)처럼 return 대신 this를 사용해 작성.
(this는 (객체에 대한 초기화가 끝나서 변수에 객체가 할당되기 전인 상태에도) 객체를 참고할 수 있는 식별자로서, 필수적으로 사용되는 키워드! '함수가 소속되어 있는 객체'를 가리킬 때 사용)
- 함수가 생성자로 사용될 때 this는 ✨생성될 객체✨를 가리킴
- 일반 함수로 호출할 때 this는 window(전역 객체)를 가리킴
'함수 호출' 시 Class에서 Object를 생성하는 것처럼 'new' 키워드를 사용. => 자바스크립트 엔진이 알아서 Object 생성
5. in operator (key in obj)
Object에 해당하는 key의 유무를 확인
console.log('name' in bob); // true
console.log('age' in bob); // true
console.log('gender' in bob); // false
console.log(bob.gender); // 정의하지 않은 key 접근 시, undefined6. for..in
for (key in obj)
Object에 모든 key를 받아올 때 사용
for (key in popi) {
console.log(key); // name, age
}7. for..of
for (value of iterable)
배열, 리스트와 같은 순차적으로 반복하는 객체의 모든 값을 받아올 때 사용
const array = [1, 2, 3, 4, 5];
for (value of array) {
console.log(value); // 1, 2, 3, 4, 5
}
/* 이전 방식
for (let i=0; i<array.length; i++) {
console.log(array[i]);
}
*/