[javascript] 2.자바스크립트 함수란?

[javascript] 2.자바스크립트 함수란?

* 목차 *

1. 자바스크립트 함수란?

2. 익명 함수

3. 선언적 함수

4. 함수의 생성 및 실행 순서("선언적 함수" -> "익명 함수")

5. "익명 함수 활용" 및 "선언적 함수" 활용법

6. 기타 함수 활용법(Callback)

7. 클로저(closure)란?

1. 자바스크립트 함수란?

  - javascript에서 코드의 집합을 나타내는 자료형입니다.

  - 그래서 함수를 변수에 할당 하거나 , 함수를 리턴 할 수 있습니다.

  - 함수에는 2가지 형태가 존재합니다. "익명 함수" , "선언적 함수", "즉시 실행 함수"

2. 익명 함수 

  1) 형태

    function(<매개변수1>, <매개변수2>, ...) {

코드...

    }

  2) 사용시기 

    - 변수에 함수를 할당 할때.

    - 함수에서 함수를 리턴 할때

3. 선언적 함수

  1) 형태

      function <function name>(<매개변수1>, <매개변수2>, ...) {

코드...

}

  2) 사용 시기 

    - 반복적인 호출이 필요 할때

    - 내부 함수로 활용이 가능하다.

(다른 사람이 정의한 함수와 겹치는것을 방지 할때 사용)

    - callback 함수를 매개 변수로 전달 할때

4. 익명 즉시 실행 함수 / 선언적 즉시 실행 함수

  1) 형태

    (1) type-1

      - 선언적 즉시 시행 함수

        (function <function name>(<매개변수1>, <매개변수2>, ...) {

   코드...

        })();

      - 익명 즉시 시행 함수

        (function (<매개변수1>, <매개변수2>, ...) {

   코드...

        })();

    (1) type-2

      - 선언적 즉시 시행 함수

        (function <function name>(<매개변수1>, <매개변수2>, ...) {

   코드...

        }());

      - 익명 즉시 시행 함수

        (function (<매개변수1>, <매개변수2>, ...) {

코드...

        }());

  2) 사용 시기 

    - 즉시 실행 함수는 한 번의 실행만 필요로 하는 초기화 코드 부분에 많이 사용됩니다.

    - 그렇다면 왜 초기화 코드 부분에 많이 사용 할까요? 변수를 전역(global scope)으로 선언하는 것을 피하기 위해서 입니다.

    - 전역에 변수를 추가하지 않아도 되기 때문에 코드 충돌 없이 구현 할 수 있어, 플러그인이나 라이브러리 등을 만들 때 많이 사용됩니다.

5. 함수의 생성 및 실행 순서("선언적 함수" -> "익명 함수")

  - javascript에서는 함수명이 동일 한데 하나는 "익명 함수" 나머지는 "선언적 함수"이면

    "익명 함수"가 실행 됩니다. 

  - 이유는 javascript실행 시 "선언적 함수"가 먼저 생성 되기 때문 입니다.

  - 아래 코드의 결과는 A가 출력 됩니다.

var test = function() {

alert('A');

}

function test() {

alert('B');

}

6. "익명 함수 활용" 및 "선언적 함수" 활용법

  1) 익명 함수 활용

    (1) 식별자(다른 말로 "변수")에 함수에 할당 한후 사용

      - 코드를 줄일 떄 유용하다.

      - 범용성이 좋아 진다.(코드 분석은 약간 힘들수 있다)

      Ex) 아래 예제 코드에서는 choose에 따라 test함수가 달라진다.

var choose = 2;

if (choose == 1) {

var test = function() {

alert('testA');

}

} else {

var test = function() {

alert('testB');

}

}

test();

    (2) 함수를 리턴 할 때 사용

      - 리턴한 함수를 가지고 아래와 같이 활용 할 수 있다.

      Ex) 아럐 예제는 name이라는 인자를 통해서 어떤 함수를 반환 할때 선택 하여 반환한다.

function whoareyou(name) {

if (name == 'james') {

return function() {

alert('i am army');

}

} else if (name == 'jane') {

return function () {

alert('i am nurse');

}

}

}

var iam = whoareyou('james');

iam();

  

  2) 선언적 함수 활용

    (1) 일반 함수 처럼 사용 가능하다(생략)

    (2) 내부 함수로 활용이 가능하다.

      1] 내부 함수란? 

        - 함수내에 생성한 선언적 함수인다

        - 여러 프로젝트를 하다보면 함수명이 겹칠 수 있다. 이럴 경우 내부 함수를 사용하여 회피 가능하다.

        Ex) 아래 예제에서는 동일 한 dog라는 함수를 내부 함수로 하나 일반 함수로 하나 정의했다

function dog() {

return "개";

}

function my() {

function dog() {

return "강아지";

}

alert(dog());

}

my(); // 개가 출력 된다.

alert(dog()); // 강아지가 출력된다.

7. 기타 함수 활용법(Callback)

  1) callback(콜백) 함수

    - callback 함수란 매개 변수로 전달되는 함수를 말합니다.

    - 언제 쓰나??

      1) 비동기 적으로 함수를 실행 하고싶을때 사용한다.

         async 키워드로 함수를 만들후 await 로 비동기로 만들어서 비동기 효과를 냅니다

         * await 동작 방식 

           https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/await

         Ex) 아래처럼 화난 여자친구에게 전화를 했지만 받지 않아, 친구에게 전화를 했는데 ,

             잠시후 여자 친구에게 전화가 다시 왔다.

function sleep(ms) {

return new Promise(resolve => setTimeout(resolve, ms));

}

function callsomeon(callback){

callback();

}

async function myfriend() {

alert("hey what's up");

}

async function angrygirlfriend() {

await sleep(2000); // 비동기로 전환

alert("hellooooo~~");

}

callsomeon(angrygirlfriend);

callsomeon(myfriend);

 

8. 클로저(closure)란?

  - 함수 호출 시점의 실행 환경을 복사하여 실행되는 함수이다.

  - 이러한 특성을 활용한 함수가 클로저 함수입니다

  - 클로저 함수가 되는 조건

    1) 리턴 되는 함수이어야 한다. 

  Ex) 아래 코드에서 return 되는 함수가 클로가 함수가 된다.

      출력 값은 "doitnow-man"이 뜬다.

function test(){

var name = "doitnow-man";

return function (){

alert(name);

}

}

test()();

* 상세 설명 : https://hyunseob.github.io/2016/08/30/javascript-closure/

<연관된 글>

- [javascript] 1. 자바스크립트 기초 (기본 구조)

- [javascript] 2. 자바스크립트 함수란?

- [javascript] 3. 자바스크립트 내장 함수

- [javascript] 4. 자바스크립트 실행 순서

- [javascript] 5. 자바스크립트 객체 란?

- [javascript] 6. 자바스크립트 값 복사와 참조 복사

- [javascript] 7. 자바스크립트 생성자 함수와 프로토타입(Prototype)