[JavaScript] 함수

함수

• 함수는 같은 동작을 하는 중복된 코드가 여기저기에 존재할 때 이들을 하나로 묶어 하나의 명령으로 실행할 수 있게 해주는 기능

작성법

• 함수를 사용하지 않고 동일한 기능을 하는 코드를 중복해서 작성하게 되면 코드 길이도 길어지고, 작성하기 번거롭다는 단점이 있음

  let num1 = 10;
  let num2 = 15;
  let sum = num1 + num2;
  
  console.log(sum); //25
  
  let num3 = 1;
  let num4 = 5;
  let sum2 = num3 + num4;
  
  console.log(sum2); //6
  

• 이렇게 같은 코드를 반복해서 작성해야 할때, 반복되는 코드를 하나의 함수로 묶어서 작성

함수 선언, 호출, 매개 변수

• 함수를 사용하기 위해서는 먼저 선언문을 작성하여야 함

  function 함수이름(매개변수) {
  		실행되어야 하는 코드
  }
  

  • 함수의 선언은 function 이라는 키워드를 통해 작성이 가능하며, function의 오른쪽에 함수의 이름을 작성
  • 괄호(()) 안에는 매개변수를 사용하여 필요한 값을 전달
  • 함수 선언문의 중괄호({} ) 내부에는 해당 함수를 사용할 때 실행되어야 하는 코드를 작성

• 예시 : 매개변수를 더하는 함수

  function add(num1, num2) {
    console.log(num1 + num2);
  }
  
  add(10, 15); //25
  

  • 함수를 호출할 때는, 함수의 이름을 적고, 함수의 매개변수로 넣을 값들을 넣어줌
    • 함수가 호출될 때 넘기는 값 : 인수
  • add 함수를 호출하고 인수로 10, 25를 넘겨주면 add 함수의 매개변수로 num1에는 10이, num2에는 15가 전달되어 두 숫자를 더한 값인 25가 출력됨

return문

• 함수의 실행 결과값을 이용하여 또 다른 작업을 해야할 경우 return문을 이용해 함수 호출의 결과값을 반환하기도 함

  function add(num1, num2) {
    return num1 + num2;
  }
  
  console.log(`두 숫자를 더한 결과는 ${add(10, 15)} 입니다.`);
  

  • return문을 이용할 때에는 작성된 코드와 같이 함수의 내부에 return을 작성하고 return 문 옆에 반환할 값을 작성
  • 코드 실행 결과 add 함수를 호출하면 return을 통해 25가 반환되고, 템플릿 리터럴을 통해 두 숫자를 더한 결과는 25 입니다. 가 출력

