[Web/JS] 자바스크립트

티스토리 뷰

Web/JS

[Web/JS] 자바스크립트 - 함수2

poopooreum 2024. 5. 10. 21:16

✏️ 함수 1편 맛보기

https://pooreumjung.tistory.com/419

[Web/JS] 자바스크립트 - 함수

✏️ 함수자바스크립트 상에서 동작해야 할 목적대로 묶은 명령을 함수(function)이라고 합니다. 함수를 사용하면 각 명령의 시작과 끝을 명확하게 구별할 수 있고, 묶은 긴으에 이름을 붙여서 어

pooreumjung.tistory.com

✏️ 매개변수, 인수, return

함수를 실행하게 되면 그 함수로 필요한 값을 함수로 넘겨주고자 하는 경우가 발생하게 됩니다. 예를 들어서 두 변수를 더하는 sum함수를 만들고 싶고, sum함수에서는 두 변수를 받아서 계산을 하고 싶은 경우가 있는 경우가 있죠. 이럴 때 sum함수에서 넘어오는 값들을 받기 위해서 변수들을 선언해야 하는데 이것을 매개변수라고 합니다. 코드로 가보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>함수</title>
	<style>
	   body {
		  padding-top:20px;
		  text-align:center;
	   }
	</style>
</head>
<body>
  <script>		
    function addNumber(num1, num2){ 								
	  var sum = num1 + num2;			
	  return sum;
    }
    var result = addNumber(2, 3);
    document.write("두 수를 더 한 값 : " + result);
  </script>	
</body>
</html>

// addNumber(num1, num2)로 선언되어 있는 것을 볼 수 있는데 이때 num1과 num2가 매개변수입니다. 그리고 return sum이라는 문장이 있는데 이는 sum값을 반환한다라는 의미로 생각하면 됩니다. 
// 함수 밑에 var result = addNumber(2,3);으로 되어 있는데 여기서 2와 3은 인수(argument)입니다. 이 문장을 해석해보면 addNumber함수로 2와 3을 넘겨주 addNumber함수에서는 2와 3을 더한 값을 sum에 저장해서 값을 반환하여 result 변수에 저장합니다.

✏️ 매개변수 기본값 지정

ES6부터는 함수에서 매개변수를 선언할 때 기본값을 지정하는 기능이 생겼습니다.

<body>
  <script>		
    function multiple(a, b = 5, c = 10) { 	// b = 5, c = 10으로 기본값 지정
		return a * b + c;
    }
     
    var result1 = multiple(5, 10, 20); // a = 5, b = 10, c = 20
    document.write("multiple(5, 10, 20)을 실행하면 결과는 " + result1 + "입니다. <br>")
    var result2 = multiple(10, 20);    // a = 10, b = 20, c = 10(기본값)
    document.write("multiple(10, 20)을 실행하면 세번째 매개변수는 기본값을 사용하고 결과는 " + result2 + "입니다.<br>")
    var result3 = multiple(30);        // a = 30, b = 5(기본값), c = 10(기본값)
    document.write("multiple(30)을 실행하면 두번째,  세번째 매개변수는 기본값을 사용하고 결과는 " + result3 + "입니다.")
  </script>	
</body>

// multiple함수에서 b=5, c=10을 미리 지정해놓았습니다. 예를 들어 multiple(10,20), multiple(30)과 같은 경우에서 값을 전부다 넘겨받지 못했을 때 기본값을 사용할 수 있습니다.

✏️ 익명 함수

이때까지 만났던 함수들은 모두 함수의 이름이 있었지만 익명 함수는 이름 없이 함수를 선언할 수 있습니다.

function(a, b){
   return a + b;
}

<script>		
    var sum = function(a, b){
      return a + b;
    }
    document.write("함수 실행 결과 : " + sum(10, 20) );
</script>

✏️ 즉시 실행 함수

일반적으로 함수는 선언하고 필요할 때마다 호출해서 실행하는 방법을 많이 사용하는데 한 번만 실행하는 함수라면 함수를 정의하면서 동시에 실행할 수 있는데 이를 즉시 실행 함수라고 합니다.

기본형 =>(function(){명령}()); 또는 기본형 => (function(매개변수){명령}(인수));

<body>
  <script>		
    (function() {
      var userName = prompt("이름을 입력하세요.");
      document.write("안녕하세요? <span class='accent'>" + userName + "</span>님!");
    }());
  </script>	
</body>

<body>
  <script>		
    (function(a, b){   // 함수 선언을 위한 매개변수
      sum = a + b;      
    }(100, 200));       // 마지막에 함수 실행을 위한 인수 
    document.write("함수 실행 결과 : " + sum);
  </script>	
</body>

✏️ 화살표 함수

ES6 버전부터는 =>표기법을 사용해 함수 선언을 좀 더 간단히 할 수 있는데 이를 화살표 함수라고 합니다.

기본형 => (매개변수) => {함수 내용}

const hi = () => "안녕하세요?"; // 매개변수가 없는 화살표 함수
let hi = user => { document.write (user + "님, 안녕하세요?"); } // 매개변수가 1개인 경우
let sum = (a, b) => a + b; // 매개변수가 2개 이상인 경우

저작자표시 비영리 변경금지

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

[Web/JS] 자바스크립트 - DOM을 이용한 이벤트 처리기 (0)	2024.05.11
[Web/JS] 자바스크립트 - 이벤트와 이벤트 처리기 (0)	2024.05.10
[Web/JS] 자바스크립트 - 함수 (0)	2024.05.10
[Web/JS] 자바스크립트 - 연산자 (0)	2024.05.08
[Web/JS] 자바스크립트 - 자료형 (0)	2024.05.08

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

글 보관함

푸으름

티스토리 뷰