1함수란?
-함수(프로그램적)
함수(function)란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.(캡슐화,모듈화)
우리가 따로 만들어 놓고 붙여넣기만 하면되는 것이라 생각하면 쉽다.
-함수의 형식
function 함수명( [인자...[,인자]] ){
코드
return 반환값
}
// 함수이름으로 호출해서 그안에 내용을 사용할 수 있다
-함수의 정의와 호출
함수는 function 뒤에 함수의 이름이 오고, 소괄호가 따라온다.
function numbering(){// 함수정의 및 내용 입력
document.write(1);
}
numbering();// 함수호출 () 꼭 넣준다
-결과// 함수를 한번 호출
1
지금은 한줄을 위해 함수를 만들었지만 100줄정도 된다 생각하면 만들어놓고 한줄만 써주면
간편하게 쓸 수 있다 .
소괄호에 인자라는 값이 차례로 들어오는데 이 값은 함수를 호출할 때 함수의 로직으로 전달될 변수다.
인자는 생략 할 수 있다. 함수를 호출 했을 때 실행하게 될 부분이 중괄호 안쪽에 온다.
다음 예제를 보자. 이 함수의 이름은 numbering이고, 내용은 0부터 9까지를 화면에 출력한다.
function numbering(){
i = 0;
while(i < 10){
document.write(i);
i += 1;
}
}
numbering();
- numbering이라는 이름의 함수가 호출되고 있는 것이다.
numbering();
-결과
0123456789
numbering();을 여러번 실행하면서 그 결과를 살펴보자.
2.함수의 효용성
위에서 말했듯이 함수를 사용하지 않고 0부터 9까지를 5번 출력해야 한다면 어떻게 해야할까?
var i = 0;
while(i < 10){
document.write(i);
i += 1;
}
var i = 0;
while(i < 10){
document.write(i);
i += 1;
}
var i = 0;
while(i < 10){
document.write(i);
i += 1;
}
var i = 0;
while(i < 10){
document.write(i);
i += 1;
}
var i = 0;
while(i < 10){
document.write(i);
i += 1;
}
이러한 코드가 나온다 만약 이것을 1000번 해야 한다면? 각각의 로직이 1000 줄에 육박한다면?
그리고 그 내용을 수정해야 한다면? 암담한 느낌이 드는가? 함수를 사용한다면 이러한 문제를 현저히 줄일 수 있다.
아래의 예제를 보자. 결과는 같지만 로직은 단 한번만 등장한다.
function numbering(){
var i = 0;
while(i < 10){
document.write(i+"<br/>");
i += 1;
}
}
numbering();
numbering();
numbering();
numbering();
numbering();
-1000번 코드
function numbering(){// 함수정의 및 내용 입력
var i = 0;
while(i < 10){
document.write(i+"<br/>");
i += 1;
}
}
for (var i =0 ; i > 1000; i--) {
numbering();
}
근데 반복문도 함수에 개념이기 때문에 for 문안에 while이 들어와 도 문제는 없다
하지만 함수가 갖고 있는 효요과 반복문이 가지고 있는 효용은 좀 다르다
-반복문은 기계적으로 일정한 반복을 그자리에서 실행할때 의미가 있다
-함수는 반복적으로 실행되는 로직이 여러가지 맥락에서 반복해서 사용해야하는 경우에는 함수가 의미가있다
즉 함수 는 여기저기서 실행 될때 유용하다
그래서 함수의 핵심은 재사용성이다 = 동일한 코드가 있을때 여러곳에서 사용할 수 있는 형태로 만드는것(좋은 부품)
재사용성이 높아지만 수정,변경,개선 등 때 하곳에서만하면 여러곳이 다바뀐다.유지보수와 가독성이 좋아짐
다른사람에게 코드 인수인꼐가 쉬워진다.
재사용성-가독성-유지보수는 프로그램에 있어서 핵심적인 부분이다
왜냐하면 코드는 점점 복잡해지고 점점 많은사람들이 사용하고 오랜시간동안 이용되기 때문에
3.함수의 입력
함수의 핵심은 입력과 출력이다. 입력된 값을 연산해서 출력하는 것이 함수의 기본적인 역할이다. 다음은 함수에서 입력과 출력의 역할을 하는 구문들에 대한 설명이다.
함수는 (function 기능 작용 )
한자로하면 함= 상자 함
함수라는 상자 안에다 값을 주면 그값에따라서 어한 값이 출력 되는 상자 라는 의미를 가지고 있다
입력에 따라서 출력이 달라지는 것은 function Machine이라함
-return(출력은 return이라는 키워드를 씀)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <script type="text/javascript"> function get_member1(){ return 'egoing'; /*return는 두가지 기능을 하는 데 1.함수를 종료시킨다 return뒤에나오는 코드는 실행되지않는다 2.return 값을 함수에 출력값으로 반환하게된다 return 'egoing';=return뒤에 출력 값'egoing'; 반환한다 함수 밖으로 */ } function get_member2(){ return 'k8805'; } //이부분은 egoing이된다 alert(get_member1()); //이부분은 k8805가 된다 alert(get_member2()) </script> </body> </html> | cs |
return 뒤에는 어떤것도 동작하지 않는다 이것은 출력이다
4.함수의 출력
인자란?
인자(argument)는 함수로 유입되는 입력 값을 의미하는데, 어떤 값을 인자로 전달하느냐에 따라서 함수가 반환하는 값이나 메소드의 동작방법을 다르게 할 수 있다. 다음 예를보자. 결과는 1,2이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <script type="text/javascript"> function get_argument(arg){//arg = 변수 arg =1 이다 //alert(get_argument(1)); return arg;//1을 출력한다 } alert(get_argument(1));// 여기서 1을 입력하면 arg 변수에 1이 저장 //1이 호출된다 alert(get_argument(2)); //2가 호출된다 </script> </body> </html> | cs |
get_argument(1)은 8행에서 12행 사이에 정의된 함수를 실행하는 구문이다. 14행의 1은 get_argument로 1이라는 값을 전달하겠다는 의미다. 이 때 8행에 정의된 (arg) 구문에 의해서 변수 arg의 값으로 숫자 1이 함수 안으로 전달된다. 이 변수 arg는 함수 get_argument 안에서만 유효하다. 이 관계는 아래와 같다.
이 구문에서 'arg=매개변수 ,parameter 1 =인자 argument' 서로 썩어쓰긴하지만 엄격하게 나눌수 있다
복수의 인자
그럼 여러개의 입력 값을 받고 싶다면 어떻게 해야할까? 다음 예제를 보자. 결과는 30과 50이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <script type="text/javascript"> //인자와 매개변수 가 2개 function get_arguments(arg1, arg2){//arg1=10 arg2=20 return arg1 + arg2//arg1=10 + arg2=20=30 } alert(get_arguments(10, 20));//30 alert(get_arguments(20, 30)); </script> </body> </html> | cs |
위의 그림으로 나타내면 아래와 같다. 즉 함수를 호출 할 때 전달한 인자 10과 20은 함수의 선언부(1행)의 arg1, arg2에 차례로 할당된다.
이렇게 전달된 값은 함수 내부로 전달되서 더해진 후에 반환된다.
5.다양한 함수
자바스크립트는 함수를 정의하는 또 다른 방법을 제공한다. 다음 예제를 보자.
아래 방법은 함수를 정의 하는 또 다른 방법이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <script type="text/javascript"> //함수 정의 방법 //1.함수 변수에 대입 var numbering = function (){// 함수에 대한 정의 부분이 numbering 에 대입되는것 i = 0; while(i < 10){ document.write(i); i += 1; } } //2.일반 함수 생성 호출 function numbering(){ i = 0; while(i < 10){ document.write(i); i += 1; } }//이렇게 함수를 정의 한것과 똑같은 결과를 가져온다 numbering(); //3.정의 호출 동시문 (function (){//일단 함수가 정의가 되고 i = 0; while(i < 10){ document.write(i); i += 1; } })();// 호출 한다 즉 익명함수라한다 이름이 없고 바로 실해이되기때문 // 1회성으로 주로 사용한다 </script> </body> </html> | cs |
'생활코딩 JavaScript' 카테고리의 다른 글
| 객체-1.객체의 소개와 문법 2.객체와 반복문 3.객체지향 프로그래밍 (0) | 2018.11.25 |
|---|---|
| 배열-1.배열의 문법 2.배열의 효용성 3.배열의 사용-배열과 반복문 4.배열의 조작-추가 5.배열의 조작-제거 ,정렬 (0) | 2018.11.19 |
| 반복문-1.반복문의 기본문법-while 2.반복조건 3.for문 4.반복문의 효용성 5.반복문의 제어 6.반복문의 중첩사용과 디버거 (0) | 2018.11.17 |
| 조건문-4.논리연산 5.Booklean의 대체재 (0) | 2018.11.17 |
| 조건문-1.조건 문이란?(if,else)2.else,else if 3.조건문의 응용 (0) | 2018.11.16 |
