[인프런] Javascript입문 - 객체 1

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

 

객체object의 기초

 

객체object 란 무엇인가?

• 현실의 물체object와 대응되는 개념입니다. 
• 객체를 사용하면 변수와 함수를 묶어서 관리하게 됩니다.
  (= 객체를 사용할 때는, 변수와 함수를 의미있는 단위로 묶어서 관리한다.)
• 객체object 는 속성property과 메소드method를 가집니다.

 

객체 만들기

비어 있는 객체를 만들 때는 중괄호{} 쌍을 사용한다.
(※배열은 대괄호[]를 사용했다)

var p1 = {};
typeof p1; // 'object' (객체)

 

속성 property

객체의 변수, 즉 객체에 속한 변수 를 속성이라고 한다.

.
점. 속성 및 메소드에 접근할 때 사용하는 표기법.

p1.name = "crong"; // p1이라는 객체의 name을 "crong"이라고 한다.
console.log(p1.name); // "crong"
p1; // {name: "crong"} 객체 p1의 모습.

p1.name = "honux"; // 내용을 바꿀 수도 있다.
console.log(p1.name); // "honux"

 

메소드 method

객체의 함수, 즉 객체에 속한 함수 를 메소드라고 한다.

// 객체 p1에 name이라는 속성을 넣음.
p1.name = "honux"

// 객체 p1에 eat이라는 메서드를 연결해 보자.
// 일반적인 함수와 사용방법은 거의 같다.
p1.eat = function(food) {
	console.log( food + "를 먹습니다." ); 
}; 

p1.eat("Beef"); // Beef를 먹습니다.

p1; // {name: "honux", eat: f}  ***f는 function이라는 뜻.
// 즉 객체 p1은 name이라는 속성과 eat이라는 메서드를 가지게 되었다.

 

---

 

객체의 메소드 대신에 일반 함수를 썼다면?

// eat이 메서드가 아닌 함수였다면 아래와 같이 사용했을 것.
eat(p1, "사이다"); // p1이 사이다를 먹는다.

메서드 대신 일반 함수를 썼다면 위와 같이 사용되었을 것이다.
그러나 이렇게 코딩했을 때는 의미가 바로 와닿지 않는다.
(eat는 p1과 "Beef"라는 매개변수를 갖는 함수이군. 정도)

 

p1.eat("사이다");

반면 이처럼 p1을 객체로 사용하면, eat는 p1의 함수 즉 메서드이고 
p1이 사이다를 eat했다는 의미가 더 명확하게 전달된다.

즉..

함수 대신 객체의 메소드를 사용하는 이유 ?
-> 함수를 묶어서 사용해 의미를 명확하게 하고, 가독성을 높이기 위해.

 

객체 지향 프로그래밍 OOP

객체 지향 프로그래밍 Object-Oriented Programing, OOP 이란? 
-> 객체를 사용해, 변수와 함수를 묶어서 코드를 구현하고 관리하는 것.
(참고 : velog.io/@hkoo9329/OOPObject-Oriented-Programming-%EA%B0%9D%EC%B2%B4-%EC%A7%80%ED%96%A5-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EC%9D%B4%EB%9E%80)

객체 지향 프로그래밍의 장점

• 유지보수가 쉬워진다.
• 가독성이 높아진다.
• 대형 프로그램을 짜기 쉬워진다.

-> 이런 장점들 때문에, '객체지향 프로그래밍'은 현 시대에 중요한 프로그래밍 컨셉으로 자리잡았다.

객체 지향 프로그래밍을 하는 법

-> 어떤 프로그램을 짤 때, 객체 중심으로 logic을 짜고 코딩을 한다.

우선 필요한 객체들을 생각하고, 각 객체들이 어떤 일을 하는지, 어떤 객체들이 협력하는지, .. 를 고려해 설계한다.

• 객체와 객체가 협력해서 일을 한다.
• 객체는 일에 책임을 진다.
• 객체는 객체에 메시지를 보낸다.
• 객체는 자율적으로 일을 한다.

