[인프런]Javascript입문 - 객체와 프로토타입 (프로토타입, 배열/객체/참조변수)

* 이 글은 인프런에서 제공하는 호눅스님의 유료 강의 '쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1'를 듣고 공부하며 정리한 글입니다. 강의 내용에 더해 제가 필기하고 구글링한 내용이 정리되어 있습니다. 초보인 제가 이해한 대로 정리했기 때문에, 부정확한 내용이 있을 수 있음을 감안해 주시길 바랍니다. 강의의 단순 복붙이 아닌 내용을 정리한 글이기 때문에 문제가 되지 않는다는 인프런 측 답변을 받은 적이 있으나(https://bibi6666667.tistory.com/37), 저작권상 문제가 된다면 보호 모드(비공개)로 전환하겠습니다.

 

Prototype

난이도가 꽤 있는 강좌이므로 그냥 안 배우시고 넘어가도 무방합니다.

 

프로토타입 prototype

생성자로 만든 객체는 프로토타입이라는 속성을 가집니다.
프로토타입이란? '클래스 간에 공유하는 속성' 이라고 일단은 알아두기.
(👉지금은 '프로토타입이라는 속성이 있고, 클래스 간에 프로토타입이라는 속성을 공유한다' 정도만 알아두기.)

자바스크립트로 객체 지향 프로그래밍을 하기 위해서는 프로토타입을 잘 이해해야 합니다. MDN 참고 링크  
(but 초보 레벨에서 다 이해하는 건 무리이므로 그냥 이런 게 있다 정도만 알아두자)

일단 우리는 프로토타입을 이용해서 메소드를 생성하려 합니다.
이렇게 하면 메모리를 절약하고, 효율적으로 객체의 메소드를 생성할 수 있습니다.

지난 예제들처럼, 생성자Human 안에 메소드attack를 만드는 것은 사실 굉장히 비효울적인 일이다.
각 인간들은 name, hp, mp, power은 각각 모두 다르게 가질 것이나,
attack이라는 메소드는 모든 인간들에게 공통적으로 적용될 것이기 때문.
그러나 생성자 내에 메소드를 넣어버리면, 각 인간들마다 메소드를 따로따로 가지게 되어 메모리를 낭비하고 비효율적으로 메소드가 만들어지게 된다.
이 때, 인간이라는 "클래스class"들이 공통으로 가지는 메소드를 "프로토타입prototype"으로 묶어서 한 번의 코드로 적용해 줄 수 있다.

 

// 프로토타입 없이 생성자 내에 메소드를 넣으면..
function Human(name, hp, attack) {
    this.name = name; 
    this.hp = hp;
    this.power = attack;
    this.attack = function(target) {
        target.hp -= this.power; 
    };
}
// Human생성자를 통해 새 객체를 만들 때마다 메소드가 따로따로 생성되어, 비효율적이고 메모리가 낭비됨.

// 프로토타입을 활용해 생성자와 메소드를 따로 만들면..
function Human(name, hp, attack) {
    this.name = name; 
    this.hp = hp;
    this.power = attack;
}
var p1 = new Human('honux', 10);
p1; // Human {name: "honux", hp: 100, pow: 10}
p1.attack(p1) // 에러 발생. 아직 .attack()메서드가 만들어지지 않았기 때문!

//프로토타입으로 .attack()메서드를 만든다.
Human.prototype.attack = function(target) {
	target.hp -= this.power; 
};
Human; 
/* f (name, attack) {
	this.name = name;
    this.hp = 100;
    this.pow = attack;
   } 으로 조회된다. */
Human.prototype; 
// {attack: f, constructor: f}으로 조회된다.
p1.attack(p1)
p1; // Human {name: "honux", hp: 90, pow: 10}
// 프로토타입으로 메소드를 만들고 나면 .attack()메소드가 잘 작동함.

 

 

배열과 객체

객체의 속성값이 배열이 될 수 있습니다. 
(객체 내의 속성으로 배열을 넣을 수 있다)

p1.item = ["sword", "shield", "potion"];
// 객체 p1의 속성 item으로 ["sword", "shield", "potion"]라는 배열을 넣었다.
p1; // Human {name: "honux", hp: 90, pow: 10, item: ["sword", "shield", "potion"]}
p1.item; //  ["sword", "shield", "potion"]
p1.item[0] // "sword"
p1.item[1] // "shield"
p1.item[2] // "potion"
// 이렇게 객체의 속성값으로 배열이 들어갈 수 있다.

 

또, 배열 안의 값들이 객체가 될 수  있습니다.
(배열의 원소로 객체를 넣을 수 있다)

// (앞 코드와 이어짐)
var arr = [p1, p2];
arr; // [p1, p2]
arr[0]; // Human {name: "honux", hp: 90, pow: 10, item: ["sowrd","shield","potion"]}
arr[1]; // Human {name: "crong", hp: 100, pow: 30}
// 이렇게 배열 arr 내의 값들이 객체(p1, p2)가 될 수 있다.

arr[0].hp = 500;
p1; // Human {name: "honux", hp: 500, pow: 10, item: ["sowrd","shield","potion"]}
//왜 바뀌는가? p1도 arr도 모두 객체를 담고 있는 '참조변수'이기 때문.

 

➕ 객체 안에 배열/객체, 배열 안에 배열/객체 ... 중첩해 넣기 예시.

// 객체 안에 배열, 배열 안에 객체 ... 넣기 예시.
var p3 = new Human("pobi", 99);
p3; // Human {name: "pobi", hp: 100, pow: 99}

p1.friends = [p2, p3]
p1; 
// Human {
//  name: "honux",
//  hp: 500, 
//  pow: 10, 
//  item: ["sowrd","shield","potion"], 
//  friends: [Human {name: "crong", hp: 100, pow: 30}, 
//   		  Human {name: "pobi", hp: 100, pow: 99}]
//  }

p3.friend = p1;
p3;
// Human {
//  name: "pobi",
//  hp: 100, 
//  pow: 99, 
//  friends: Human {name: "honux", hp: 500, pow: 10, item: ["sowrd","shield","potion"], friends: [Human {name: "crong", hp: 100, pow: 30}, Human {name: "pobi", hp: 100, pow: 99}]}, 
//  }

p1.friends[1];
//  Human {
//  name: "pobi",
//  hp: 100, 
//  pow: 99, 
//  friends: Human {name: "honux", hp: 500, pow: 10, item: ["sowrd","shield","potion"], friends: [Human {name: "crong", hp: 100, pow: 30}, Human {name: "pobi", hp: 100, pow: 99}]}, 
//  }

p1.friends[1].friend;
// Human {
//  name: "honux",
//  hp: 500, 
//  pow: 10, 
//  item: ["sowrd","shield","potion"], 
//  friends: [Human {name: "crong", hp: 100, pow: 30}, 
//   		  Human {name: "pobi", hp: 100, pow: 99}]
//  }

p1.friends[1].friend.friends[0];
// Human {name: "crong", hp: 100, pow: 30}

// 이렇게 여러 번 객체 안에 객체/배열을, 배열 안에 객체/배열을 넣고 꺼내 쓸 수 있다.

delete(p1.friends)
//delete()를 사용해 객체의 속성을 다시 지울 수 있다.

 

 

배열, 객체와 참조변수

-객체를 변수에 할당하면 그 변수는 참조 변수가 됩니다.
-배열도 객체이므로, 배열을 변수에 할당하면 역시 참조 변수가 됩니다.

-함수 호출시 참조 변수를 매개 변수로 전달하면, 함수 내부에서 변경한 값이 외부에서도 변경된다는 것 꼭 기억하세요.