Programming/Javascript

자바스크립트 강좌 - 3. 객체(Object)

양디 2016. 10. 17. 21:01


자바스크립트는 이전 포스팅에서 다뤘듯이, 객체 지향 언어이다. 그렇다면 객체는 무엇인가 ?


"자바스크립트에서 객체는, 변형 가능한 속성들의 집합이라고 할 수 있습니다."

- 더글라스 크락포드의 자바스크립트 핵심 가이드


프로그래밍을 처음 하는 사람이라면, 이것이 무슨 말인지 잘 와닿지 않을 수도 있다.


작은 예시를 들어보자면, '양디' 사람(객체)가 있다고 하자. 이 객체는 여러 가지 속성들로 이루어져 있는 집합이다. 예를 들어, 나이라는 속성과, 취미라는 속성, 홈페이지라는 속성이 있다고 하자. 


이 속성은 변형이 가능하다. 나이는 시간이 지나면 늘어나게 마련이고, 취미와 홈페이지 또한 얼마든지 바뀔 수 있는 것이다. 이것이 객체인 것이고, 속성들을 저장하고 그 속성들을 통하여 프로그램을 사용하는 것이다.


객체는 '이름' 과 '값' 의 쌍으로 이루어져 있다.


객체는 사용하겠다고 선언을 한 이후부터 사용을 할 수 있게 되는데, 'var' 키워드와 = 기호를 통하여 선언한다.


다음과 같은 코드가 있다고 생각을 해보자.


1
2
var yangd = "사람";
console.log(yangd);
cs


1번 라인을 보면 알 수 있듯이, var 키워드가 사용되었고, yangd 라는 객체의 이름과 "사람"이라는 객체의 = 기호를 통해서 선언되고 있다.

yangd 라는 이름의 객체에 "사람" 이라는 값을 넣어라(=) 라는 의미의 코드가 되겠다.

(= 은 일상 생활에서는 같다 라는 의미지만, 프로그래밍 언어에서는 왼쪽 것에 오른쪽 것을 집어넣어라 라는 뜻이다.)


2번 라인의 console.log()는 함수(다음 포스팅에 나온다.)인데, 해당하는 이름을 가진 객체의 값을 화면에 출력해주는 역할을 한다.


따라서, 위의 코드를 실행하면 다음과 같은 결과가 나온다.



즉 yangd 라는 이름의 객체에는 "사람"이라는 값이 들어가 있는 것이다.


객체의 값에 들어갈 수 있는 것은 여러가지 종류가 있는데, 이를 자료형(Data Type)이라고 한다.


자바스크립트 자료형


1
2
3
4
5
6
7
8
9
10
var number = 15;
var number = 15.0
var string = "hi";
var string = 'hi';
var boolean = true;
var array = [1234];
var object = { property : 1};
var func = function(){ console.log(this);}
var a = null//null
var b = undefined; //undefined
cs


자바스크립트 자료형 은 위와 같은 종류가 있다.

먼저 숫자가 있는데, 숫자는 정수와 실수(흔히 말하는 소수)를 구분하지 않는다. 1번 라인과 2번 라인은 같은 숫자를 의미한다.


string이라는 것은 문자열을 의미하는데, 하나 이상의 문자로 이루어진 데이터이다. 3번과 4번의 차이는 큰따옴표(") 이냐 작은 따옴표(') 이냐인데, 같은 의미이다.


5번 라인의 boolean은 참과 거짓을 의미하는 true, false 를 의미한다.


6번 라인은 배열을 뜻하는데, 여러가지 값만을 포함하는 객체이다. 배열은 대괄호 [ ] 안에 표현된다.


7번 라인은 객체인데, (객체의 값이 객체이다..) 객체 안에 또다시 이름과 값의 쌍을 지닌 객체가 들어가 있는 것이고, { } 안에 표현된다.


8번 라인은 저번 포스트에 썼듯이, 함수 또한 객체로 취급된다.


null은 아무 것도 가리키지 않는 상태를 의미하며, undefined는 선언되지 않은 상태를 의미한다.


자료형을 확인하기 위해선 typeof 라는 키워드를 사용해서 실행하면 되는데, 다음과 같이 실행해 볼 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
var und;
 
console.log(typeof(und));
console.log(typeof(15));
console.log(typeof(15.0));
console.log(typeof('hi'));
console.log(typeof("hi"));
console.log(typeof(true));
console.log(typeof([1,2,3]));
console.log(typeof({prop:1}));
console.log(typeof(function(){console.log('hi')}));
console.log(typeof(null));
console.log(1*'ff');
cs


실행 결과는 다음과 같다.



배열, 객체, null은 객체로 취급하는 것을 확인해 볼 수 있다.


NaN 은 Not a Number 의 약자로, 숫자와 숫자가 아닌 것을 연산하려고 했을때 나오는 값이다.


다시 한번, 객체


다시 한번 객체로 돌아와서, 객체는 이름과 값의 쌍으로 이루어진 변형 가능한 속성들의 집합이라고 하였다.


따라서, 제일 처음 말했던 yangd라는 객체의 속성을 입력하기 위해서는 다음과 같은 방식으로 선언이 가능하다.


1
2
3
4
5
6
7
8
var yangd = {};
yangd.age = 25;
yangd.hobby = "web";
yangd.homepage = "http://dalkomit.com"
 
console.log(yangd);
console.log(yangd.age);
console.log(yangd['age']);
cs


1번 라인에서 yangd 라는 빈 객체를 선언해주고, 2~4번 라인에서 yangd의 객체에 이름과 값을 입력해주고 있다.

위를 직접 실행해보면 객체의 이름과 값들이 나오는 것을 볼 수 있다.


7번과 8번 라인처럼 객체의 특정 값에 접근할 수 있기도 하다. 기억해두자 ! 점(  .  )을 사용할 수도 있고, 배열 구조 [ ] 을 사용할 수도 있다.

두 값 모두 25로 객체의 age 값을 출력해준다.





이러한 객체들을 사용하여 앞으로 수많은 코드를 활용하게 될 것이므로, 잘 기억해 두자 !

댓글