🔥 [UIUX] 0123 JAVASCRIPT Coding, 코딩 초급 14

✏️ 2025. 1월 23일 / javascript 초급 14

🔴 익명 함수 표현식
일반함수정의문의 경우 함수명을 선언하고 그 이름을 사용하여 호출했습니다.
이 방법은 함수 이름을 알고 있으면 어디에서나 호출하여 사용할 수 있어 많이 사용합니다.
이 밖에도 따로 함수 이름을 지정하지 않고 사용하거나,
함수를 호출하지 않고 바로 실행하는 방법도 있습니다.
익명함수는 이름이 없는 함수를 말합니다.
즉, 익명함수를 선언할 때에는 이름을 붙이지 않습니다.
그래서 이 함수를 변수에 넣어두었다가 변수명을 이용하여 호출합니다.
익명함수는 호이스팅 기술을 지원하지 않습니다.
반드시 함수를 먼저 만든 후에 호출해야 합니다.

      [기본형]
      let 변수명 = function() {자바스크립트 코드;}
      변수명(); -> 익명 함수 호출문

🔴 함수에서 return문의 역할
return문은 함수에서 결괏값을 반환하는 역할을 합니다.
그리고 함수에서 return문이 등장하면 반복문의 break문과 비슷하게 코드가 강제 종료됩니다.
즉, 함수의 결괏값을 반환하면서 강제 종료 시키는 문장입니다.

      [기본형]
      1. 일반 함수 정의문
      --------------------------------------
      function 함수명(){
      자바스크립트 코드 1; 
      return 데이터(값); > 데이터 값을 반환 후 종료
      자바스크립트 코드 2; > 실행하지 않고 무시된다.
      }
      2. 익명함수(함수표현식)
      --------------------------------------
      let 변수 = function(){
      자바스크립트 코드 1; 
      return 데이터(값); > 데이터 값을 반환 후 종료
      자바스크립트 코드 2; > 실행하지 않고 무시된다.
      }

🔴 실제로 한번 사용해볼까요?

      //익명 함수 호출문 사용해보기
      let sum = function (a, b) {
        return a + b;
      };
      document.write(`함수 실행결과 : ${sum(10, 20)} <br/>`);
      //익명함수를 이용하여 사용자의 국어, 수학 점수를 받아 화면에 출력해보겠습니다.
      let testAvg = function (arrData) {
        //국어 점수와 수학 점수의 평균 점수를 구합니다.
        let sum = 0;
        //arrData에 들어있는 데이터 갯수만큼 반복한다.
        for (let i = 0; i < arrData.length; i++) {
          //1. prompt(arrData[i] + "점수를 입력해주세요", "0점") 실행
          //2. prompt로 받아온 문자형 숫자를 Number()로 형 변환
          //3. 형 변환 된 숫자를 sum과 더함
          sum += Number(prompt(arrData[i] + "점수를 입력해주세요", "0점"));
        }
        //avg = 합산점수 나누기 배열의 데이터 갯수(과목 수)
        let avg = sum / arrData.length;
        return avg;
      };
      let arrSubject = ["국어", "수학"];
      let result = testAvg(arrSubject);
      document.write(`평균 점수는 : ${result}점 입니다.`);

🟡 화살표 함수
ES6버전부터는 익명 함수를 표기할 때 좀 더 쉽고
직관적으로 만들 수 있는 '화살표 함수'가 생겼습니다.

      [기본형]
      let 변수 = (매개변수) => {코드};
      -
      1. let 변수 = () => {코드};
      : 매개변수가 없을 경우 매개변수 자리에 ()를 작성합니다.
      -
      2. let 변수 = 매개변수 => {코드};
      : 매개변수가 1개인 경우 ()를 생략할 수 있습니다.
      -
      3. let 변수 = 매개변수 => 코드;
      : 매개변수가 1개이면서 실행시킬 코드가 1줄인 경우 매개변수의 ()도 생략할수 있고,
        코드 자리의 {}도 생략할 수 있습니다.
        이때, return도 생략된 것으로 간주합니다.
      -    
      4. let 변수 = (매개변수1, 매개변수2) => {코드};
      : 매개변수가 2개 이상일 경우 ()를 꼭 작성하고 콤마(,)로 구분합니다.
      -
      5. let 변수 = 매개변수 => {코드1, 코드2}
      : 작성할 코드가 2줄 이상인 경우 {}를 써야하고 만약 값을 반환해야 할 경우 return도 작성합니다.

