본문 바로가기

Frontend study/JavaScript

JavaScript - 7. 함수

✔ 자바스크립트의 함수에 대해 정리합니다.

 

 

  함수에 대해서

:) 함수는 특정 작업을 수행하는 데 필요한 기능들을 그룹핑화하기 위해

  설계된 독립적인 블록이다.

 

  함수도 일반 객체처럼 값으로 사용할 수 있어서 변수에 할당이 가능하다. 

  (이러한 특징은 자바스크립트의 함수가 일급 함수이기 때문이다. )

  

 

 1. 함수 생성하기(= 함수 정의, 선언)

     :  함수를 사용하기 위해서 우선 함수를 정의(= 선언)해야 한다. 함수를

        선언하는 방법은 두 가지가 있다. 

        (생성자 함수로 선언하는 방법도 있지만, 여기서는 생략)

 

      1) 함수 선언식(= 이름이 있는 함수, 유명함수)

         : 함수 선언식은 아래와 같이 함수명(myFunc)이 들어간다. 

 

 function myFunc(num1, num2) {
   return num1 + num2
 }

 

     

      2) 함수 표현식(= 이름이 없는 함수, 익명함수)

        : 함수도 객체이므로 리터럴 방식의 정의가 가능하다. 다시 말해서

          변수에 함수를 가리키는 참조값을 저장하여(함수 자체를 저장하

          는 것이 아님)선언할 수 있다. 

 

 let func = function(num1, num2) {
   return num1 + num2
 }
 

 

 

 

2. 함수 사용하기(= 함수 호출)

   : 함수 실행 또는 함수 호출이라고 부른다. 함수를 호출하기 위해서는 

     함수 이름(변수) 뒤에 중괄호를 붙여준다. 

 

myFunc(12);  //myFunc 함수를 실행
func(34);  //Func 함수를 실행

 

 

3. 함수 용어

   1) 매개 변수(parameter) 

      :  함수를 정의할 때 전달되는 값을 받는 변수를 말한다.    

 

   2) (전달)인자(argument)

      : 함수를 실행할 때 전달되는 실제 값이다.

 

      ※ 흔히 매개변수와 (전달)인자를 같은 의미로 혼용하며 사용되지만,

         여기서는 개념을 정리하기 위해 나눠서 정리  

 

   3) 리턴값(return value)

      : 함수가 실행될 때 전달 인자로 입력된 값이 연산된 이후 반환되는 값이다.

 

     

function addFunc(i) { // (전달)인자(3)를 받을 매개변수로 i를 입력
  return i * i; 
}
 
const output = addFunc(3); // (전달)인자로 3을 입력
console.log(output); // 리턴된 값 9 출력

 

 

    ※ 만약 매개변수보다 전달 인자가 많을 경우! 

      ☞ 추가된 전달 인자는 무시되고 출력되지 않는다.

 

 function func(x, y, z) {
  console.log(x);
  console.log(y);
  console.log(z);
 }
 
 func(12345678910// 추가된 전달 인자는 무시

 

 

4. 함수 활용하기 

    ◎ 함수를 사용하여 점수를 출력해주는 프로그램 만들기!

 

 

 function getGrade(score) {
   if (score === 100) {
      return "A+";
   } else if (score >= 90) {
      return "A";
   } else if (score >= 89) {
      return "B+";
   } else if (score >= 80) {
      return "B";
   } else if (score >= 79) {
      return "C+";
   } else if (score >= 70) {
      return "C";
   } else if (score >= 69) {
      return "D+";
   } else if (score >= 60) {
      return "D";
   } else {
      return "F";
   }
 }
  
 const grade = getGrade(70);
 console.log(grade);

 

 

함수를 사용하는 이유!

  첫번째 코드의 간결성

  두번째 코드의 가독성이 좋음

  세번째 유지보수가 용이

 

 

지금가지 함수를 생성하고 사용하는 방법에

대해서 정리해보았다. 

 

반복되거나 유사한 동작을 하는 코드를 함수로 만들어서 

사용하게 되면 코드의 중복을 없앨 수 있고, 좀 더 코드가

깔끔해질 수 있다. 

 

 

 

'Frontend study > JavaScript' 카테고리의 다른 글

JavaScript - 9. DOM (= 문서 객체 모델)  (0) 2022.02.27
JavaScript - 8. 객체  (0) 2022.02.27
JavaScript - 6. 배열  (0) 2022.02.27
JavaScript - 5. 반복문  (0) 2022.02.27
JavaScript - 4. 조건문  (0) 2022.02.26