Javascript공부02/함수/함수호출/클로저

핸들링 코드 크루 박준영 입니다.

오늘은 자바스크립트의 함수와 함수 호출 형태에 대해 배워봅시다.

자바스크립트는 function (함수이름) {}  형태로 함수가 구성되어져요

<script>

function test() {

console.log('test입니다.');}

</script>

위의 코드는 가장 기본적인 자바스크립트 문법의 예입니다.

콘솔창에 'test입니다.' 라는 문구를 출력해 주는 문법 이지요

그럼, 함수호출이 어떻게 이루어 지는지 볼까요

자바스크립트에서는 함수 호출 시 아래그림처럼 메모리 할당 영역이 만들어 집니다.

처음 전역객체에는 this, document, window, function등이 들어가 있으며,

스코프 체인을 통해 연결되어 있는 형태이다.

 함수 호출 전에는 Activation object가 없지만 함수 호출과 동시에 Execution context와 Acitvation object가 생성 되어진다.

사진 출처 : http://mohwa.github.io/blog/javascript/2015/10/11/scope-chain-inJS/

자바스크립트의 함수는 함수내에서 다른 함수들을 정의할 수 있습니다.

function test01() {

var sum = 0;

var func01 = function toDo(num) {

sum += num;

return sum; };

return func01;}

위의 코드를 보면 test01이라는 함수 안에 func01에 할당되어지는 toDo함수가 존재하는 것을 확인 할 수 있습니다.

function toDo(num) 함수가 클로저라고 하며 위의 부모 함수에서 선언한 sum을 사용 가능합니다.

아! 위에서 명시를 안했는데 javascript에서는 변수타입을 따로 명시해주지 않고 var라는 공통 타입으로 사용합니다.

클로저를 더 자세히 알아보자!

클로저에서는 즉시 실행 함수와 클로저의 관계를 알고 있어야 합니다.

var test02 = (function() {

var sum = 0;

return function doTo(num) {

sum += num;

return sum;}; }) ();

console.log( test02(100) ); // 100

console.log( test02(150) ); // 250

자바스크립트에서 즉시실행함수의 사용방법은 이러합니다.

test02라는 함수안에 또 다른 함수(내부 함수)가 있는 형태이며, test02함수에 상수를 할당할 수 있습니다. 

return은 sum을 리턴합니다.

이 코드의 가장큰 장점은 함수의 이름을 직접적으로 명시하지 않아도 된다는 것입니다.

일반 함수는 내부함수(클로저)의 이름을 명시하여 호출 하지만 이렇게 사용하면

내부함수의 이름 명시 없이 함수를 사용할 수 있습니다.!!!

클로저의 장점은 전역변수의 호출이 적어진다는 점!!!

클로저의 단점은 메모리 효율이 조금 떨어진다는 점!!! 입니다!!

자바스크립트 내용이 어려우니 기초부터 공부하실 분은 다른 포스팅을 확인해주세요^^