🟢 매개변수에 기본값 지정하기
ES6버전부터는 함수에 매개변수를 선언할 때 기본값을 지정하는 기능이 생겼습니다.
함수는 매개변수의 갯수와 인수의 갯수가 동일해야합니다.
만약 매개변수의 갯수와 인수의 갯수가 다르면 함수는 정상적으로 실행되지 않습니다.
하지만 경우에 따라 함수의 인수를 3개까지 보낼 수 있는 함수에서 인수를 1개만 보내거나 2개만 보낼 경우,
매개변수에 기본값을 지정해주면 함수를 안전하게 실행시킬 수 있습니다.

      [기본형]
      function 함수명(매개변수1 = 값1, 매개변수2 = 값2,매개변수3 = 값3){
      자바스크립트 코드;
      }
      함수명(인수1);
      함수명(인수1, 인수2);
      함수명(인수1, 인수2, 인수3);

🔵 함수의 스코프
함수 스코프란 함수가 선언된 위치에 따라 달라지는 '유효범위'를 의미합니다.
함수안에는 또 다른 함수를 넣을 수 있습니다.
이때 안에 있는 함수를 '지역함수',
지역함수를 감싸고 있는 스크립트 영역에 선언된 함수를 '전역함수'라고 합니다.
프로젝트의 규모가 크면 여러 명의 개발자가 투입되는데,
만약 같은 이름의 전역 변수나 전역 함수를 사용하면 충돌이 발생합니다.
또한 다른 개발자가 이미 개발해놓은 라이브러리나 플러그인의 변수 또는 함수의 이름과
자신이 사용하는 변수나 함수의 이름이 같은 경우에도 충돌이 발생할 수 있습니다.
이럴 때 지역함수를 이용하면 자신의 코드를 안전하게 지킬 수 있습니다.

      [기본형]
      <script>
        function 함수명1() { > 전역함수
          function 함수명2() { 코드 } > 지역함수, 함수명2의 유효범위는 함수명 1의 안쪽이다.
          함수명2(); > 유효범위 안, 호출이 가능
        }
        함수명1(); > 전역함수 호출
        함수명2(); > 유효범위를 벗어남, 호출이 불가능
        </script>

🟣 즉시 실행 함수
일반적으로 함수는 선언하고 필요할때마다 호출해서 실행하는 방법을 많이 사용합니다.
하지만 한 번만 실행하는 함수라면 함수를 정의하면서 동시에 실행할 수 있습니다.
이게 바로 즉시 실행 함수 입니다.
즉시 실행 함수를 사용하면 브라우저가 로딩되는 순간 바로 실행합니다.
기본형에서 function(){}() 마지막에 붙어있는 ()은 함수의 호출문 입니다.
즉시 실행 함수는 익명함수의 형태를 가지고 있습니다.
즉, 함수 표현식입니다.
그렇기 때문에 ()뒤에 세미콜론을 붙여주어야 합니다.

      [기본형]
      (function(매개변수){
        자바스크립트 코드;
      }(호출문));
      또는 
      (function(매개변수){
        자바스크립트 코드;
      })(호출문);

🟤 재귀 함수 호출
함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것을 '재귀 함수 호출'이라고 합니다.
재귀 함수 호출을 사용하면 반복문처럼 여러 번 함수를 호출할 수 있습니다.

      [기본형]
      function 함수명() {
        자바스크립트 코드;
        함수명(); > 재귀 함수 호출, 위쪽의 코드를 실행한 후 또 함수를 호출합니다.
      }
        함수명(); > 바깥에서 한 번 호출합니다.

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)