JavaScript| 함수, 함수 정의, 호출, 그리고 콜백 함수

 

이런식으로 변수 + 다른변수를 해야할 때,

변수만 가지고서는 같은 작업을 할때 계속 변수를 입력해줘야하는

번거로움이 있다. 이럴 때, 사용하는 것이 바로 함수!

 

 

 

반복 수행할 식을 적어서 이름을 정해준다.

이때, 이름도 간결하지만 의미가 있게 설정해주는 것이 좋다.

 

이것을 함수라고 하는데 JS에서 함수라고 알 수 있도록

function을 사용해서 선언해주는 것.

 

function add(a, b) {

   return a + b;

}

풀어서 해석하자면,

a와 b를 받아와서 두 개를 더하는 식을 add라는 이름의

함수로 선언한다!

 

여기까지는 정의만 한 것이다.

 

 

이것을 이용해서 호출해 보자면,

sum이라는 변수는 add함수에 3, 4의 인자를 전달해주는 것.

const sum = add(3, 4);

그러면 add함수에서 3, 4를 받아 더해주고 그 값(7)을 리턴해준다.

리턴 값이 sum의 데이터에 전달되고

sum을 호출하면 7이 출력된다.

 

 

 

 

 

여기서 함수를 다른 변수에 할당하는 것을 알아보자.

함수도 오브젝트의 한 종류라고 생각하면 된다.

add라는 함수는 함수 기능의 레퍼런스를 가리키는 것이고,

때문에 함수를 doSomthing이라는 변수에 할당하면

doSomething이라는 변수가 add와 똑같은 기능의 레퍼런스를 가리키게 된다.

 

결국, 똑같은 함수를 가리키게 되는 것이다.

 

 

 

그리고 이렇게 인자를 받지 않는 함수를 작성하고

그 함수를 인자를 포함해서 호출하면

인자는 무시되고 함수식인 'print'만 콘솔로그에 출력된다.

 

 

 

입력한 인자 값을 출력하고 싶다면

위 사진 처럼 함수에 인자를 설정하고

그 인자를 통한 식을 작성해야한다.

 

 

 

이때, 인자 이름도 의미 있는 것을 작성하면 더 좋다.

a, b같은 것은 의미가 없지만,

name, age처럼 의미가 있는 이름으로 설정하면

아, 이름과 나이를 출력하는 함수식이구나! 라는 것을 이해할 수 있다.

 

 

 

-함수를 다른 함수에 인자로 전달

 

 

add라는 더하기 함수가 있고,

surprise라는 인자를 보여주는 함수가있다.

여기서 surprise인자에 add를 넣게되면,

add가 가리키고 있는 함수식을 복사해서

surprise의 인자에(operator) 전달하게 되고,

그 전달된 값이 보여지게 된다.

 

위에 사진에서 NaN이라고 나오는것은

전달된 add의 레퍼런스 값,

즉, operator의 값이 작성되어 있지 않아서 NaN가 출력된다.

 

 

 

이렇게 값을 입력해주면 값을 더한 5의 값이 리턴되어 출력된다.

 

 

 

 

이렇게 나누는 함수식을 작성하고

surprise 인자로 그 함수를 넣어주면

나누기 된 값이 출력된다.