JS_함수(function) 호출방법

▶함수 사용방법

 

함수의 사용은 함수의 정의와 함수의 호출로 나누어지게된다. 

 

 

*함수의 정의

function 함수이름 ( ) {
       ..실행할 구문..
} 

 

*함수의 호출

함수이름 ( );

 

▶파라미터 사용방법

 

*함수의 정의

function 함수이름 (파라미터) {
       ..실행할 구문..
} 

 

*함수의 호출

함수이름 (파라미터);

 

*예시

//함수의 생성
function f(x){
    let z = x 
    document.write("<h1>" + z + "</h1>");
}
 
//함수의 호출
f(1);
f(3);

 

▶다중 파라미터 사용방법

 

*함수의 정의

function 함수이름 (파라미터1, 파라미터2 ... 파라미터n ) {
       ..실행할 구문..
} 

 

*함수의 호출

함수이름 (파라미터1, 파라미터2 ... 파라미터n);

 

* 예시

//함수의 생성
function f(x,y){
    let z = x + y;
    document.write("<h1>" + z + "</h1>");
}
 
//함수의 호출
f(1,3);
f(3,1);

 

▶Return형 함수

 

자신이 호출된 위치로 되돌려 주기 위해서 "return"이라는 키워드를 작성한다.

 

*함수의 정의

function f(x){
     return x + 1;
} 

 

*함수의 호출

let y = f(4); 

 

f(4)로 함수를 호출하면 y에는 +1이 됨으로 최종적으로 y에는 5라는 값이 담기게된다.

 

*예시

 

//함수의 생성
function f(x){
    return x+1;
}
 
//함수의 호출
let y = f(10);
document.write(y);

#Return의 주의사항

 

이는 자바스크립트 함수는 return문을 만나게 되면 그 즉시 실행을 중단한다. 그래서 만약 return 값 없이 처리를 중단하고자 하는 경우에는 return 키워드만 사용해도 된다. 즉, return은 함수의 실행 중단을 뜻한다.

 

값이 없는 리턴결과를 변수에 대입한경우, 정의되지 않는 값인 "undifined"가 대입된다.

 

*예시

//함수의 생성
function f(x,y){
    let z = x+y;
 
//값이 10보다 작을 경우, 실행중단
if(z < 10){
    return;
}
 
return z;
 
}
 
//함수의 호출
let a = f(2,1);
let b = f(10,5);
 
document.writeln("<h1>" +a + "</h2>"); //undifined
document.writeln("<h1>" +b + "</h2>"); //15

 

▶함수 안에서 반복문 사용

 

*예시

 

//함수의 생성
function f(x,y){
    let z = x+y;
 
//값이 10보다 작을 경우, 실행중단
if(z < 10){
    return;
}
 
return z;
 
}
 
//함수의 호출
let a = f(2,1);
let b = f(3,4);
 
document.writeln("<h1>" +a + "</h2>");
document.writeln("<h1>" +b + "</h2>");

 

▶익명함수(일회성호출)

 

*함수의 정의

(function(){
    ..실행할 구문...
})

 

*함수의 호출

( );

 

*예시

 

//함수의선언
(function(){
     let i=0;
     while(i<10){
         document.write(i);
         i += 1;
     }
})
 
//함수의호출
();

 

▶화살표함수

1) 화살표함수란?

화살표 함수 표현은 전통적인 함수표현의 간편한 대안이다. 하지만, 화살표 함수는 모든 상황에서 사용할 수 없다.

2) 화살표함수 사용불가능한 경우

• this, super, methods 사용불가
• new, target 키워드가 없다.
• 생성자 사용불가
• 스코프 지정할 떄 사용하는 call, apply, bind, 메소드를 이용할 수 없다.

=> 이러한 여러 제약사항때문에 화살표함수는 잘 사용되지 않는다.

3) 화살표함수 예시

 

* 예시1: 매개변수가 없는 경우

 

//함수의 정의
let foo = () => console.log('arrow function');
 
//함수의 호출
foo();

 

 

* 예시2: 매개변수가 하나인 경우

 

//함수의 정의
//매개변수가 하나인 경우에는 소괄호를 생략할 수 있다.
let foo2 = x => document.write(x);
 
//함수의 호출
foo2('arrow function2');

 

 

* 예시3: 매개변수가 여러개인 경우

 

//함수의 정의
let foo3 = (a,b) => a+b;
 
//함수의 호출
document.write(foo3 (1,3));

 

 

* 예시4: { } 를 사용했는데 return이 없을 경우

 

//함수의 정의
let foo4 = (a,b) => {a+b};
 
//함수의 호출
document.write(foo4 (1,3)); // undefined

//함수의 정의
let foo5 = (a,b) => {return a+b};
 
//함수의 호출
document.write(foo5 (1,3));

 

 

* 예시6: 여러줄을 작성할 경우

 

//함수의 정의
let foo6 = (a,b) => {
    const c = 3;
    return a + b + c ;
};
 
//함수의 호출
document.write(foo6 (1,3));

 

 

* 예시7: 삼항연산자를 이용한 화살표함수

 

document.write(foo6 (1,3));
 
let age = prompt ('나이를 알려주세요');
let welcome = ( age < 18) ? 
        () => alert('안녕') :
        () => alert('안녕하세요') ;
 
welcome();

 

function confirmFunc(){
    if(confirm('확인(예) 또는 취소(아니오)를 선택해주세요')){
        alert('확인(예)를 누르셨습니다.');
    } else{
        alert('확인(아니오)를 누르셨습니다.');    }
}
 
confirmFunc();

 

 

*예시2: 익명함수를 활용한 경우

 

function ask( question, yes, no){
    if(confirm(question)){
        yes();
    }else{
        no();
    }
}
 
ask("동의하십니까?", 
    function()){alert("동의하셨습니다."),
    function(){alert("취소버튼을 누르셨습니다.")}};

 

 

*예시3: 화살표함수로 호출할 경우

 

 

function ask( question, yes, no){
    if(confirm(question)){
        yes();
    }else{
        no();
    }
}
 
ask("동의하십니까?",
    () => alert("동의하셨습니다."),
    () => alert("취소버튼을 누르셨습니다.")
);