• Q&A
  • 회원가입
  • 로그인

[Basic] JS - Function - JS함수 ★★★★★

2,864  

목차

  1. JS 함수 정의
  2. JS 함수 구문 (Function Syntax)
  3. JS 함수 호출 (Function Invocation)
  4. JS 함수 반환 (Function Return)
  5. 함수 사용 이유 - 동일 계산을 독립변수만 바꿔 쉽게 반복 가능
  6. 함수 호출 명령어 - 독립변수 감싸는 () 연산자
  7. JS에서 함수는 변수값으로도 사용 가능
  8. JS 함수 선언 방법 3가지 (단, 출력 방법은 동일)
  9. JS 지역변수 (Local Variables)
  10. JS 재귀함수 작동방식
  11. JS 함수 관련 주소

 

JS 함수 정의

 

특별한 일을 수행하도록 설계된 코드들의 묶음으로, 
해당 함수를 호출될 때만 실행됨.

 


PS.
 

함수 개념 - SK 님

https://youtu.be/j7x2jQv3JAw

 

함수형 프로그래밍 개념 - SK 님

 


[예제]

 

<p id="homzzang"></p>

<script>
function hz(a, b) {
    return a * b;
}
document.getElementById("homzzang").innerHTML = hz(3, 4);
</script>


결과보기 

결과값: 12

 

JS 함수 구문 (Function Syntax)

1. 형식

 

function 함수이름 (매개변수)  {

    // 실행할 코드

}

 

(예제) 

function hz(a, b) {

    return a*b;

}

 


2. 함수이름 (=함수명)


변수 이름 짓는 법과 마찬가지로, 문자, 숫자, _(밑줄), $(달러기호) 등이 올 수 있음.

 


3-1. 매개변수 (parameters)


함수를 정의할 때 소괄호 ( )에 나열되는 인자.  
매개변수가 여러 개일 경우엔 ,(콤마)로 구분.

 

function 함수이름 (매개변수1, 매개변수2, 매개변수3 .......) 
(예) function hz(a, b)

 


3-2. 독립변수 (arguments)


실제 함수에 의해 매개변수 자리로 호출되는 진짜 값.   
(예) 위 예에서, 3과 4

 

함수이름(독립변수1, 독립변수2, 독립변수3 .......)    (예) hz(3, 4)

※ 주의
함수를 선언할 때 함수이름 (매개변수1, 매개변수2, 매개변수3....) 구조와 같아야 함.

 


3-3. 독립변수 유효범위


함수 내에서 독립변수는 지역변수 (local variables)로 사용
즉, 함수 내에서만 유효함.

 


4. 함수 내용

 

함수에 의해 실행될 내용은 중괄호인 { }로 묶음.

 

function 함수이름 (매개변수1, 매개변수2, .....) {    // function hz(a, b) {
    함수에 의해 실행될 내용  // return a * b;
}

 


5. 함수 용도

 

함수는 다른 프로그램 언어에서의 실행명령이나 서브루틴과 비슷.

※ 서브루틴 (Subroutine) :

한 프로그램 내에서 필요할 때마다 반복 사용 가능한 부분 프로그램.

 

 

JS 함수 호출 (Function Invocation)

 

1.

JS 함수는 뭔가가 함수를 호출할 때만 실행.


① 이벤트 발생 시 (예: 사용자가 버튼 클릭)
② 다른 JS 코드로부터 호출 되었을 때
③ 자동 호출되도록 설계되었을 때.

2. 

자세한 건 나중에 다 알게 됨.   ^__________^ v

 

 

JS 함수 반환 (Function Return)

1. 

JS가 return 명령어를 만나면 함수는 실행을 멈추고, 
독립변수가 들어간 함수 호출문을 만나게 됨.


2. 
독립변수가 들어간 호출문으로부터 함수가 호출되면, 
JS는 코드를  실행하기 위해 함수로 되돌아감.

 


3. 
함수는 함수 내용을 실행시켜 결과값을 산출한 후, 
자신을 호출한  독립변수가 들어있는 호출자에게 보냄.

 


