Untitled_Blue

[Javascript] 함수 본문

Web/Javascript

[Javascript] 함수

Untitled_Blue 2023. 8. 6. 19:55
반응형

안녕하세요. 이번 글은 함수에 대한 설명입니다.

 

- 함수와 이벤트는 무엇인가?

  • 함수 : 구현하고자 하는 로직을 하나의 모듈로 구성해둔 일종의 집합체

- 함수에 대한 기본적인 이해

  • 익명 함수 : function에 함수명을 직접적으로 사용하지 않고 변수에 직접적으로 대입하는 방식의 함수
  • 선언적 함수 : 가장 일반적이며 함수명이 직접적으로 명시되는 방식의 함수
  • 콜백 함수 : 어떠한 특정 매개체에 의해 호출되는 함수
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let vFn01 = function() {
            document.write('익명 함수는 이렇게 변수에다 직접 대입하는 방식을 가지고 있습니다.');
        }

        vFn01();
    </script>
</body>
</html>

다음과 같이 익명함수는 직접적으로 변수에 함수에 대한 로직을 대입하는 방식을 가지고 있음을 확인할 수 있다.

function mFn01() {
   document.write('선언적 함수는 가장 일반적인 방식이며 일반 프로그래밍에서의 메서드와 같습니다.');
   document.write('<br>');
}

function mFn02(val) {
   document.write(val + '선언적 함수는 가장 일반적인 방식이며 일반 프로그래밍에서의 메서드와 같습니다.');
}

mFn01();
mFn02('Alert : ');

다음과 같이 선언적 함수는 메서드 내지 함수를 선언하는 가장 일반적이며 보편적인 방식임을 확인할 수 있다.

function mFn01() {
   document.write('다른 요소에 의해 호출되는 나는 콜백함수');
   document.write('<br>');
}

function mFn02(val) {
   mFn01();
   document.write(val + '내가 불러오는 주체');
}

mFn02(10);

다음과 같이 콜백함수는 다른 매개체 내지 요소에 의해 호출되는 함수임을 확인할 수 있으며 쉽게 풀이하면 함수 안에 함수를 넣어서 한 번 호출할 때 두 개 이상의 함수를 실행할 수 있도록 유도하는 것이다.

- 매개변수와 Return 값

  • 매개변수 : 함수 호출 시 괄호 안에 들어가는 변수
  • return 값: 함수를 실행하고 종료할 때 최종적으로 반환되는 값
function mFindAge(Year) {
   const now = new Date();
   return (now.getFullYear() - Year);
}

let age = mFindAge(1995);
document.write(age);

다음과 같이 소괄호 안에 매개변수를 선언함으로써 매개변수의 무슨 값이 들어가느냐에 따라 다양한 결과를 도출받을 수 있음을 확인할 수 있다. 이를 통해 재활용 또한 가능하다는 점을 확인가능하다. 물론 매개변수는 모든 함수에 대해 꼭 사용해야되는 것이 아니다. 다음으로 return을 통해 최종적인 결과를 반환받을 수 있음을 확인할 수 있다. 또한 리턴값이 존재함으로써 변수에 대입할 수 있다는 점 또한 확인할 수 있다.

- 매개변수에 제한이 두지 않는다! 가변 매개변수 함수

  • 매개변수의 갯수가 고정되어 있지 않은 함수 (주로 ... 라는 키워드를 붙여서 사용한다.)
function mNoLimit(...args) {
  document.write(args.length + "<br>");
}

mNoLimit(10, 20, 30, 40, 50); // 5
mNoLimit(10, 20, 30, 40, 50, 60, 70, 80, 90, 100); // 10

다음과 같이 매개변수에 ... 을 추가해서 가변 매개변수임을 명시해주는 것을 시작으로 매개변수가 배열 형식으로 들어올 수 있음을 .length를 출력함으로써 확인할 수 있다.

- 콜백함수를 활용하는 함수 3가지

  • forEach() : 배열 내부의 요소를 활용해서 콜백함수를 호출하는 메서드
  • map() : 반환 값을 기반으로 새로운 배열을 생성 또는 업데이트하는 메서드
  • filter() : 전반적인 기능은 map()과 유사하나 조건 내 true값만 배열 형식으로 반환한다는 점에서 차이가 있는 메서드
let value = [10, 20, 30, 40, 50, 60];

value.forEach(function(value, index, array) {
   document.write(index + "번째 : " + value + "<br>");
});

value = value.map(function(value, index, array) {
   return value * (index + 1);
});

 document.write("<br>" + value + "<br>");

value = value.filter(function(value, index, array) {
    return value % 3 == 0;
});

document.write("<br>" + value);

다음과 같이 콜백함수와 관련해서 3가지의 메서드가 존재함을 확인할 수 있다.

let value = [10, 20, 30, 40, 50, 60];

value.forEach((value, index, array) => document.write(index + "번째 : " + value + "<br>"));

value = value.map((value, index) => value * (index + 1));
document.write("<br>" + value + "<br>");

value = value.filter((value, index, array) => value % 3 == 0);
document.write("<br>" + value);

추가적으로 3가지의 콜백 함수 메서드를 상단의 코드와 같이 => 화살표 함수를 통해 간결하게 작성할 수 있다.

사용하는 방식은 (매개변수) => {} 또는 (매개변수) => 리턴값이다.

 

다음은 이벤트에 대한 설명입니다.

반응형

'Web > Javascript' 카테고리의 다른 글

[Javascript] 객체  (0) 2023.08.08
[Javascript] 이벤트 (Event)  (0) 2023.08.06
[JAVASCIRPT] 자바스크립트 기본 문법  (0) 2023.07.04
[Javascript] 자바스크립트 기초와 alert(), comfirm(), prompt()  (0) 2023.06.23
'Web/Javascript' Related Articles more