[서적] Do it ! 시리즈/Do it! 자바스크립트 입문

[Do it! 자바스크립트 입문] 11 - 5장 여러 번 사용할 수 있는 함수 만들기, 매개변수와 인수, return문, 익명 함수와 화살표 함수

다두디다 2022. 2. 18. 17:26
728x90

이번에는 자바스크립트의 함수 종류를 자세히 알아보겠습니다.

 

05 - 3 여러 번 사용할 수 있는 함수 만들기

 

#1 매개변수와 인수

 

 

위의 addNumber() 함수는 계산 값 10과 20을 고정해놓아서 몇 번 실행해도 같은 결과가 나옵니다.

그렇다면 addNumber() 함수의 입력값을 바꾸고 여러 번 사용하기 위해서는 어떻게 해야할까요?

이 때 필요한 개념이 '매개변수'와 '인수'입니다.

 

 

함수를 실행하기 위해 필요하다고 지정하는 값을 매개변수라고 하며,

addNumber(a,b)에서 a,b가 매개변수 입니다.

 

 

이렇게 매개변수를 지정하고 addNumber()함수를 호출할 때 넘겨주는 값을 인수라고 합니다.

 

#2 두 수를 더하는 함수 실행하기

 

 

① var num1 = parseInt(prompt("첫번째 숫자는?"));
    var num2 = parseInt(prompt("두번째 숫자는?"));

=> 프롬프트 창에 숫자 입력 받기

 

② addNumber(num1,num2);

=> num1, num2와 함께 addNumber() 함수 호출

 

③ 넘겨받은 num1, num2를 a,b로 전달

 

④ var sum = a + b;
    alert("두 수를 더한 값은 " + sum + "입니다.");

=> alert창에 연산값 표시

 

< 결과값 >

 

#3 함수의 return문 알아보기

 

위의 함수를 return문을 사용하여 변형해보겠습니다.

 

 

앞에 했던 계산식과 비슷하지만 위 계산식은

① var sum = a + b; 

    return sum;

=> 결과값 sum을 반환

 

② var result = addNumber(num1, num2)

=> 반환한 값을 result에 저장

 

③ alert("두 수를 더한 값은" + result + "입니다.");

=> alert창에 결과값 표시

 

< 결과값 >

 

05-4 함수 표현식

 

#1 익명 함수

 

익명 함수를 말 그래도 이름없는 함수로 선언할 때 이름을 붙이지 않습니다.

익명 함수를 함수 자체가 식이기 때문에 익명 함수를 변수에 할당할 수 있습니다.

앞에 선언한 익명 함수 add를 함수 이름처럼 사용하여 익명함수를 실행합니다.

 

#2 화살표 함수

 

 

위 3개의 함수 식은 모두 같은 결과를 초래하지만

밑으로 갈수록 점점 간소해집니다.

이때 사용하는 => 표기법을 화살표 함수라고 합니다.

 

728x90