JS - 3

오늘은 JS 중에 함수와 객체에 대해서 배워 볼게용 （=´∇｀=）

 

함수는 특정 로직 처리에 사용합니닷. 그리고 재사용을 목적으로 만들어지며 함수에는 시스템이 제공하는 내장 함수와 사용자가 만드는 사용자 정의 함수가 있습니당. 사용자 정의함수를 사용해서 익명함수, 콜백함수, 즉시실행함수, 클로저를 작성합니닷! (⌒▽⌒)☆

 

1. 함수개요와 내장함수

 1-1. 함수개요

함수는 특정 작업을 기술하는 곳으로 함수명(인수리스트){ }로 구성되며 실행결과는 return문을 사용해서 리턴합니당! 함수를 사용할 때 반드시 알아야 할 3가지 사항은 다음과 같습니다. (*´ ワ `*)“

함수가 하는 일: 함수명

함수 인수의 개수와 타입: 인수리스트

함수의 실행결과 타입(리턴타입): return문

예) function add(x, y) { return x + y; }

 1-2. 내장함수

시스템이 제공하는 함수로 메시지 상자를 호출하거나 화면에 출력하는 등등의 작업을 제공합니다. o(*'▽'*)/☆ﾟ’

예) 메시지 상자 호출

alert(메시지내용);

 

2. 사용자 정의함수

사용자 정의함수는 특정 작업을 처리하기 위한 절차를 나열한 함수로 필요에 따라서 작성합니다! 사용자 정의함수는 var 함수명 = function() {}과 같은 형태로 작성하며, 작성한 함수를 사용할 때는 함수명()과 같이 함수를 호출합니당.

 2-1. 일반함수

기본적인 형태의 사용자 정의함수로 function문을 사용해서 함수를 정의합니다. 일반함수는 함수 선언문으로 정의하는 방식과 함수 표현식으로 정의하는 방식이 있으며 두 번째 방법을 권장합니닷. d=(´▽｀)=b

함수선언문으로 함수를 정의할 때는 function 함수명(매개변수리스트) {} 와 같은 방식으로 선언합니당.

예) function add(x, y) { return x + y; }

var 함수명=  function(매개변수리스트) {}; 과 같이 변수 선언문과 같은 방식으로 함수를 선언하며 체계적인 프로그램 작성을 위해 권장하는 형식입니닷.

예) var add = function(x, y) { return x + y;};

Function() 생성자 함수를 사용해서 함수를 정의할 수 있으나 new Function()은 프로그램의 성능을 저하시키기 때문에 사용하지 않는 것이 좋습니닷. ~ヾ(＾∇＾)

 2-2. 익명함수 : 이름이 없는 함수

익명함수는 이름이 없는 함수로 필요한 곳에서 이름을 정의하거나 이름을 굳이 줄 필요가 없는 경우에 사용합니다. 이름이 없다는 것은 특정 경우에만 사용하고 사용 후 자동으로 제거되기에 메모리 관리에도 좋습니다. 주로 이벤트처리(콜백함수), 즉시 실행 함수, 클로저, 함수 표현식에 사용됩니다.

작성방법 : function () {}

이름이 없기 때문에 변수에 넣어서 사용하거나 함수의 인수로 사용해요!

 2-3. 콜백함수

이벤트에 반응하는 함수로 이벤트가 발생하면 자동으로 실행됩니당. 

예) 이미지가 로딩되면 자동실행

image.onload = function() {

       ctx.drawImage(image, 0, 0); // 캔버스의 (0, 0) 좌표에 이미지를 그린다.

}

예) 현재 페이지의 로드가 끝나면 자동 실행

$document).ready(function(){ // 처리할작업});

 2-4. 즉시 실행함수

함수 정의와 동시에 실행하는 함수로, 함수 호출 없이 자동으로 실행된다. (function() {})();과 같은 형태로 함수 선언부와 바디를 () 로 싸서 선언합니다.

예) (function () { var x = " Hello!! ";})(); 

함수가 선언되자마자 실행되는 즉시 실행함수는 같은 함수를 다시 실행할 수 없으며 최초에 1번만 실행해야 하는 초기화 등에 사용합니다. (๑^ں^๑)

 

3. 클로저

즉시실행 내부함수로 함수의 캡슐화, 런타임 실행시 인자 값을 넘겨서 자동 동작되는 작업에 사용합니다. 함수 안에 리턴값으로 정의되는 익명 함수로 카운터 딜레마에 사용됩니당.

예)

var func1 = function() {

    return function() {

      return 1;}

};();

 3-1. 카운팅 딜레마

전역변수와 지역변수 스코프 문제로 전역변수는 웹 페이지 내에서 긴 스코프를 가져서 해당 페이지가 서비스되는 동안 사용 가능한 반면, 접근이 쉬워서 보안상 취약하다는 문제점을 갖습니당. 반면에 지역변수는 함수 내의 스코프만 갖기 때문에 다른 함수에서 접근할 수 없어서 보안상 더 좋습니다. 또한 지역변수는 해당 함수의 사용이 끝나면 사라져서 메모리 관리도 좋습니다. ♪( ›◡‹ )

예) 전역변수 선언과 사용

var a = 4; // 전역변수 선언

function myFunction() {

   return a * a; // 전역변수 사용

}

예) 지역변수 선언과 사용

function myFunction() {

   var a = 4; // 지역변수 선언

   return a * a; // 지역변수 사용

}

카운터 딜레마는 특정 함수가 실행될 때마다 1씩 누적되는 변수를 전역변수 또는 지역변수로 지정했을 때의 단점 때문에 발생합니당. 카운터 변수가 전역변수이면 변수 값이 1씩 증가하는 카운팅은 발생하나 보안상 취약하다는 문제점이 발생하고 지역변수를 지정하면 보안상 좋으나 카운팅이 되지 않는 문제점이 발생합니닷. 이것을 해결할 때 클로저를 사용합니다!

 3-2. 카운터변수를 전역변수로 선언

카운터변수 처리가 쉬우나 누구나 전역변수에 접근 가능해서 보안문제가 발생합니닷. ｡^‿^｡

예)

var counter = 0; // 카운터변수 : 전역변수

function add1() { return counter += 1;}

add1(); // counter = 1

add1(); // counter = 2

add1(); // counter = 3

document.write(counter); // counter = 3

document.write(counter); 와 같이 함수 밖에서 counter 변수가 접근됩니당. 문제를 해결하기 위해서는 카운터 변수를 지역변수로 작성해야 합니당. 위의 예시에서 add1() 함수 안에 counter 변수를 선언해서 지역변수로 사용해야 합니닷.

 3-3. 카운터변수를 지역변수로 선언

카운터변수를 지역변수로 선언하면 함수 밖에서 카운터변수의 접근을 막아서 보안상 좋아지나 카운터가 동작되지 않습니닷. 함수를 호출할 때마다 카운터가 0으로 초기화되어 카운팅이 안 됩니다. ୧(´ᴗ｀)୨

예)

function add1() {

       var counter = 0; // 카운터변수 : 지역변수

       return counter += 1;

}

 

add1(); // counter = 1

add1(); // counter = 1

add1(); // counter = 1

add1() 함수를 호출할 때마다 var counter = 0; 이 실행되어 counter 값이 0에서 1로 누적되는 동작만 발생하고 2나 3으로의 누적이 발생하지 않습니다. 이 문제를 해결하려면 즉시실행함수와 내부함수를 결합한 클로저를 사용해야 합니당. (*˘.̮˘*)

 3-4. 클로저를 사용한 카운팅 딜레마 처리

즉시실행함수와 내부함수를 결합한 클로저를 사용해서 변수의 보안 기능과 누적 기능을 모두 충족시킬 수 있습니다. 클로저의 원리는 딱 한 번만 실행되는 즉시실행함수를 사용해서 자식인 익명 내부함수가 부모함수의 스코프에 접근합니닷.

예)

var add1 = (function () { // 부모함수

    var counter = 0;

   return function () {counter += 1; return counter} // 익명 내부함수

}) ();

 

add1(); // counter = 1

add1(); // counter = 2

add1(); // counter = 3

document.write(counter); // counter 변수 접근 안 됨.

add()1 함수는 단 1번만 실행되어서 var counter = 0;도 1번만 실행됩니다. add() 1 함수가 실행되고 있는 상태에서 호출 시 익명내부함수가 리턴되어 익명내부함수가 부모함수인 add()1 함수 안에 있는 counter 변수에 접근해서 카운터 변수를 누적합니닷. counter 변수는 add1() 함수를 사용해서만 값을 변경할 수 있기 때문에 함수 외부로부터 보호되는 상태에서 카운트 기능이 동작됩니다!!!!!!

 

아직 함수의 내용은 끝나지 않았지만 ㅎㅎ 오늘 JS 3차시는 마무리를 해보려 합니닷. 

왜냐하면 함수의 내용이 많아서 몇 번 잘라야 할 것 같아유.. (･_-｡ )

그래도 걱정하지 마세요 ㅎㅎ 금방 찾아오겠습니다!~!