객체지향
JavaScript는 객체지향 프로그래밍이라고 한다. 정확한 의미에 대해서는 아직 모르겠지만, 객체들로 프로그램이 구성되어 있고 이 객체들이 서로 상호작용이 가능하다고 한다. 오늘은 그 개념의 중심중 하나인 Class에 대해 알아보면서 개념정리와 신기했던 부분들을 남겨볼려고 한다.
Class
Class는 일일이 객체를 생성해야되는 단점을 보완한 "객체 제작 공장"같은 역할을 수행할 수 있다. 먼저, MDN에 나온 사용방법은 다음과 같다.
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}나는 여기서 헷갈리기 시작했다. constructor에서 height와 width를 변수로 받는것은 알겠는데 그러면 대체 this.height = height라는 문법은 무슨뜻일까. "이높이 = 높이"라는 뜻인지 아니면 "this.변수 = 변수"인지 또 대체 "this"는 무엇인지,,, 학습하고 나서 내가 이해한 표현식은 다음과 같다.
class Person {
constructor(name, age) {
this.이름 = name;
this.나이 = age;
}
};우선, 여기서 constructor라는 메서드는 생정자라고 표현하는데, 새로운 객체를 생성시킬 수 있는 레시피 혹은 붕어빵의 틀같은 역할을 하는데 예를 들어
const minJae = new Person('Kim Minjae', 17);이런식으로 객체들을 찍어낼 수 있고, 이 class를 통해 생성된 객체를 Instance라고 한다.
minJae = {
이름 : 'Kim Minjae',
나이 : 17
};그러면 이 minJae라는 객체에는 위와 같은 정보가 담기게 된다. 한마디로 일일이 모든 사람의 이름과 나이를 객체로 타이핑을 안해도 나이, 숫자 value만으로도 객체를 생성할 수 있어서 매우 편하게 사용할 수 있다. 따라서, constructor 메서드에 this 키워드를 사용했는데, 이는 class의 실행범위에서 this 는 해당 instance를 의미하고, 인자를 받아 property에 값을 할당해주는 역할을 한다.
Array.push
Class생성을 연습하던중에
1. MyMath 라는 class를 생성하고,
2. constructor 에서는 숫자 2개를 인자로 받아 프로퍼티로 저장하며
3. getNumber라는 두 개의 숫자가 무엇인지 배열로 반환하는 메서드를 구현해보자
라는 문제를 만나게 되었다.
class MyMath {
constructor(num1, num2) {
this.일번 = num1;
this.이번 = num2;
}
getNumber() {
let arr = [];
return arr.push(this.일번,this.이번);
}
};나는 처음에 먼저 숫자 2개의 인자를 받는 constructor를 만들고, 그 바깥에 메서드를 구현하여 비어있는 Array에다가 this.일번 과 this.이번을 push해서 num1과 num2가 담긴 Array를 반환하려고 했지만 원하는 결과는 나오지 않고 계속 결과값으로 2가 도출되었다. 그래서 계속 갈피를 못찾던중 MDN을 참조해보니 다음과 같은 사실을 알게 되었다.
Array.push()는 소괄호내의 요소를 추가한 배열을 반환하는것이 아닌, 반환의 행위만 해주고 배열의 새로운 길이를 반환하는것이었다...!
따라서, 원하는 결과값을 얻을려면
class MyMath {
constructor(num1, num2) {
this.일번 = num1;
this.이번 = num2;
}
getNumber() {
let arr = [];
arr.push(this.일번, this.이번);
return arr;
}
};다음과 같이 push()를 해준뒤에 변수를 반환해야 원하는 값을 얻을 수 있었다. 이를 통해서 이미 다들 알고 있었던 사실이지만 나는 너무 쉽게 이해하고 지나쳤다는 생각이 들었고, 앞으로 새로운 개념을 배울때는 단편적으로 배우기 보다는 공식문서와 여러가지 참고자료들을 보며 확실히 이해해야겠다는 생각이 들었다.
