[HTML5] 함수(Function)와 객체(Object)에 대한 이해

함수(Function)와 객체(Object)에 대한 이해 (Head First HTML5 Programming Chapter 4 요약)

현역(?)으로 자바스크립트 코딩을 하면서 실상 객체를 다루었던 기억이 별로 없다. '클라이언트 스크립트에 무슨  놈의 객체까지 필요하겠냐?'라고 치부했었는데...  그랬던 것이 요즘 웹(앱)이나 모바일 서비스에서 다양한 소스의 데이터를 주고 받는 메시징 처리가 많아지다보니 객체에 대한 활용 및 이해가 무엇보다 중요해지게 되었다. 이미 웹서비스에서는 JSON(Javascript Object Notation)이 de facto standard가 되어 모든 메시징 데이터가 객체기반으로 이루어지고 있다.

 

관련 글 보기 : [웹/모바일 개발] - [HTML5] 자바스크립트와 DOM (Document Object Model)

 

관련 글 보기 : [웹/모바일 개발] - [HTML5] HTML5와 함께 점점 그 역할비중이 커지고 있는 자바스크립트

 

 

함수(Function) - 자바스크립트의 함수는 값(value)처럼 다룰 수 있다.

개발 언어를 배우면서 함수에 대해 배우지 않는 경우는 없다. 때문에 자바스크립트에 이미 익숙한 개발자 또는 C나 Java와 같은 다른 언어에 경험이 있는 개발자라면  자바스크립트의 함수라고 특별히 새롭지는 않다. 

함수의 파라미터(parameter)와 아규먼트(argument)의 차이가 무언지 아는가에 대한 뜬금없는 질문이 있기 전까진... 

정답은 함수를 정의할 때 사용하는 것을 파라미터라 얘기하고 실제 그 함수를 호출할 때 사용하는 것을 아규먼트라고 한덴다. 즉, 파라미터로 함수를 정의하고 아규먼트로 정의한 함수를 호출한다는 뜻인데... 머 이걸 안다고 개발자로서의 인생에 큰 변화가 있는 것은 아니니 그냥 그런가부다 하고 넘어가도 좋다. 

함수를 볼 때 한 번쯤 짚고 넘어가야 할 부분은 함수에서 쓰이는 변수의 영역(scope 또는 life time)구분이다. 함수 밖에서 선언한 변수는 전역(global)변수이고 함수 내에서 선언한 것은 지역(local) 변수라는 것. (다른 언어에서도 그렇다.) 

그럼 전역변수로 선언되어 있는 변수와 동일한 이름의 변수를 함수 내에서도 선언하여 사용한다면? 정답은 함수에서 선언한 변수가 지역변수로서 우선시 된다는 것 체크. (그렇다면 변수 선언시 var를 사용하지 않고 함수 내에서 변수를 선언하면 그 변수는 어떤 영역을 가질까? 정답은.. ?)

또 한가지 자바스크립트에서는 함수명을 변수에 할당할 수 있다는 것. 이러한 코딩방식은 최근의 서비스 코드에서 흔할 정도로 자주 보게 되므로 그 개념을 알아두는 것이 좋겠다. 

<script>
// addTen이라는 함수를 정의한다.
function addTen(num) {
  return num + 10;
}


// 정의한 함수를 변수에 할당한다.
var plusTen = addTen;

// 이제 plusTen으로 하나의 아규먼트를 가진 함수를 호출할 수 있다. 
var result = plusTen(1)
</script>

가령 이와 같은 코드가 자바스크립트에서는 가능하다는 점이다. 변수에 값을 할당하듯이 함수를 할당할 수 있다.

 

한편 위의 코드는 다음과 같이 작성할 수도 있다.

<script>
// 익명 함수(anonymous function)
var plusTen = function(num) {
  return num + 10;
};

// 이제 plusTen으로 하나의 아규먼트를 가진 함수를 호출할 수 있다. 
var result = plusTen(1)
</script>

함수명을 명시하지 않고 변수에 할당하는 하나의 값처럼 함수를 사용할 수 있다는 점. 특히 이러한 함수를 익명 함수(anonymous function)라고 하는데 jQuery를 사용한 코드에서 흔하게 볼 수 있는 사용방식이므로 잘 알아 둘 필요가 있다.

 

 

객체(Object)

최근의 자바스크립트 개발에 있어 객체의 역할은 매우 중요해졌다. 웹서비스를 통한 데이터 처리시 예전에는 XML 문서형식을 이용한 경우가 많았는데 요즘은 자바스크립트 객체를 이용한 방법이 많이 사용되고 있는 것 같다. 대표적인 것이 JSON.

 

또한 각종 특화된 기능을 제공하는 공개된 자바스크립트 라이브러리를 봐도 객체를 사용하지 않은 코드는 거의 보기 힘들 정도로 자바스크립트의 객체는 이미 중요한 개념이 되었다. 복잡한 코드일 수록 그 개념(코드 또는 데이터)을 잘 조직화해서 한 덩어리로 묶어야 할 필요가 있는데 그에 가장 적합한 것이 바로 객체이기 때문이다.

 

그렇다고 자바스크립트의 객체가 아주 새롭거나 생소한 개념은 아니다. 일반적으로 Java와 같은 객체지향 개념에서 얘기하는 객체와 별반 다르지 않기 때문에 이해하는데도 큰 어려움은 없다.

 

<script>
// 자바스크립트에서의 객체의 정의 (속성 및 메소드)  
var myMovie = {
  title: "건축학개론",
  genre: "classic",
  rating: 5,
  showtimes: ["1:00pm", "5:00pm", "7:00pm"],
  message : function() {
    alert('my Movie');
  }
}
 
// 객체의 속성참조
alert(myMovie.title);
alert(myMovie["title"]);
 
// 객체의 특정 속성 삭제
delete myMovie.rating
</script>

자바스크립트에서의 객체는 여러 개의 속성을 한데 모아놓은 컬렉션이라고 할 수 있다. 속성을 추가할 수 있을 뿐만 아니라 더 이상 필요하지 않은 속성자체를 삭제할 수 도 있다. 속성뿐만 아니라 해당 객체에 메소드를 부여할 수도 있다.

 

한가지, primitive type 아규먼트를 호출했을 때의 함수와 달리 객체를 아규먼트로 전달한 함수에서 해당 객체의 특정 속성값을 변경하게 되면 실제로 해당 객체의 속성값이 바뀌게 된다는 점은 기억해야 한다. 다시말해 객체를 아규먼트로 하여 함수를 호출하는 것은 아규먼트의 복사본을 전달하는 primitive type과 달리 해당 객체에 대한 참조 복사본(a copy of the reference to object)을 전달하는 것이므로 함수 내에서 이루어진 해당 객체에 대한 변경은 함수 밖에서도 적용된다는 점이다.

 

그밖에 객체의 메소드내에서는 해당 메소드의 객체를 가리키는 this라는 키워드를 사용할 수 있다는 것과 그것을 이용한 생성자를 통해 보다 효율적이고 재사용성이 좋은 코드를 개발할 수 있다는 것.. 이 점은 Java와 같다.