Javascript function

사용자 정의 함수

• 함수 == method == function
• 내장함수() : 자바스크립트 문법으로 이미 만들어져 있는 함수()
• 사용자 정의 함수() : 필요나 요구에 의해 프로그래머가 직접 만들어 사용하는 함수()
• 코드중복의 최소화, 코드의 재사용, 이벤트와 연결
• 사용자 함수는 선언 ( 만든다 ) 했다고 해서 함수내에 코드가 자동으로 계산되지 않는다,
• 선언된 함수는 필요시 해당함수를 호출( call문 )해서 코드를 계산시킨다.
• 함수()의 형식은 총 4가지

ex) 1. 기본함수

function calc(){
            var num1=Number(prompt('첫번째 정수 입력: ',''));
            var num2=Number(prompt('두번째 정수 입력: ',''));

            console.log("두 수의 합:" + (num1+num2));
            console.log("두 수의 차:" + (num1-num2));
            console.log("두 수의 곱:" + (num1*num2));
            console.log("두 수의 나눈 몫:" + (num1/num2));
        }

ex) 2. 매개변수를 갖는 함수

var a1 = Number(prompt('첫번째 정수입니다',''));
var a2 = Number(prompt('두번째 정수입니다',''));
function calc(num1, num2, cnt){
    console.log(cnt+' 개의 정수가 전달되었습니다');
    console.log('두 수의 합:'+(num1+num2));
    console.log('두 수의 차:'+(num1-num2));
    console.log('두 수의 곱:'+(num1*num2));
    console.log('두 수의 나눈 몫:'+(num1/num2));
    }

함수사용

<a href="#" onclick="calc(a1,a2,2);">계산</a>

 

 

 

 