4. 
또 다시 독립변수가 들어간 호출문은 위로 올라가 함수를 실행하는데, 
return 명령문을 만나는 순간 빠져 나옴.

<p id="hz"></p>

<script>
function homzzang(a, b) { 
    return a * b; 
}
document.getElementById("hz").innerHTML = homzzang(3, 4); 
</script>


결과값 12

 

함수 사용 이유 - 동일 계산을 독립변수만 바꿔 쉽게 반복 가능


<p id="homzzang"></p>

<script>
function yamette(s) {  // 함수 yamette를 선언하고, 매개변수는 s 사용
    return (3/4) * (s-4);   // 함수 실행 후, 결과값을 독립변수가 들어있는 호출문으로 보냄
document.getElementById("homzzang").innerHTML = yamette(8);
 // 야메떼 함수를 호출해 독립변수 8을 넣어 실행
</script>


함수 호출 명령어 - 독립변수 감싸는 () 연산자



<p id="homzzang"></p>

<script>
function hz(s) {  // 함수이름과 및 매개변수 선언 
    return (3/4) * (s-4);   // 함수 실행 내용
document.getElementById("homzzang").innerHTML = hz(8);  //  함수 호출해 실행 후, 결과값 3 출력
</script>


1.
hz 자체는 함수이름일 뿐이고,  
( ) 소괄호가 들어가야 해당 함수를 호출한다는 의미.

2.
hz(8)은 독립변수 8을 yamette 함수를 찾아 넣어 실행시킨 후,
결과값을 출력하라는 의미. 

3.
함수 호출문에 독립변수 없이 함수이름과 적으면,
JS는 함수를 실행 안 시키고 함수 코드를 출력시킴.

<p id="homzzang"></p>

<script>
function yamette(s) {  // 함수이름과 및 매개변수 선언 
    return (3/4) * (s-4);   // 함수 실행 내용
document.getElementById("homzzang").innerHTML = yamette;  //  함수 호출해 실행 후, 결과값 3 출력
</script>


결과값 : function yamette(s) { // 함수이름과 및 매개변수 선언 return (3/4) * (s-4); // 함수 실행 내용 }


4.
함수 호출문에 함수를 호출하는 ()는 있지만,
독립변수가 들어있지 않으면 NaN 이라는 에레메세지가 출력됨.

<p id="homzzang"></p>

<script>
function yamette(s) {  // 함수이름과 및 매개변수 선언 
    return (3/4) * (s-4);   // 함수 실행 내용
document.getElementById("homzzang").innerHTML = yamette();  //  함수 호출해 실행 후, 결과값 3 출력
</script>


결과값 : NaN


JS에서 함수는 변수값으로도 사용 가능


[예제 1]

<p id="homzzang"></p>

<script>

document.getElementById("homzzang").innerHTML =
"홈짱닷컴 오픈한 지 " + yamette(2015) + "년째 입니다."; // 함수 호출문은 변수이므로 따옴표 안 붙임.

function yamette(s) {   // 함수 선언 및 매개변수 정의
return s - 2012 + 1;  // 함수 실행 내용
</script>



[예제 2]

<p id="homzzang"></p>

<script>
var year = yamette(2015) ;  // 함수호출문은 변수이므로 따옴표 안 붙임. 호출문이 길어서 간단히 year로 치환
document.getElementById("homzzang").innerHTML =
"홈짱닷컴 오픈한 지 " + year + "년째 입니다.";  // 함수호출문이 출력될 자리에 치환된 변수인 year 사용

function yamette(s) {
return s - 2012 + 1;
</script>


 

JS 함수 선언 방법 3가지 (단, 출력 방법은 동일)

1. 함수가 상단에 정의된 경우, 선언 방법과 무관하게 모두 작동.

 

<script> 

/* 방법1 (호이스트 O : 함수가 나중에 정의돼도 작동 O) ★★★ */

function hz_a(str){

   document.write(str);

}


/* 방법2 (호이스트 X : 함수가 나중에 정의되면 작동 X) ★ */

var hz_b = function(str){

   document.write(str);

}


/* 방법3 (호이스트 X) - 거의 사용 X  */

var hz_c = new Function('str', 'document.write(str)');


hz_a("방법1: 홈짱닷컴 Homzzang.com <br>");

hz_b("방법2: 홈짱닷컴 Homzzang.com <br>");

hz_c("방법3: 홈짱닷컴 Homzzang.com <br>"); 

</script>

 

결과보기 


2. 함수가 하단에 정의된 경우, 방법1만 호이스트 가능.

 

<script> 

hz_a("방법1: 홈짱닷컴 Homzzang.com <br>");

hz_b("방법2: 홈짱닷컴 Homzzang.com <br>");

hz_c("방법3: 홈짱닷컴 Homzzang.com <br>"); 


/* 방법1 (호이스트 O : 함수가 나중에 정의돼도 작동 O) ★ ★★ */

function hz_a(str){

   document.write(str);

}


/* 방법2 (호이스트 X : 함수가 나중에 정의되면 작동 X) */

var hz_b = function(str){

   document.write(str);

}


/* 방법3 (호이스트 X) */

var hz_c = new Function('str', 'document.write(str)');  

</script>

 

결과보기


PS. 방법2 경우, 아래처럼 (즉, 변수 선언은 위에, 함수 정의는 아래에) 해도 호이스트 X

<script> 

var hz_b ;

hz_b("방법2: 홈짱닷컴 Homzzang.com <br>");

 

/* 방법2 (호이스트 X) */

hz_b = function(str){

   document.write(str);

}

</script>

 

결과보기

※ JS함수 성질: 일급 객체로 (변수에 저장하고, 함수의 반환값이나 파라미터로 사용) 가능.
※ 호이스트 : 하단에 정의된 함수가 작동되도록, 위로 끌어올리는 기능.
※ 방법2,방법3 경우엔 변수 이용한 정의라 호이스트 작동 X. (∵  변수는 위에 있을 때 작동.)

 

JS 지역변수 (Local Variables)

 

함수 안에서 선언된 변수.

 


[지역변수 특징]

  

  1. 선언된 해당 함수 안에서만 유효 (=접근) 가능.
  2. 다른 함수에서 동일 변수명으로 변수 사용 가능.
  3. 함수 시작 시 생성되고, 함수 완료되면 삭제됨.
  4. 더 자세히 보기

 


[지역변수 예제]

 

<p id="a"></p>

<p id="b"></p>

<p id="c"></p>


<script>

homzzang();

    

function homzzang() {

  let hz = "홈짱닷컴 Homzzang.com";

  document.getElementById("a").innerHTML =  typeof hz + " " + hz; 

  // 결과값: string 홈짱닷컴 Homzzang.com

}


document.getElementById("b").innerHTML = typeof hz; 

// 결과값: undefined

    

document.getElementById("c").innerHTML = typeof hz + " " + hz;

// 결과값: 아무 값도 안 찍힘.    

</script>

 

결과보기

 

JS 재귀함수 작동방식

 

<script>

function hz(num){

    num++;

    document.write(num+"a<br>");

    if(num == 3) return;

    hz(num);

    document.write(num+"b<br>");

}

 

hz(0);

</script>

 

결과보기


[반환값]

 

1a
  2a
    3a
  2b
1b

 

관련글 (201018) https://sir.kr/qa/381676

 

JS 함수 관련 주소

 

엘리 님 (4+a, 함수 선언・호출・전달) 강의

https://youtu.be/PuG2VW18O1E

 

엘리 님 JS 2. 함수 | 함수 정의, 호출, 그리고 콜백함수

https://youtu.be/-cAPq25P-68

 

모질라 (함수) 강의

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function

 



2021-11-25 (목) 12:11 9일전
재귀 이해하는데 머리 빠지는줄 알았네요 말 그대로 회귀 하는건데 ㄷㄷ 좋은 예시 감사합니당
주소
     
     
2021-11-25 (목) 16:05 9일전
ㅋㅋㅋ 이거 정리할 때 저도 머리 빠지는 줄...
PS.
지역변수 강의가 추가되었습니다. (목차 9번)
주소
찾아주셔서 감사합니다. Since 2012