2022-11-21: 생활코딩 - JavaScript 객체 지향 프로그래밍 (1)

1️⃣ 객체와 배열

객체
- 이름(name/key)과 값(value)으로 구성된 프로퍼티의 정렬되지 않은 집합
- 객체에 있는 값에 접근할 시, 객체 속 이름으로 접근해야 한다.
  - 예) aaa.name / aaa[”name”]
- 객체의 속성들에 반복적인 작업을 수행하고 싶다면 for … in 반복문을 사용할 수 있다.
```
var obj = {a: 1, b: 2, c: 3};

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"
```
  - prop라는 변수를 이용해 객체 obj에 있는 name/key를 받아와 콘솔창에 반복적으로 출력하게 만들었다.
  - 이런 것이 가능한 이유는 객체 내에 내부적으로 사용하고 있는 몇 가지 숨겨진 속성들 때문인데, 그 중에서는 반복문을 허용시켜주는 ‘나열할 수 있는(Enumerble)’ 속성이 있으며 이 속성의 값이 true인 name/key들만을 대상으로 객체 내 반복문을 적용할 수 있게 해준다.
    - 여담으로, 이 글에서 반복 가능한(iterable) 객체나 반복자(iterator)는 다루지 않는다.
      - 추후에 공부하면서 작성해보도록 하겠다.
배열
- 값들로만 구성된 프로퍼티의 정렬된 집합
- 배열에 있는 값에 접근할 시, 배열의 순서(index)로 접근해야한다.
  - 예) bbb[0] / bbb[13]
  - 배열의 값들에 반복적인 작업을 수행하고 싶다면 for문이나 forEach() 메소드를 사용할 수 있다.
JavaScript의 객체 활용 예
- JavaScript에서는 몇 가지 기능들을 편하게 사용할 수 있게 객체화된 것들이 있다.
  - 대표적으로 Math() 객체를 떠올려보자.
```
console.log("Math.PI", Math.PI);
console.log("Math.random()", Math.random());
console.log("Math.floor(3,9)", Math.floor(3.9));
```
  위의 코드와 같이 우리는 Math라는 객체의 메소드 등을 통해 원하는 값을 도출해낼 수 있다.
  
  이것이 가능한 이유는 Math라는 객체를 이용해 수학과 관련한 기능, 메소드들을 그룹핑해 관리하기로 약속이 되어있기 때문이다.
  
  이처럼 Math와 같은 기존 객체들을 이용해 기능을 이용하고 코드를 작성해나가기도 하면서 직접 객체를 만들어 사용하는 등 객체를 적극적으로 활용해 개발하는 프로그래밍 방식을 객체 지향 프로그래밍(Object Oriented Programming)이라고 한다.
  - 실질적으로 OOP를 다루는 내용은 추후 기회가 될 때 작성해보겠다.
만약 필요하다면, 스스로 객체를 만들어낼 수도 있다.

const myMath = {
	PI : Math.PI,  // name(key)와 value로 변수에 값을 추가
	random : function () {
		return Math.random();
	}, // name의 value로 함수를 넣을 수도 있다. 이것을 '메소드'라고 말한다.
	floor: function(int) {
		return Math.floor(int);
	}
}

console.log("myMath.PI", myMath.PI);
console.log("myMath.random()", myMath.random());
console.log("myMath.floor(3,9)", myMath.floor(3.9));

이처럼 객체를 이용하면 서로 연관된 변수나 함수들을 객체라는 존재에 하나로 그룹핑하여 관리할 수 있다.

2️⃣ this

this는 메소드에서 메소드가 속해있는 객체를 참조할 때에 사용되는 키워드이다.
- 즉, 객체 내에서 객체 자신을 가리킬 때에 사용하는 것이 바로 this다.

const kim = {
    name:'kim',
    first:10,
    second:20,
    sum:function(){
        return this.first+this.second;
    }
}

console.log("kim.sum(kim.first, kim.second)", kim.sum());

객체 kim 안에 있는 메소드, sum을 보면 this라는 명령어가 보인다. 여기서의 this는 메소드가 속한 객체인 kim을 직접적으로 가리키고 있다. 이처럼 this는 메소드가 속한 객체를 가리키는 특수한 예약어다.

목차

1️⃣ 객체와 배열

2️⃣ this