• 함수의 종류 총 3가지
  • 선언적함수
    1. 기본(default)함수
       
       • function 함수명(){ //처리할 코드 작성; }
       • 호출문 : 함수명();
    2. 매개변수를 갖는 함수
       • 매개변수 생성시 var 키워드 사용 불가능
       • 매개변수에 전달되는 값 = 전달인자/파라미터(parameter) 
       • function 함수명(매개변수1, 매개변수2, .....){ //처리할 코드 작성; }
       • 호출문 : 함수명(값1, 값2);
    3. 리턴값을 갖는 함수
       • 호출문 : var 변수  = 함수명();

function 함수명(){
	//처리할 코드;
    return 값 ;
    }

사용법

function calc(){
        var num1 = 100;
        var num2 = 50;
        return Number(num1) + Number(num2);
    }
    alert('두 수의 합:' + calc());
    var sum=calc()+calc();
    alert('두 수의 합:' + sum);

• 매개변수와 리턴값을 갖는 함수(완편된 함수)

function 함수명(매개변수1,매개변수2,......){
	//처리될 코드 작성;
    retrun 값;
    }

• 호출문 : var 변수명 = 함수명(parameter);

• 매개변수 생성시 var 키워드를 갖는다
• function 함수명(매개변수){ //처리할 코드 작성; }

익명함수

var person = function(name, height, weight){ // function person(){}; 와 같은의미
            return name+' 님의 키는 '+height+ ' cm이고, 체중은 '+weight+' kg입니다';
        };
        
        person(); // 호출문

• 함수명을 갖지 않는 함수
• 기본 (default) 함수
• 매개변수를 갖는 함수
• 리턴값을 갖는함수
• 매개변수와 리턴값을 갖는함수(완편된 함수)

가변인자함수

모든 javascript 의 함수는 arguments 매개변수를 가지고있다.

arguments 객체 : 자바스크립트의 모든 함수는 내부에 자동으로 배열 arguments를 갖는다.

매개변수의 개수가 변할 수 있는 함수

function sumAll(){
            var total=0;
            console.log(typeof(arguments)+';'+arguments.length);

            for(var i=0; i<arguments.length; i++){
                total+=arguments[i];
            }
            console.log(total);
        }

        sumAll(1,2,3,4,5,6,7,8,9,10); //매개변수에 여러가지 값을 대입해서 arguments 가 값을 배열형식으로 저장한다

지역 변수의 유효범위

함수의 선언과 변수의 유효범위 *****

  - 지역변수(local 변수) : 각각의 함수 내에서 만들어진 변수는 그 해당 함수에서만 사용할 수 있다.

                                       : 변수의 이름이 동일 하여도 유효범위가 다르면 각각 따로 만들어진다

ex)

function callFunc1() {
            var cnt1=100;
            var cnt2=200;   
         }
         function callFunc2() {
            var result=0;
            result=cnt1+cnt2; // 유효범위를 벗어난 변수이기 때문에 사용 불가
            alert('두정수의 합:' + result);
         }
         callFunc1();
         callFunc2();

-  전역변수(global 변수) : 모든 함수가 함께 공유할 수 있는 변수

                                        : 함수 외부에 선언된 변수

                                       

• 우선순위 : 지역변수 > 전역변수

if 문 fucntion 으로 교체

1.

 var result = Number(prompt('영어 점수를 입력하세요(0~100) ',''));
     var grade='';

     if(result>=90 && result<=100){
        grade='A';
     }else if(result>=80 && result<=89){
        grade='B';
     }else if(result>=70 && result<=79){
        grade='C';
     }else if(result>=60 && result<=69){
        grade='D';
     }else{
        grade='F';
     }

     alert('당신의 학점은 '+ grade +'학점 입니다.');

교체

function input(){
    var result = Number(prompt('영어 점수를 입력하세요(0~100) ',''));
    return result;
}
function process(result){
    var grade='';

    if(result>=90 && result<=100){
        grade='A';
    }else if(result>=80 && result<=89){
        grade='B';
    }else if(result>=70 && result<=79){
        grade='C';
    }else if(result>=60 && result<=69){
        grade='D';
    }else{
        grade='F';
    }
    
    return grade;
}
function output(a){
    alert('당신의 학점은 '+ a +'학점 입니다.');
}

output(process(input()));

2.

var person = prompt('직급코드를 입력하세요. A(과장) B(대리) C(주임) D(신입)',''); 
var pay1 = Number(prompt('본봉을 입력하세요(만원)','')); 
var pay2 = Number(prompt('수당을 입력하세요(만원)','')); 

var rank=''; //직급 (과장~신입)
var bo=0;  //보너스
var total=0; //총급여

if(person == 'A' || person == 'a'){
        bo = 50;
        rank = '과장';
} else if(person == 'B' || person == 'b') {
        bo = 40;
        rank = '대리';
} else if(person == 'C' || person == 'c'){
        bo = 30;
        rank = '주임';
} else if(person == 'D' || person == 'd'){
        bo = 20;
        rank = '신입';
}

total = pay1 + pay2 + bo;

alert('당신의 직급은 ' + rank + '이고, 보너스는 ' + bo + ' 만원 이고, 총 급여는 ' + total + '만원 입니다.');

교체

    var person ='';
    var pay1=0;
    var pay2=0;
    var rank='';
    var bo=0;
    var total=0;

    function input(){
        person = prompt('직급코드를 입력하세요. A(과장) B(대리) C(주임) D(신입)',''); 
        pay1 = Number(prompt('본봉을 입력하세요(만원)','')); 
        pay2 = Number(prompt('수당을 입력하세요(만원)','')); 
    }

    function process(){
        if(person == 'A' || person == 'a'){
                bo = 50;
                rank = '과장';
       } else if(person == 'B' || person == 'b') {
                bo = 40;
                rank = '대리';
       } else if(person == 'C' || person == 'c'){
                bo = 30;
                rank = '주임';
       } else if(person == 'D' || person == 'd'){
                bo = 20;
                rank = '신입';
            }
        total = pay1 + pay2 + bo;
    }
    function output(){
        console.log('당신의 직급은 ' + rank + '이고, 보너스는 ' + bo + ' 만원 이고, 총 급여는 ' + total + '만원 입니다.');
    }
    input();
    process();
    output();