Javascript - object

안녕하세요, 오늘은 Object(객체)에 대해 정리해보겠습니다.

 

1. Literal and properties : 객체를 생성하는 방법은 2가지가 있습니다.

'object constructor' 구문과 'object literal' 구문입니다. 아래 코드를 보며 설명드리겠습니다. object constructor는 Object나 function과 같은 생성자를 이용하여 만드는 것이고 object literal은 {}블럭을 이용하여 생성하는 방식입니다.

const obj2 = new Object(); //'object constructor' syntax
const obj1 = {}; //'object literal' syntax

 

주로 object literal을 많이 쓰므로 이것을 예로 더 살펴보겠습니다. 처음에 객체를 생성한 후에 추가도 가능합니다. 추가하는 방법으로는 object.key = value; 를 이용하여 추가할 수도 있으며 Python과 같이 대괄호 표기법을 이용해서 추가할 수도 있습니다! 아래 코드를 보며 설명드리겠습니다! (.)점 표기법은 key에 띄어쓰기가 포함되어 있을 경우 에러가 발생하지만 대괄호 표기법은 큰따옴표로 묶어주어 긴 문자열이라도 가능합니다! 단, 대괄호 안은 문자열이어야합니다!

const ellie = {name: 'ellie', age: 4}; // ellie라는 객체를 literal 형식으로 생성

// 처음 정의 하고 나중에 추가 및 삭제 가능
ellie.hasJob = true; // .(dot)을 이용한 객체 속성 추가 
console.log(ellie.hasJob); // true 출력
console.log(ellie['hasJob']); // true 출력

ellie["my love"] = 'hoon'; // []대괄호를 이용한 객체 속성 추가
console.log(ellie["my love"]); // hoon 출력

delete ellie.hasJob; // delete 후 object.key를 이용하여 value 삭제 가능
console.log(ellie.hasJob); // undefined 출력

 

대괄호 표현식에 대해 좀 더 알아보겠습니다. 대괄호 표현식을 사용하였을 때 장점으로는 실시간으로 값을 받아올 때 유용하다는 점입니다. 즉 런타임에서 값이 결정될 때 사용합니다! 코드를 통해 확인하겠습니다.

const ellie = {name: 'ellie', age: 4};

function printValue(obj, key) {
    console.log(obj.key);  // ellie안에 key라는 property는 들어있지 않다!! -> undefiend
    console.log(obj[key]); // 함수 실행시 key에 name을 받는다면 object에 name이라는 property는 있다!!
}

printValue(ellie, 'name'); // undefiend와 ellie가 출력이된다 [점 표기법 → undefiend / 대괄호 표기법 → ellie] 
printValue(ellie, 'age'); // undefiend와 4가 출력이된다 [점 표기법 → undefiend / 대괄호 표기법 → 4]

이해하기 힘들어 추가로 예제를 하나 더 살펴보겠습니다! 아래와 같이 대괄호를 이용하면 key를 prompt로 받은 값에 의해 name이라면 user의 'John'이 불러와집니다. 하지만 점표 기법을 사용하면 undefined가 출력되게 됩니다! 

let user = {
  name: "John",
  age: 30
};

let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");

// 변수로 접근
alert( user[key] ); // John (프롬프트 창에 "name"을 입력한 경우)

 

let user = {
  name: "John",
  age: 30
};

let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");

alert( user.key ) // name을 입력하여도 undefined가 출력됨 [user에 key라는 property는 없다!]

2. in operator : property가 객체 안에 있는지 확인할 수 있습니다.

const ellie = {name: 'ellie', age: 4};

console.log('name' in ellie); // true 출력
console.log('age' in ellie); // true 출력
console.log('height' in ellie); // height는 ellie의 property가 아니므로 false 출력
console.log(ellie.height); // property가 없으므로 undefined 출력

3. for ..in / for ..of : for .. in은 객체 내의 key 값을 출력하며 for.. of는 array와 같은 iterable 한 자료형 요소들을 출력합니다. 여기서 iterable한 자료들의 특징은 인덱싱이 가능하다는 것입니다.

//for ..in : object 내의 property 출력
const ellie = {name: 'ellie', age: 4};

for (key in ellie) {
    console.log(key); // name, age 출력
}

//iterable 자료형의 요소 출력하는 방법
//1. i를 이용하여 for 문
const array = [1, 2, 3, 4];
for(let i = 0; i < array.length; i++) {
    console.log(array[i]); // i가 0부터 증가하면서 1/2/3/4 하나씩 출력
}


//2. for..of문 
for(value of array) {
    console.log(value); // 1/2/3/4 출력
}

 

4. Cloning : 다른 객체를 복사할 수도 있고 여러 객체를 합칠 수도 있습니다.

// Object.assign(dest, [obj1, obj2, obj3...])
const user = {name: 'ellie', age: 30};
const user2 = user; // user와 user2는 같은 reference를 가르키게된다.
console.log(user);
user2.name = 'hoon'; // user2의 name property를 'hoon'으로 변경 -> 같은 refernce를 가르키므로 user1의 name도 hoon이 된다
console.log(user); // name은 hoon

// 다른 ref를 갖게하도록 객체를 복사하는 old way 
const user3 = {};
for (key in user) {
    user3[key] = user[key]; //for문을 돌며 key와 value가 같은 property를 만들어준다
}

user.name = 'alex';
console.log(user);
console.log(user2); //user2는 user와 같은 ref를 가리키므로 user.name이 바뀌면 user2.name도 바뀜
console.log(user3); //user.name을 바꿔도 user3은 바뀌기 전의 user.name를 복사하여 변화 X

// new way : Object.assign을 이용한방법
const user4 = Object.assign({}, user);
console.log(user4);

// another example :여러개의 객체를 합칠수도 있다!
const fruit1 = {color: 'red'};
const fruit2 = {color: 'blue', size: 'big'};
const mixed = Object.assign({}, fruit2, fruit1); //뒤가 앞에꺼를 덮어씌운다
console.log(mixed);