- 객체의 기본
우리는 배열을 알고 있다. 배열의 형태는 이러하다.
let members = ['kim', 'son', 'park']members란 배열이 구성되어 있다면 '[ ]' 을 이용하여 'son'을 출력하는것이 가능하다.
console.log(members[1]); // 'son'이런식으로 말이다, 그런데 우리가 만약 'son'에 대해 더 자세한 정보를 넣어 사용하고 싶다면?
중괄호( {} )를 사용하여 객체화 시켜보자, 더 자세한 내용을 가질 수 있게 만들 수 있을것이다.
members를 객체로 변환시켜봤다.
let members = {
boss: 'kim',
manager: 'son',
employee: 'park'
}members의 이름들에 역할이란 키를 만들어 놓았다. 이제 여기서 'son'을 호출하려면
console.log(members.manager); // 'son'이런식으로 'son' 에게 주어진 'manager' 란 키를 호출함으로써 'son' 을 출력할 수 있게 되었다.
tip) 호출할때를 보면, 배열을 []을 사용하고, 객체는 . 을 사용한다, 무조건적인것은 아니다.
객체도 . 을 사용하지 않고 [] 을 사용하여 호출을 할 수 있다.console.log(members['manager']); // 'son'
이것이 객체를 만드는 가장 기본적인 방식이며, 이 객체를 우리는
"여러가지 변수를 그룹핑 해서 이름을 붙여놓은것." 이라고 정의하겠다.
이제 이 객체를 이용하여 프로그래밍을 하는것을 정리할것이다. 그것을 바로
객체지향 프로그래밍 이라고 한다.
- 왜 객체를 사용하는가?
(Thanks to 생활코딩 '이고잉'님)
우리는 굳이 왜? 객체를 사용하는것일까? 객체를 사용하는 예를 하나 들어보겠다.
공부하는 우리도 그렇지만, 이전 자바스크립트 개발자들은 이 코드를 구성하는데에
수학적인 계산이 많이 필요하겠구나를 알고, 그것과 관련된 여러가지 기능들을
미리 구현하여 우리가 사용할 수 있게 해놓았다.(감사합니다.)
예를 들어, 원주율 pi 의 값이 필요할때, 우리는 원주율을 구하기 위한 공식
'둘레 / 지름' 에 대한 식을 굳이 작성하지 않아도 된다.
Math.PI라고 console.log 에 적으면, 원주율이 나온다, 정말 그러는지 확인해 보자.
console.log(Math.PI); // 3.141592653589793또, 소수가 나왔을때 소수 자리를 내림하여 정수로 만들어주는 기능을 하는 녀석들도 만들어져있다.
console.log(Math.floor(3.8)); // 3이와같이 우리는 수학식 뿐만아니라 날짜, 문자관련 등 여러가지 편리한 기능들을 제공받고있다.
선배개발자들이 만들어 놓으신 수많은 메서드들을 불러오는것만으로 저 식을 사용할 수 있게 되었다.
그런데 이런 기능이 없었던 선배개발자들은 어땠을까?
굉장히 혼란스럽고, 디렉토리 없이 한 공간에 펼쳐진 파일들을 보는 내내 한숨만 나왔을 것이다.
수많은 고민끝에, 선배개발자들은 '객체'를 사용하기로 한다.
예로, 한 객체의 이름을 'Math' 라고 주기로 한다.
그리고 코드에 있는 수학과 관련된 변수나 함수(PI, floor())들을
Math라는 객체에 잘 정리정돈하여 하나로 묶어주었다.
이렇게 우리는 자바스크립트를 배운 시점부터 객체를 사용하고 있었던것이다.
자바스크립트는 객체지향언어이다, 우리가 객체를 만들지 않고 사용할 수는 있으나,
이미 만들어진 객체를 사용하지 않고 프로그래밍 하는것은 거의 불가능에 가깝다.
그렇기에 자바스크립트를 공부하는 우리는 객체에 익숙해져야한다.
아니, 필수적으로 공부해야한다.
1) 객체지향 프로그래밍이란?
객체지향 프로그래밍에 대해 이해하고 있는가?
객체지향 프로그래밍이란 말 그대로 "객체를 이용한 프로그래밍" 이다.
뭔가 되게 어려워 보이지만 기본적으로 몇가지의 개념을 알아가다보면
조금은 익숙해질지도 모른다, 그리고 이 개념들을 다 이해하고 난다면
신세계를 경험한다고 하니, 빨리 공부해보도록 하자.
2) 객체를 만들어보자
우리도 선배개발자들처럼 객체를 만들 수 있다.
'Math.PI' 나 'Math.floor()' 같은 객체 말이다.
Tip) 객체에 포함되어있는 함수 ( Math.floor()의 floor()함수 같은 ) 는
함수라고 읽지않고, 메서드 (Method) 라고 읽는다.
프로그래밍에는 쓰일 일이 없겠지만, 그냥 쓸데없는 객체를 하나 만들어보자.
var Toy = {}자, 그냥 가지고 놀 장난감 객체를 하나 선언해 준다.
그리고 이 Toy라는 객체에 마라톤풀코스의 길이를 출력해주는 요소와
a 라는 인자와 b 라는 인자를 더한 값을 출력해주는 요소를 넣어볼것이다.
let Toy = {
marathon: 42.195,
sum: function(a,b){
return a+b
}
}자, 이런식으로 Toy라는 객체에 marathon 과 sum 이라는 매서드를 추가해 주었다.
실제로 잘 돌아가는지 시험해 보자.
console.log(Toy.marathon); // 42.195
console.log(Toy.sum(1,2)); // 3잘 나온다, 이렇게 하면 나도 Math 처럼 Toy 라는 객체를 생성한것이다.
뭐, 저것을 누가 사용할 일은 없겠지만, 방법은 똑같으니.. 이렇게 실습을 해봤다.
이제 나는 마라톤풀코스의 거리를 구할때나, 두개의 인자의 더한값을 구할때는
저 Toy객체를 이용할 수 있게 되었다.
3) This
자, 나는 Toy 라는 객체를 만든김에 조금 더 장난을 치고 싶어졌다.
저 Toy 안에 있는 sum 이라는 메서드가 같은 객체 안에 있는 marathon 의 값에
1 을 더해주는 녀석으로 사용할 수 있도록 만들고 싶어졌다 (이유는 묻지마라.)
그렇다면 나는 어떻게 변화를 줘야 할까?
let Toy = {
marathon: 42.195,
sum:function(){
return marathon+1
}
}이렇게 하면 어떨까? marathon 에 1 을 더했으니, 잘 돌아가지 않을까?
console.log(Toy.sum()); // marathon is not defined결과는 No, marathon 이 정의되지 않았다고 나오면서 출력되지 않았다.
아, 그럼 저 marathon 은 Toy 안에 들어있는 요소이기 때문에
Toy.marathon 으로 바꿔주면 출력이 되지 않을까, 한번 해보자.
let Toy = {
marathon: 42.195,
sum:function(){
return Toy.marathon+1
}
}
console.log(Toy.sum()); // 43.195오 역시 잘 나왔다. 나는 짱이다(?).
근데 이렇게 또 장난이 끝나는듯 싶던 중, 내 머리를 스치는 또 하나의 궁금증이 생겨버렸다.
' 아니, 이렇게 객체가 작동한다고 했을때, 만약 내가 이 객체의 이름이 싫증나서
Toy가 아닌 Sports로 바꾼다면, 저 안에있는 Toy 도 일일이 다 바꿔줘야 된다는거네? '
생각해보니 그랬다. 만약 내가 저 객체의 이름을 바꾸기라도 한다면, 나는 그 이름을 사용한
내부 호출인자의 이름도 모조리 바꿔야되는 상황이된것이다. 지금은 하나이기 때문에
바꾸는것은 그리 어렵지 않지만, 만약 저 객체 안에 1억개의 고칠것이 생긴다면?
아마 나는 저 코드를 짠것을 후회할것이다. 그리고 사용하지 않을것이다.
선배개발자들도 그러셨던것 같다, 그래서 그분들은 기가막힌 녀석을 만들어냈다.
바로,'This'이다.
이 This는, "자신이 속해있는 객체를 가리키는" 라는 의미를 가지고 있다.
쉽게 설명하자면, 이 This가 내가 속해있는 객체, 즉, Toy가 된다는 것이다.
그리고 내가 Toy를 Sports로 바꾼다면 This는 Sports 가 되는것이다.
이 얼마나 엄청난 일인가. 바로 시험해보자.
let Toy = {
marathon: 42.195,
sum:function(){
return this.marathon+1
}
}
console.log(Toy.sum()); // 43.195일단 Toy 였을때 결과가 잘 나왔다. 이제 Sports 로 바꿔보자.
let Sports = {
marathon: 42.195,
sum:function(){
return this.marathon+1
}
}
console.log(Toy.sum()); // 43.195역시 잘나온다. 이제 나는 내부 호출인자에 this 만 적어놓는다면
굳이 일일이 변경하지 않아도 그대로 사용할 수 있게 된것이다.
잘 기억해두자, This는, 자신이 속한 객체를 가리키는 의미를 가지고 있다는것을.
객체 2부에서는 Constructor 와 Prototype, Class 를 정리해 볼것이다.
