Javascript) 객체 배열-리터럴(call())

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

객체 배열 - 리터럴

 

HTML 코드

<button onclick="test1();">객체배열 - 리터럴</button>

 

Javascript 코드

const test1 = () => {
    const pets = [];
    pets.push({
        name : '뚱이',
        breed : '시추',
        weight : 8,
        age : 15,
        color : ['brown'],
        bark() {
            return this.weight > 10 ? '왈왈' : '멍멍'
        }
    });
    pets.push({
        name : '둘리',
        breed : '말티푸',
        weight : 3,
        age : 4,
        color : ['brown'],
        bark() {
            return this.weight > 10 ? '왈왈' : '멍멍'
        }
    });
    pets.push({
        name : '사랑이',
        breed : '코카스파니엘',
        weight : 13,
        age : 3,
        color : ['white', 'brown'],
        bark() {
            return this.weight > 10 ? '왈왈' : '멍멍'
        }
    });
    console.log(pets);
};

리터럴 방식으로 객체 배열을 만들어보았습니다.

 

반복처리를 통해 00야~ 왈왈/멍멍을 출력해보겠습니다.

pets.forEach((pet) => {
    const {name} = pet;
    console.log(`${name}야~ ${pet.bark()}!`);
});

구조분해할당으로 name을 가져왔으며, bark()메소드는 pet객체에 직접 접근하여 불러왔습니다.

 

 

※ method는 구조분해할당을 하면 this를 잃어버리기 때문에 유의해야 합니다.

 

bark() 구조분해할당 시

pets.forEach((pet) => {
    const {name, bark} = pet;
    console.log(`${name}야~ ${bark()}!`);
    // console.log(`${name}야~ ${pet.bark()}!`);
});

bark()메소드의 return 값은 this.weight > 10 ? '왈왈' : '멍멍'인데 this를 잃어버렸기 때문에 모두 '멍멍'으로 출력되는 것을 확인할 수 있습니다.

 

그렇다면 bark()메소드 내에 this는 누구를 가리키는 지 확인해보겠습니다.

const pets = [];
pets.push({
    name : '뚱이',
    breed : '시추',
    weight : 8,
    age : 15,
    color : ['brown'],
    bark() {
        console.log(this.weight);
        return this.weight > 10 ? '왈왈' : '멍멍'
    }
});
pets.push({
    name : '둘리',
    breed : '말티푸',
    weight : 3,
    age : 4,
    color : ['brown'],
    bark() {
        console.log(this.weight);
        return this.weight > 10 ? '왈왈' : '멍멍'
    }
});
pets.push({
    name : '사랑이',
    breed : '코카스파니엘',
    weight : 13,
    age : 3,
    color : ['white', 'brown'],
    bark() {
        console.log(this.weight);
        return this.weight > 10 ? '왈왈' : '멍멍'
    }
});
// console.log(pets);

pets.forEach((pet) => {
    const {name, bark} = pet;
    console.log(`${name}야~ ${bark()}!`);
    // console.log(`${name}야~ ${pet.bark()}!`);
});

현재 객체의 this를 가지고 있어야하는데 구조분해할당을 하면서 this를 잃어버려 undefined가 출력되는 것을 확인할 수 있습니다.

 

해결 방법

pets.forEach((pet) => {
    const {name, bark} = pet;
    console.log(`${name}야~ ${bark.call(pet)}!`);
    // console.log(`${name}야~ ${pet.bark()}!`);
});

call()을 이용하여 this를 pet으로 binding하여 bark()를 호출하도록 하였습니다.