object = {key : value}
object는 key 즉, 우리가 접근할 수 있는 property와 property가 가지고 있는 value로 나뉘어져 있음
const obj = { };
const obj = new object();
properties에 접근하기 위해선 두 가지 접근법이 있다.
1) .을 이용한 접근
let spaceship = {
'planet' : 'Earth',
'color : 'silver'
};
spaceship.planet; // returns 'Earth'
spaceship.color; // returns 'silver'
spaceship.fast; // returns undefined
2) 대괄호 [ ] 를 이용한 접근
let spaceship = {
'Fuel Type': 'Turbo Fuel',
'Active Duty': true,
homePlanet: 'Earth',
numCrew: 5
};
spaceship['Active Duty']; // Returns true
spaceship['Fuel Type']; // Returns 'Turbo Fuel'
spaceship['numCrew']; // Returns 5
spaceship['!!!!!!!!!!!!!!!']; // Returns undefined
let returnAnyProp = (objectName, propName) => objectName[propName];
returnAnyProp(spaceship, 'homePlanet'); // Returns 'Earth'
function print(person) {
console.log(person.name);
console.log(person.age);
}
const serena = {name : 'serena', age : 20};
print(serena)
// output: serena 20
뒤늦게 추가도 가능하며, 삭제도 가능하다
serena.job = 'developer';
console.log(serena.job); // developer
delete serena.job // undefined
console.log(serena.name);
console.log(serena['name']);
위와 같이 배열에서 데이터를 받아오는 것처럼 접근하는 것을 말함
property는 ' '를 붙여 string 타입으로 받아와야 함
위에 삭제된 job을 computed properties를 이용하여 다시 추가할 수도 있다.
serena['job'] = developer;
💡 언제 .의 형태를 쓰고, [ ] 의 형태를 쓸까?
- .name과 같이 .의 형태를 쓸 때는 코딩하는 순간 그 키에 해당하는 값을 받아오고 싶을 때 사용
- []는 정확하게 어떤 키가 필요한지 모를 때, runtime에서 결정될 때 사용
만약에
function printvalue(obj, key) {
console.log(obj.key);
}
printvalue(serena, 'age');
를 호출할 경우 object에 key라는 property가 없으므로 undefined가 나옴
값을 출력하려면
serena.key = 'my key';
와 같이 할당을 해줬어야 함
따라서 아래와 같이 computed property를 이용해서 값들을 불러와야 함
function printvalue(obj, key) {
console.log(obj[key]); // computed property 로 변경
}
printvalue(serena, 'age');
// output: 20
const person1 = { name : 'gemma', age: 19};
const person2 = { name : 'alberto', age: 28};
const person3 = { name : 'serena', age: 31};
이 있을 때 person4, 5, 6 등을 만들 때 또다시 뒤의 내용을 반복하기 번거롭다.
이 때 Makeperson()
을 만들어서 대입해주면 더 편하게 만들 수 있다.
function Makeperson(name, age) {
return {
name : name,
age : age,
}
}
const person4 = Makeperson('Marco', 35);
console.log(person4) ; //output: {name: "Marco", age: 35}
이 때 JavaScript에는 key와 value의 이름이 동일하다면, 한번만 작성해도 됨
function Makeperson(name, age) {
return {
name,
age,
}
}
object를 일일이 만들게 되면 동일한 key와 value를 반복해서 작성해야하는 문제점이 있다. 이를 해결하기 위해 함수를 이용해서 값만 전달해주면 object를 만드는 유용한 함수를 생성했다(Makeperson()).
즉 Makeperson은 class처럼 templete의 역할을 하는데,
다른 계산을 하지 않고 순수하게 object를 생성하는 함수들은
대문자로 시작하게 만들고, return을 사용하지 않고 this.
을 사용한다
호출할 때도 new funcion name으로 작성한다.
const person4 = new Person('Marco', 35);
function Person(name, age) {
this.name = name;
this.age = age;
}
const person4 = new Person('Marco', 35);
function Person(name, age) {
this.name = name;
this.age = age;
}
console.log('name' in person4); // output : true
for (key in obj) {
console.log(key, obj[key]);
serena가 가지고 있는 모든 key들을 보여줌
for (key in serena) {
console.log(key);
}
//output : name age job
const array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) {
console.log(array[i]);
}
로 출력하던 것을 간단하게 출력 가능
for (value of array) {
console.log(value);
}
const user = {name : 'serena', age: 18};
const user2 = user;
user2.name = 'marco';
console.log(user); // {name: "marco", age: 18}
user2와 user가 같은 reference를 갖고오기 때문에 user2의 이름을 바꾸면 user의 값도 바뀌게 됨.
이런 변화 없이 user 값을 복사하고 싶다면
const user3 = {};
for (key in user) {
user3[key] = user[key];
}
console.log(user3); // output : {name: "marco", age: 18}
user 안에 있는 key들을 순차적으로 불러오면서 user3의 key는 user key에 할당된 value를 불러옴
const user4 = {};
Object.assign(user4, user);
console.log(user4); // output : {name: "marco", age: 18}
위를 더 간단하게 작성하면
const user4 = Object.assign({}, user);
console.log(user4);
로 작성해도 됨
Object.assign은 여러개의 source도 전달할 수 있는데, 뒤에 나오는 것이 앞쪽의 property를 덮어씌우면서 출력되므로 유의해야한다.
예를 들어
const stone1 = {color : 'black'};
const stone2 = {color : 'white', size : 'small'};
const stone3 = {color : 'brown'}
const mixed = Object.assign({}, stone1, stone2, stone3);
console.log(mixed.color); // brown
console.log(mixed.size); // small
위의 예시에서 살펴볼 수 있듯이,
color값이 stone3의 값으로 덮어씌워져있는 것을 볼 수 있다.