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

자바스크립트 함수란?

• javascript에서 코드의 집합을 나타내는 자료형입니다.
• 함수를 변수에 할당 하거나 , 함수를 리턴할 수 있습니다.
• 함수에는 2가지 형태가 존재합니다. "익명 함수" , "선언적 함수", "즉시 실행 함수"

1) 익명 함수 사용

• 변수에 함수를 할당 할때.
• 함수에서 함수를 리턴 할때

2) 선언적 함수 사용

• 반복적인 호출이 필요할 때
• 내부 함수로 활용이 가능하다. (다른 사람이 정의한 함수와 겹치는 것을 방지할 떄 사용)
• callback 함수를 매개 변수로 전달할 때

3) 익명 즉시 실행 함수 / 선언적 즉시 실행 함수 사용

• 즉시 실행 함수는 한 번의 실행만 필요로 하는 초기화 코드 부분에 많이 사용됩니다.
• 그렇다면 왜 초기화 코드 부분에 많이 사용할까요? 변수를 전역(global scope)으로 선언하는 것을 피하기 위해서 입니다.
• 전역에 변수를 추가하지 않아도 되기 때문에 코드 충돌없이 구현할 수 있어, 플러그인이나 라이브러리 등을 만들 때 많이 사용됩니다.

 

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

• javascript에서는 함수명이 동일한데 하나는 "익명 함수" 나머지는 "선언적 함수"이면 "익명 함수"가 먼저 실행됩니다. 
• 이유는 javascript실행 시 "선언적 함수"가 먼저 생성되기 때문입니다.
• 아래 코드의 결과는 A가 출력됩니다.

var test = function() {
alert('A');
}

function test() {
alert('B');
}

 

익명 함수 활용법

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

• 코드를 줄일 때 유용하다.
• 범용성이 좋아 진다.(코드 분석은 약간 힘들 수 있다)

var choose = 2;
if (choose == 1) {
    var test = function() {
    alert('testA');
    }
} else {
    var test = function() {
    alert('testB');
    }
}
test();

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

 

2)함수를 리턴 할 때 사용

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

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();

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

선언적 함수 활용

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

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

• 내부함수란 함수내에 생성한 선언적 함수이다.
• 여러 프로젝트를 하다보면 함수명이 겹칠 수 있다. 이럴 경우 내부 함수를 사용하여 회피 가능하다.

function dog() {
	return "개";
}

function my() {
  function dog() {
  	return "강아지";
  }
  alert(dog());
}

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

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

기타 함수 활용법(Callback)

1) callback(콜백) 함수

• callback 함수란 매개 변수로 전달되는 함수를 말합니다.
• 비동기적으로 함수를 실행하고 싶을 때 사용한다. async 키워드로 함수를 만든 후 await 로 비동기로 만들어서 비동기 효과를 냅니다

* await 동작 방식 

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);

Ex) 아래처럼 화난 여자친구에게 전화를 했지만 받지 않아, 친구에게 전화를 했는데 , 잠시후 여자친구에게 다시 전화가 왔다.

클로저(closure)란?

클로저란 함수가 실행 후 종료 되어도, 종료된 함수 내의 변수가 소멸되지 않는 특성을 말한다.

클로저 함수가 되는 조건

• 리턴 되는 함수이어야 한다. 
• 함수가 정의된 곳의 변수(아래 코드에서는 name)를 사용해야 한다.

function test(){
  var name = "doitnow-man";
  	return function (){
  alert(name);
  }
}

test()();

Ex) 위 코드에서 return 되는 함수가 클로저가 함수가 된다. 왜냐 클로저의 특성을 사용했기 때문이다. 출력 값은 "doitnow-man"이 뜬다.

만약 아래처럼 외부에서 name을 alert로 표시하면 아무것도 나오지 않는다.

function test(){
  var name = "doitnow-man";
    return function (){
  alert(name);
  }
}

alert(name);

 

 

 

 

 

 

 

 

 

 

 

출처

https://beomy.tistory.com/9

http://www.nextree.co.kr/p4150/

https://doitnow-man.tistory.com/125