※ 객체지향 프로그래밍을 위해서는 참고도서를 보면 좋다. "(프로그래밍언어) + 객체지향프로그래밍".
ex. Javascript 객체지향프로그래밍

지금은 왕초보레벨1이기 때문에 객체를 완전히 이해하는 것 자체가 어렵다.
우선 '객체가 있다' 정도만 이해하자.

---

this 키워드

this는 (객체의) 메소드 내에서 사용할 수 있는 개념이다.
(반복문에서 break를, 함수에서 return을 사용할 수 있는 것처럼)

this
: (메소드 안에서 사용시) 함수를 소유한 객체 자체를 가리킨다.
즉 객체 메서드의 함수 구문 내에서, 객체 자신을 가리키는 말이다.

 

** this를 왜 쓰는가?
Q. 메서드 내에서도 this.name 대신 p2.name을 사용하면 되지 않는가?
A. 메서드 내부에서는 메서드 바깥쪽에 있는 객체 p2를 인식할 수 없다.
따라서 p2.name처럼 사용할 수 없기 때문에 this를 사용하는 것.

** Q. 왜 어떨 때는 this가 아니라 p2.name처럼 사용해도 동작하는가?
문법상 틀렸지만, javascript에서 알아서 동작해 주는 것.
지금 단계에서 알아야 하는 내용은 아니지만.. 더 공부하려면 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this를 참고해라.

var p2 = {}; // p2라는 객체 생성.

p2.name = "crong"; // 객체 p2의 속성 name은 'crong'
p2.weight = 100;  // 객체 p2의 속성 weight는 100

p2.eat = function(food) {
  console.log(this.name + "이 " + food + "를 먹었습니다."); 
  this.weight += 1;
  console.log(this.name + "의 현재 몸무게는 " + this.weight + "입니다.");
}; // 객체 p2의 메소드 eat을 만듦.

---

 

객체 만들기2

객체를 만들 때, 비어 있는 객체에서 값을 추가하는 게 아니라
처음부터 속성과 메서드를 정의해 객체를 만들 수도 있다.

-> JSON 표기법을 이용하면 가능하다.

JSON
: JavaScript Object Notation. 즉 '자바스크립트에서 객체를 표기하는 방법' 이라는 뜻이다.

JSON형식은 아래와 같은 표기방식이다.

var 객체명 = {
  "속성명" : 값,
  "속성명" : 값,
  ..
  "메소드명" : function(매개변수) {
	//함수내용
    },
  "메소드명" : function(매개변수) {
	//함수내용
    },
  ..
};

 

예제

var m1 = {
  "name": "Honux",
  "hp": 100, 
  "power": 20, 
  "attack": function(target) { 
  	target.hp -= this.power;
  } 
}; 
// JSON표기법을 이용해, 처음부터 m1이라는 객체에 
//세 가지 속성(name, hp, power)과 한 가지 메서드(attack)를 정의하고 있다.
// 메소드 attack : target의 hp를 this(=m1)의 power만큼 빼는 함수.

m1.attack(m1); // 자기 자신을 공격하면..
m1; // {name: "honux", hp: 80, power: 20, attack: f} hp가 m1의 power인 20만큼 깎였다.

+응용

//m1의 새로운 메서드 eat를 만들어 보자.
m1.eat = function(c1) {
    this.hp += c1.energy;
}; // m1이 c1이라는 변수를 eat하면 m1의 hp가 c1의 energy만큼 더해진다.

// 먹을 개체 c1을 만들자.
var c1 = {
  type: "Coffee",
  energy: 10
};

m1.eat(c1);
m1; 
// {name: "Honux", hp: 90, power: 20, attack: f, eat: f} f는 함수라는 뜻.

*생성자 함수를 이용하는 방법도 있지만 다음에 다루겠습니다.
(객체를 만드는 세 가지 방법
-비어있는 객체 {} 만들고 속성,메서드 넣기 
-JSON표기법 이용하기
-생성자 함수 이용하기)

 

※ 오늘 강의의 체크포인트

-객체를 만들어낼 수 있는가?
-this를 사용할 수 있는가?