• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Basic] JS - Function - JS함수 ★★★★★ ※ 일반함수 특징

목차

  1. JS 함수 정의
  2. JS 함수 구문 (Function Syntax)
  3. JS 함수 호출 (Function Invocation)
  4. JS 함수 반환 (Function Return)
  5. JS 함수 위치 (Function Position)
  6. 함수 사용 이유 - 동일 계산을 독립변수만 바꿔 쉽게 반복 가능
  7. 함수 호출 명령어 - 독립변수 감싸는 () 연산자
  8. JS에서 함수는 변수값으로도 사용 가능
  9. JS 함수 선언 방법 3가지 (단, 출력 방법은 동일)
  10. JS 함수 선언 중복 체크 (= 함수 선언 안 된 경우에만 JS 함수 선언)
  11. JS 지역변수 (Local Variables)
  12. JS 재귀함수 작동방식
  13. 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

 

JS 함수 위치 (Function Position)

 

함수 정의를 함수 호출 뒤에 해도 상관 없음.

다만, 함수 정의를 앞에 배치하는 게 직관적.

 


[예제1] - 함수 호출 앞에 함수 정의 가능 O

 

<script>

function add(a,b) {

    var sum = a + b;

    return sum;

}


var res = add(3,4);

document.write(res); // 7

</script>

 

결과보기


[예제2] - 함수 호출 뒤에 함수 정의 가능 O

 

<script>

var res = add(3,4);

document.write(res); // 7


function add(a,b) {

    var sum = a + b;

    return sum;

}

</script>

 

결과보기

 
 

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


<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 함수 선언 중복 체크 (= 함수 선언 안 된 경우에만 JS 함수 선언)

원리: 사용자정의함수명 타입이 function인지 체크해서 아니면 함수 선언.

 

if (typeof myFunction !== 'function') {

  function myFunction() {

    // 함수 내용

  }

}

 

 

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

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

no_profile 디피씨평단14752원 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2021-11-25 (목) 12:11 2년전
재귀 이해하는데 머리 빠지는줄 알았네요 말 그대로 회귀 하는건데 ㄷㄷ 좋은 예시 감사합니당
주소
     
     
홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2021-11-25 (목) 16:05 2년전
ㅋㅋㅋ 이거 정리할 때 저도 머리 빠지는 줄...
PS.
지역변수 강의가 추가되었습니다. (목차 9번)
주소
분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012