• add 함수 내부의 return문 아래에 “함수 호출” 이라는 문장을 출력하는 코드를 작성할 경우

  function add(num1, num2) {
    return num1 + num2;
    console.log("함수 호출");
  }
  
  console.log(`두 숫자를 더한 결과는 ${add(10, 15)} 입니다.`);
  

  • add 함수 내부에 있는 console.log 가 실행되지 않고, 두 숫자를 더한 결과는 25입니다 라는 문장만 출력됨
  • console.log("함수 호출”) 이라는 코드가 실행되지 않는 이유는 이렇게 return 문 아래에 작성된 코드들은 실행되지 않은채로 함수가 종료되기 때문
  • return문을 사용할 때에는, 실행되어야 하는 코드들은 모두 return문 위에 작성해줘야 함

Early return pattern

• 자바스크립트에서 함수는 이러한 return문의 성질을 이용해 얼리 리턴 패턴(Early return pattern)으로 자주 사용되기도 함

• 얼리 리턴 패턴은 말 그대로 빨리 리턴한다. 즉, 특정 조건에 부합하지 않으면 바로 return을 하도록 하는 패턴

• 특정 숫자가 10보다 큰지 작은지 그리고 0보다 큰지 작은지를 출력하는 함수

  function func(num) {
    if (num > 0) {
      if (num >= 10) {
        console.log("num의 값이 10보다 크거나 같습니다.");
      } else {
        console.log("num의 값이 0보다 크고 10보다 작습니다.");
      }
    } else if (num === 0) {
      console.log("num의 값이 0입니다.");
    } else {
      console.log("num의 값이 0보다 작습니다.");
    }
  }
  
  func(15);
  

  • 코드를 보면 코드 해석이 한 번에 되지 않고, 가독성이 좋지 않음
  • 이럴 경우 얼리 리턴 패턴을 통해 깔끔하고 가독성이 좋은 코드를 작성 가능

• 얼리 리턴 패턴을 사용한 코드

  function func(num) {
    if (num === 0) return "num의 값이 0입니다.";
    if (num < 0) return "num의 값이 0보다 작습니다.";
    if (num >= 10) return "num의 값이 10보다 크거나 같습니다.";
    return "num의 값이 0보다 크고 10보다 작습니다";
  }
  
  console.log(func(15));
  

  • 얼리 리턴 패턴은 else문을 사용하지 않고, if 와 return으로만 코드를 작성하며, 특정 조건문을 만족하면 되면 바로 return을 함
  • 중간에 조건에 맞는 코드를 실행되면 이후에 작성된 조건은 생각하지 않아도 되는 코드의 구조를 단순하게 만들어주는 패턴

IIFE 함수

• 즉시 실행함수는 호출을 통한 실행이 아닌, 정의되자마자 즉시 실행되는 함수

  (function () {
    console.log("자바스크립트");
  })();
  

• 함수의 정의와 실행을 한 번에 처리하는 방식으로, 함수가 전역에 영향을 미치는 것을 방지하고 모듈화된 코드를 만들 때 사용됨

코드의 흐름

• 자바스크립트는 함수 호출문의 위치에 따라 코드의 흐름이 변경되기도 함

• 중간에서 함수를 호출하는 예제 코드

  function func() {
    console.log("2");
    console.log("3");
  }
  
  console.log("1");
  func();
  console.log("4");
  

  • 맨 위에 func 라는 이름을 가진 함수가 선언되어있기는 하지만, 아직 호출되지 않았으므로, func함수의 바로 아래있는 console.log("1") 가 먼저 실행되어 1이 출력
  • 그 다음 func함수의 호출을 통해 2와 3이 순서대로 출력
  • 함수가 종료된 다음 console.log("4") 를 통해 4 가 출력
• 자바스크립트의 함수를 호출 할 때에는 실행 순서를 고려해 알맞은 위치에서 실행해야 함

지역변수

• 지역변수는 함수 블록의 내부에서만 유효한 변수를 뜻함

  function add(num1, num2) {
    let sum = num1 + num2;
    return sum;
  }
  
  add(10, 15);
  console.log(sum);
  

  • 위 코드를 실행시켜보면, sum is not defined 라는 에러 메시지가 출력
    • add 함수 내부에 선언된 변수는 add 함수에서만, 즉 add 함수 블록의 내부에서만 유효한 변수이기 때문
• sum 변수처럼 특정 함수의 내부에 선언된 변수는 해당 함수의 내부에서만 즉, 해당 함수의 중괄호 내부에서만 유효한 혹은 접근이 가능한 변수
• 지역변수를 외부에서 접근하려고 한다면 에러가 발생

외부변수

• 외부변수는 지역변수와는 반대로, 함수 외부에서 선언한 변수

• 지역변수는 외부에서 접근이 불가하지만, 외부변수는 함수 내부에서 접근 가능

  let sum = 0;
  
  function add(num1, num2) {
    sum = num1 + num2;
  }
  
  add(10, 15);
  console.log(sum); // 25
  

• 외부변수는 함수 외부에서 선언되어 어디서나 접근 가능한 변수이고, 또 다른 말로는 전역변수 라고 부르기도 함

📚 이 글은 인프런 - 웹 프론트엔드를 위한 자바스크립트 첫걸음을 수강하며 정리한 내용입니다.
※ 본 글은 개인 학습 목적으로 작성되었으며, 일부 내용은 강의 자료를 참고하였습니다.