(node.js) [Part.3] 노드와 자바스크립트 - 자바스크립트의 객체와 함수 이해하기

자바스크립트의 객체와 함수 이해하기

변수는 데이터를 담아두는 상자와 같다.

그래서, 변수를 변수 상자라고 부르기도 하며, 이런 변수 상자는 안에 들어가는 데이터의 크기에 따라 상자의 크기를 다르게 만들 수 있다.

자바나 C언어와 같은 타입 기반의 언어(Type based language)는 메모리를 절약하기 위해 정수와 문자열을 만들 때 다른 크기의 변수 샂아를 만들고 변수 앞에 int, string 과 같은 타입을 지정한다.

 

하지만, 자바스크립트는 자료형을 명시하지 않는다. 이 때문에 자바스크립트는 모든 변수를 var 키워드로 선언하고 사용한다. 

자바와 자바스크립트의 변수 타입 비교

자바는 숫자 10을 넣어두기 위해 변수 상자를 a라는 이름으로 만들고, '소녀시대'라는 글자를 그 안에 넣어두기 위해 변수 상자를 b라는 이름을 만든다.

이때 두 개의 변수 상자 크기는 서로 다르며, 서로 다르다는 것을 명확히 알 수 있도록 int 나 string 과 같은 타입을 명시한다. 자바 코드에서는 이를 이렇게 입력한다.

int a = 10;
String b = '소녀시대';

그런데 자바스크립트에서는 int 나 string 으로 타입을 명시하지 않기 때문에 두 개의 변수 모두 var로 만든다.

var a = 10;
var b ='소녀시대';

 

자바스크립트에서는 숫자를 넣어 둘 때는 문자열보다는 작은 크기의 변수 상자를 만들게 되므로 실제로 변수 상자의 크기는 다를 수 있다.

따라서 두 개의 변수 모두 var 키워드를 사용했지만, 실제로 변수 상자의 크기는 다를 수 있다는 점을 생각해야한다.

하지만 var 키워드만 사용하기 때문에 굉장히 간결하고 코드가 쉬워진다.

자료형	설명
Boolean	true 와 false의 두 가지 값을 가지는 자료형
Number	64비트 형식의 IEEE 754 값이며 정수나 부동소수 값을 가지는 자료형. 몇 가지 상징적인 값을 가질 수 있음 : NaN(숫자가 아님), 무한대, -무한대
String	문자열 값을 가지는 자료형
undefined	값을 할당하지 않은 변수의 값
null	존재하지 않는 값을 가리키는 값
Object	객체를 값으로 가지는 자료형. 객체는 속성들을 담고 있는 가방으로 볼 수 있으며, 대표적인 객체로 Array나 Data를 들 수 있음.

var 키워드를 사용하므로 코드만 보아서는 변수 상자의 크기를 명확히 알 수는 없다.

이 때문에 타입을 확인할 수 있도록 typeof 연산자를 제공한다. 또한 문자열을 숫자로 변환할 수 있도록 parseInt() , parseFloat() 함수도 제공한다.

 

변수로 자료형 알아보기

변수를 만들고 자료형이란 무엇인지 알아보기 위해 코드를 만들어 실행해보자.

ch03_test1.js 를 만들고 코드를 입력한다.

var age = 20;
console.log('나이 : %d',age);

var name = '레드벨벳';
console.log('이름 : %s',name);

//나이 : 20
//이름 : 레드벨벳

자바스크립트의 변수에는 숫자, 문자열, 볼린(Boolean)과 같은 값을 넣을 수 있으며, 객체를 넣을 수 있다.

자바스크립트에서 객체를 만들고 싶다면 중괄호를 이용해 만들 수 있으며, 중괄호로 묶은 객체 안에는 속성을 추가할 수 있다.

 

객체 안에 들어 있는 속성의 이름은 하나의 변수로 생각할 수 있으며, 변수의 이름과 변수 값 또는 속성의 이름과 속성 값이라는 형태로 조합된다.

이렇게 객체에 넣을 수 있는 속성은 점(.) 연산자와 속성의 이름을 이용해 접근할 수도 있고, 대괄호([ ])와 속성의 이름을 이용해서 접근할 수 있다.

 

ch03_test2.js 를 만들고 코드를 입력한다.

var Person = {};

Person['age'] = 20;
Person['name'] = '레드벨벳';
Person.mobile = '010-0000-0000';

console.log(Person);
console.log('나이 : %d',Person.age);
console.log('이름 : %s',Person.name);
console.log('전화번호 : %s',Person['mobile']);

//{ age: 20, name: '레드벨벳', mobile: '010-0000-0000' }
//나이 : 20
//이름 : 레드벨벳
//전화번호 : 010-0000-0000

점 연산자와 대괄호를 사용해서 객체를 추가하고 출력하는데 사용할 수 있다.

 

자바스크립트의 함수

자바스크립트가 자료형을 표시하지 않기 때문에 함수를 선언하고 호출하는 형태도 살짝 달라진다.

타입 기반 언어인 자바와 비교한 자바스크립트의 함수 형태이다.

 

자바와 자바스크립트의 함수 비교

자바에서 더하기 함수를 만드는 경우, 먼저 함수 상자의 이름을 add 라고 붙일 수 있다.

함수 상자는 입력값과 출력값을 갖는데, 이 입력 값을 a와 b라는 변수로 받아 함수 상자에 넣어준다면 add라는 함수 이름 뒤에 소괄호를 붙인 후, 파라미터 이름과 타입을 적어야한다.

또한, 함수의 출력값이 정수라면 함수의 이름 앞에도 int와 같은 타입을 붙여야한다.

 

