ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • JavaScript 함수(Method)
    프로그래밍/JavaScript 2022. 9. 29. 07:42
    728x90

     

     

    함수는 하나의 특별한 목적의 작업을 수행하도록 설계된 독릭적인 블록을 의미한다. 필요할때 마다 함수를 호출하여 해당 작업을 반복해서 수행할 수 있기 때문에 코드를 재활용에 용이하다.

     

    함수는 먼저 선언하고 그 함수를 호출하는 방식으로 선언하는 방법으로는 함수 선언식 함수 표현식이다.

     

    // 함수 선언식
    function 함수명(매개변수1, 매개변수2 .. ){
        ...
        return 값;
    }
    // 함수 표현식
    const 함수명 = function(매개변수1, 매개변수2 .. ){
        ...
        return 값;
    }

     

     

    웹 브라우저에서 자바 스크립트 소스를 해석할 때에는 함수 선언 부분을 가장 먼저 하기 때문에 함수를 선언만 해놓으면 선언한 위치에 상관없이 함수 호출이 가능하다.

    addNember();
    
    function addNumber(){
    }
    function addNumber(){
    }
    
    addNember();

    위 처럼 코드들은 함수 선언과 호출의 위치가 다르지만 동일하게 실행되는 코드로, 선언의 위치는 프로그램 흐름에 영향을 주지않는다.

     

     

     

    함수를 어떻게 사용하는지 예제를 통해 알아보자.

    function func1(){
    	console.log('func1 함수 호출')
    }
    function func2(num){
    	console.log(`전달 받은 매개변수의 값 : ${num}`)
    }
    function func3(start, end){
        let sum = 0;
        for(let i=start ; i<=end ; i++){
        	sum += i;
    	}
    	console.log(`${start}부터 ${end}까지의 총합은 ${sum}입니다`)
    }
    
    func1(); // func1 함수 호출
    func2(10); // func2 함수 호출
    func3(1, 100); // func3 함수 호출

     

     

     

    위 처럼 함수는 자바처럼 함수 호출간 매개변수를 보내고 함수는 매개변수를 받아 사용할 수 있다.

     

     

    함수의 활용

    함수를 호출할 때 일반적으로 위 예제에서 보다시피 매개변수를 정해주어 함수에서 사용한다. 다른 방법으로 매개변수 기본값을 정해주는 방법과 매개변수를 가변적으로 정하는 방법이 있다.

     

    매개변수를 정하지 않으면 대신 함수 선언시 입력한 기본값(디폴드값)을 변수에 저장이 가능하다. 또한 생략 접두어를 선언시 사용하여 특정 위치의 인수부터 마지막 인수까지 한번에 지정하여 배열로 활용이 가능하다.

    function func1(name='무명'){	
    	// 매개변수에 아무것도 들어있지 않는다면 기본값으로 '무명'을 집어넣겠다는 의미
        console.log(`당신의 이름은 ${name}입니다.`);
    }
    
    function func2(num1, ...num2){	
    	// num1까지는 정상적으로 매개변수를 받고 그 외에 나머지는 배열로 처리하겠다는 의미
        console.log(`num1의 값 :  ${num1}`);
        console.log(`num2의 값 :  ${num2}`);
    }
    
    function func3(...jumsu){ // 모든 매개변수를 배열로 처리
        let total = 0;
    
        for(let i in jumsu){
            total += jumsu[i];
        }
        console.log(`총점 : ${total}`);
    }
    
    func1('홍길동');
    func1(); 
    
    func2(10, 30, 20, 70, 100);
    func3(80,90,70, 100, 20);

     

     

     

     

     

    728x90

    '프로그래밍 > JavaScript' 카테고리의 다른 글

    JavaScript 변수의 범위(scope)  (0) 2022.10.01
    JavaScript 화살표 함수  (0) 2022.09.30
    JavaScript 배열  (0) 2022.09.28
    JavaScript 반복문  (0) 2022.09.27
    JavaScript 조건문  (0) 2022.09.27

    댓글

Designed by Tistory.