'국비지원'의 시작

자바스크립트(JS) 비긴즈 02 함수 선언 방법

개발할 결심 2023. 3. 10. 19:36

자바스크립트에서 함수를 선언하는 방법은 크게 두가지가 존재합니다. 바로 함수 표현식(Function Expression )함수 선언식(Function Declaration)입니다. 그렇다면, 밑에서 직접 각각의 방식으로 함수를 만들어서 살펴보도록 하겠습니다.

		//   자바스크립트에서 함수를 선언하는 방법1 ==> 함수 표현식(Function Expression) 
		// 밑에서 정의한 두 함수 모두 num1 과 num2 를 더한 값을 리턴해주는 함수이다.
        const func_sum = function(num1,num2){
			if (typeof(num1) == "string" ){
            // num1 이 문자열이라면, 더하기가 안되고, 문자열 결합이 되는 것을 방지하기 위한 것 
				num1 = Number(num1);	
				}
			if (typeof(num2) == "string" ){ // 위와 동일 ..
				num2 = Number(num2);	
				}
			 return num1+num2 
         } // end of const func_sum = function(num1,num2){ -----------------------------
         
        // 자바스크립트에서 함수를 선언하는 방법2 ==> 함수 선언식(Function declaration)
	function func_sum(num1,num2){
			if (typeof(num1) == "string" ){
               // num1 이 문자열이라면, 더하기가 안되고, 문자열 결합이 되는 것을 방지하기 위한 것 
			num1 = Number(num1);	
			}
			if (typeof(num2) == "string" ){ // 위와 동일 ..
				num2 = Number(num2);	
			}
			
			return num1+num2
	}// end of 	function func_sum(num1,num2){ ----------------------------------------------

위와 같이, 함수 선언식과 함수표현식을 사용하여 함수를 선언 할 수 있다. 그러나, 사람들은 점점 더 편한 것을 원하기 때문에, 이를 좀 더 간결하게 할 수 있는 방법이 탄생했는 데 그것이 바로 화살표 함수 이다. 화살표 함수란 ? ES6( ECMAScript 6 ) 에서 처음으로 소개된 것으로써 , 화살표( => ) 를 사용하여 함수를 선언하는 방식이다. 다른 말로는 람다 표현식( lambda expression ) 이라고 부른다. 이것은 function 과 return 을 생략하여 더욱 편하게 사용하기 위해서 개발한 것이다. ' 백문이 불여일견 ' 이라는 말이 있듯이, 바로 밑에서 하는 방법에 대해서 살펴보도록 하겠다.

		// 해당 함수는 변수 두 개를 곱한 값을 리턴해주는 함수이다.
        const func_multiply_1 = (num1,num2) => { // 화살표함수를 통해 함수를 선언한 것이다.
			if (typeof(num1) == "string" ){
				num1 = Number(num1);	
				}
			if (typeof(num2) == "string" ){
				num2 = Number(num2);	
				}
			return `${num1*num2}` ;  
            // 앞뒤에 백틱 ` 을 쓰고 백틱 속에 ${}를 넣고 그 안쪽에 변수를 넣어준다.
		};
		
		const func_multiply_2 = (num1,num2) => { return `${num1*num2}` } ;
		// 화살표함수를 통해서 간단하게 나타낸 것이다.
		const func_multiply_3 = (num1,num2) =>  `${num1*num2}` ; 
        // 함수의 내용물이 return 값만 있을 경우에는
		// { }와 return 을 생략할 수 있다.
		
        // 변수 1개에 5를 곱하는 함수
        const func_multiply_4 = num1 =>  `${num1*5}` ; // 매개변수의 개수가 1개만 있을 경우()를 생략할 수 있디.
		
        // 숫자 200를 리턴해주는 함수이다.
		const func_multiply_5 = () =>  {return 200}; ; // 매개변수가 없을 경우 반드시( ) 를 사용해야 하며, return이 있을 경우 반드시 { }를 사용해야한다.
		
        // 이처럼, 함수에서 요구하는 값, 리턴해주는 값이 적어질수록, 화살표 함수는 많은 것을 생략해서
        // 표현할 수 있다.