이 포스팅은 Javascript 기초 시리즈 7 편 중 6 번째 글 입니다.
목차
자바스크립트의 데이터 타입 중 하나인 object에 대해서 알아보자.
생성
const obj1 = {};
const obj2 = new Object();
const wansik = { name: "wansik", age="27" }; // class 없이 선언 가능
wansik.hasJob = False;
delete wansik.hasJob;
그런데 여기서 약간 미친 짓이 가능한데, 자바스크립트는 런타임에 타입이 결정되기 때문에, 아래와 같이 property를 추가해도 문제가 없다. 사실 이런 코드는 쓰면 안돼.. 그리고 삭제도 가능하다.
접근 방법
wansik.name;
wansik["name"];
사용자로 부터 key를 물어보고 이를 리턴해야 하는 경우에는 아래 문법을 사용해야 한다. 아니면 값을 넘길 수가 없잖아??
Property value Shorthand
const person1 = {name : "bob", age: 2};
const person1 = {name : "steve", age: 3};
const person3 = {name : "baby", age: 4};
const person4 = makePerson("boby", 5);
function makePerson(name, age) {
return { name : name, age: age };
}
여기서 더 추가하려면 일일히 추가해야 한다. 이것을 함수로 하는 방법도 있다. 그런데 좀 더 쉽게도 가능하다.
function makePerson(name, age) {
return { name, age };
}
field의 이름과 property의 이름이 같으면 저렇게만 써도 생성된다. 그런데 사실 이녀석은 Class와 동일하다. 예전에는 class가 없었기 때문에 이런 방식으로 클래스와 비슷한 역할을 하도록 많이 사용되었다. 예전에 어떤식으로 사용했었는지 예시를 보고 넘어가자.
function Person(name, age) {
this.name = name;
this.age = age;
}
class에서 사용하는 대문자 notation과, Constructor에서 사용하는 문법이 사용된 것 같은 느낌이 든다. 그래서 이 함수를 Constructor Function 이라 한다.
For..in / For..of
const wansik = { name: "wansik", age="27" };
for (key in wansik) { // object의 property를 순회할 때
console.log(key);
}
const array = [1, 2, 3];
for (let i = 0; i < array.length; i++){ // 일반적인 순회 방법,
console.log(i);
}
for (value of array){
console.log(value);
}
Copy
const user = { name: "wansik", age : 27 };
const user2 = user; // shellow copy
deep copy를 하려면 어떻게 해야할까? 새로운 객체를 만들고 해당 객체를 순회하면서 복사하는 방법이 있겠다. 하지만 이걸 구현해놓은 함수가 있다.
const user4 = {};
Object.assign(user4, user);
혹은
const user4 = Object.assign({}, user);