javascript 함수

1. 함수 (function)

 - javascript에서 함수란 작업을 수행하거나 어떠한 특정 로직을 수행하는 문장이 집합 되어있는 블록이다.

 - 기본적으로 함수를 호출하고자 하면 같은 scope 안에 함수를 정의를 해야 한다.

 

 

2. 함수 선언

 - 함수를 선언 하는 방법은 크게 선언적 함수, 익명 함수 2가지의 방법이 있다. 

 

• 선언적 함수
  - 선언적 함수는 가장 흔히 사용되는 방법 중 하나이다. 
  - 'function' 키워드를 사용하며 키워드 뒤에 함수명을 작성 하고 () 안에 매개변수를 넣을 수 있다.
  - 'return' 키워드를 사용해 함수가 끝날 때 함수 내부에서 구현한 코드의 결과값을 돌려줄 수 있다.
  - 선언적 함수는 javascript 호이스팅에 영향을 받는다.

function 함수명 ( 매개변수 ) {
	함수 구현체
	return 결과값
}

• 익명 함수
  - 익명 함수는 'function' 키워드 뒤에 함수명을 정의하지 않고  변수에 함수를 저장 하는 방식이다. 
  - 'return' 키워드를 사용해 함수가 끝날 때 함수 내부에서 구현한 코드의 결과값을 돌려줄 수 있다.
  - 호이스팅에 영향을 받지 않는다.

let 변수명 = function (){
	함수 구현체
	return 결과값
}

• 화살표 함수
  - 화살표 함수는 익명 함수와 비슷하지만 함수를 정의하는데 있어서 'function'이라는 키워드를 사용하지 않는다.
  - 익명 함수와 마찬가지로 호이스팅에 영향을 받지 않는다.
  - 매개변수가 1개일 때는 ()를 생략 할 수 있지만 매개변수가 없거나 2개 이상이면 ()를 꼭 작성해야 한다.
  - 화살표 함수를 사용할 때는 this 키워드를 사용할 수 없다.
      -> 정확히는 this가 바라보고 있는 객체가 최상위 객체를 바라보고 있다.

let 변수명 = (매개변수) =>{
	구현체
    return 결과값;
}

 

3. 호이스팅

 - 위에 함수를 선언하는 방법을 살펴 볼때 나왔던 '호이스팅의 영향을 받지 않는다.'라는 문장을 보고 '호이스팅'이 뭔지 궁금한 사람이 있을 수도 있다.  
 - 호이스팅이란 쉽게 말하면 스크립트가 시작할 때 선언적 함수로 정의된 함수 및 var로 선언된 변수가 코드 최상단으로 이동을 하는 현상을 얘기한다.  javascript는 기본적으로 위에서 아래로 코드가 순서대로 실행이 되는 성질을 가지고 있다. 
 - 호이스팅의 성질을 가지고 있으면 코드가 실행 될 때 최상단에서 코드가 실행이 되고 그 다음부터 작성된 코드를 한줄 씩 읽어 나가면서 코드를 실행 시킨다.
 - 예제를 보면 쉽게 이해가 가능하다.

add(1,2);	// 더하기 함수를 실행

// 선언적 함수로 함수 정의
function add(a,b){
	return a+b;
}

- 위의 코드는 스크립트를 실행 할 때 아무런 에러가 발생하지 않고 add의 함수가 실행이 된다.  그 이유는 스크립트가 실행 될 때 function 예약어로 선언된 함수가 스크립트 최상단에서 생성이 되고 그 다음으로 add 함수가 실행이 되기 때문이다. 

add(1,2)	// 함수 호출

// 함수 선언
let add = (a,b) =>{
	return a+b;
}

- 위의 코드는 스크립트를 실행 하면 add 함수를 호출 할 때 undefined 에러가 발생한다. 그 이유는 익명함수, 화살표 함수는 호이스팅의 영향을 받지 않아 스크립트의 실행 순서에 따라 위에서 아래로 코드를 읽어 오는데 함수가 선언 되기 전에 실행이 되기 때문이다.

 

 

다음 장에서는 함수의 콜백을 알아보자