그러나 자바스크립트는 타입을 표시하지 않기 때문에, 타입이 표시되었던 부분은 모두 사라진다.

심지어 파라미터로 전달되는 변수에는 var 키워드를 붙이지 않아도된다.

이 때문에 함수를 정의하는 형태가 더 단순해진다. 다만 함수라는 것을 명시적으로 구별하기 위해서 function 키워드를 함수 이름 앞에 붙여준다.

 

중요한 점은, 자바스크립트의 변수에는 일반 데이터나 객체 이외에도 함수를 할당할 수 있다는 점이다.

변수에 함수를 할당한다는 것은 어떤 의미일까?

 

변수에 함수를 할당하는 경우

함수를 만든 후, add 변수에 할당했다.

변수도 이름이 있고 함수도 이름이 있으므로 변수 이름과 함수 이름이 중복된다.

이렇게 두 개의 이름을 중복해서 지정할 필요가 없으므로, 함수에 이름을 삭제한다.

만약 함수를 호출하고 싶다면, 변수의 이름으로 호출하여 실행한다.

 

더하기 함수를 정의하는 경우 1	더하기 함수를 정의하는 경우 2	더하기 함수를 호출하는 경우
function add(a,b){ return a+b; }	var add = function(a,b){ return a+b; }	add(10,10);

함수를 변수에 할당하는 과정에서 함수의 이름이 삭제되어 function 키워드 뒤에 곧바로 소괄호가 붙는 형태가 만들어지는데, 이것을 익명함수(Anonymous function)라고 부른다.

 

함수를 익명 함수로 변수에 할당할 때는 함수를 선언하는 선언문이 아니라, 일반 수식처럼 표현식이 되므로, 가장 마지막에 세미콜론을 붙여주는 것이 좋다.

 

ch03_test3.js 파일을 만들고 코드를 작성한다.

 

function add(a,b){
    return a+b;
}

var result = add(10,10);

console.log('더하기 (10,10) : %d',result);

//더하기 (10,10) : 20

add 함수를 정의하고, 함수를 호출하고 그 값을 result 변수에 넣었다.

함수를 정의할 때는 function 뒤에 함수의 이름이 온다는 것을 쉽게 확인할 수 있다.

그리고 함수를 호출할 때는 함수 이름과 소괄호를 사용한다는 것도 알 수 있다. 이 파일을 실행하면 다음과 같은 결과가 나타난다.

 

ch03_test4.js 를 만들고 코드를 작성한다.

var add = function(a,b){
    return a+b;
};

var result = add(10,10);

console.log('더하기 (10,10) : %d', result);

// 더하기 (10,10) : 20

같은 결과가 출력되지만, 더하기 함수에 함수 이름이 없고, 함수는 만들어지자마자 add 변수에 할당되었다는 점이 다르다.

자바스크립트의 함수는 변수에 할당되는 경우가 많으므로 함수를 이런 코드 패턴으로 만들 수 있다는 점을 알아두자.

 

그런데 함수가 변수에 할당될 수 있다면 객체 안에 속성으로도 들어갈 수 있다.

즉, 객체의 속성에는 변수를 만들어 할당할 수 있으므로 객체 안의 속성에 함수를 할당할 수 있다. 객체의 속성으로 더하기 함수를 할당했을 때를 표현한 그림이다.

 

객체의 속성으로 더하기 함수를 할당하는 경우

ch03_test5.js 를 만든 후, 코드를 입력한다.

var Person = {};

Person['age'] = 20;
Person['name'] = '레드벨벳';
Person.add = function(a,b){
    return a+b;
};

console.log(Person);
console.log('더하기 : %d', Person.add(10,10));

//{ age: 20, name: '레드벨벳', add: [Function (anonymous)] }
//더하기 : 20

더하기 함수를 호출할 때는 객체의 속성으로 할당된 함수를 호출해야하므로 Person.add() 와 같은 형태로 호출한다.

이런 형태의 코드는 다음과 같이 일차적으로 변수에 함수를 할당한 후, 다시 그 변수를 객체의 속성으로 추가되도록 수정할 수 있다.

ch03_test5.js 를 복사하여 ch03_test6.js 을 만든 후 다음과 같이 수정한다.

var Person = {};

Person['age'] = 20;
Person['name'] = '레드벨벳';

var oper = function(a,b){
    return a+b;
};

Person['add'] = oper;

console.log('더하기 : %d', Person.add(10,10));
//더하기 : 20

함수를 변수에 먼저 할당했다는 점이 다르다. 결과값은 동일하게 나온다.

이제 마지막으로 객체를 만들면서 동시에 속성을 초기화하는 코드를 만들어보자.

var Person = {
    age : 20,
    name : '레드벨벳',
    add : function(a,b){
        return a+b;
    }
};

console.log('더하기 : %d',Person.add(10,10));
//더하기 : 20

자바스크립트 객체는 중괄호를 이용해 만드는데, 객체를 만들 때 중괄호 안에 속성을 바로 넣어줄 수도 있다.

add 라는 이름의 속성으로 추가했다. 마찬가지로 더하기 결과가 출력된다.

 

자바스크립트 변수를 어떻게 만들고, 객체는 어떻게 만드는지. 그리고 함수는 어떻게 만드는지 알아보았다.

가장 중요한 점은 함수를 변수에 할당할 수 있다는 것인데, 이렇게 함수를 변수에 할당할 수 있기 때문에, 다양한 작업이 가능해진다.

앞으로는 함수를 변수에 할당하여 사용하는 코드를 자주 보게 될 것이다.