-
자바스크립트 기본 - 함수JavaScript/생활코딩 2018. 11. 15. 17:11
함수 - https://opentutorials.org/course/743/4729
함수(function)는 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 ☆재사용성☆을 높여준다.
함수가 없다면? - 특정한 로직을 여러군데 사용하고 있다고 가정했을 때, 로직이 수정되면 사용되는 곳을 모두 다 수정해주어야 한다.
하지만 특정한 로직을 함수로 만들어 놓고 사용되는 곳에 넣어놓는다면 함수안에 있는 로직을 변경하면 사용되는 곳에 있는 함수들도 다 수정이 된다. 즉 재사용성, 유지보수가 용이하다.
a.함수의 형식
function 함수명( [인자...[,인자]] ){
코드
return 반환값
}
문법만으로는 함수의 형식을 체감하기 힘드므로 직접 사용해보아야 한다.
b. 함수의 정의와 호출
예제
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
/*function 함수명( [인자...[,인자]] ){
코드
return 반환값
}*/
//함수를 정의한 것
function numbering(){
i = 0;
while(i < 10){
document.write(i);
i += 1;
}
}
numbering();
//괄호 ()가 있어야 함수로 인식, 괄호가 없이 numbering만 쓰면 자바스크립트는 변수로 인식.
//함수를 호출하기 때문에 함수numbering 중괄호가 실행됨.
</script>
</body>
</html>
예제를 크롬에서 열게 되면 함수를 실행한 결과가 페이지에 나타난다.
경고창 답
0123456789
c. 입력과 출력
함수의 핵심은 입력과 출력이다. 입력에 따라 출력이 달라진다. return은 함수에서 입력과 출력의 역할을 한다
return
예제2
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
//return의 역할은 1.함수를 끝내는 것과 2.return뒤의 값을 해당 함수의 출력값으로 반환한다.
function get_member1(){
return 'egoing';
}
function get_member2(){
return 'k8805';
}
alert(get_member1()); //함수가 실행되고 return값인 egoing값이 반환되어 alert('egoing');이 호출된다.
alert(get_member2()); //함수가 실행되고 return값인 k8805값이 반환되어 alert('k8805');이 호출된다.
</script>
</body>
</html>
예제를 크롬에서 열게 되면 함수를 실행한 결과가 페이지에 나타난다.
경고창 답
1. egoing
2. k8805
※만약 함수안에 return값이 여러개라면 첫번째 있는 return값만 반환되고 나머지 값들은 무시된다.
- 인자
인자(argument)는 함수로 유입되는 입력값이다.
예제3
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
//주석의 순서대로 읽으면 이해하기 쉬움
function get_argument(arg){ //1.arg는 함수내에서 매개변수, parameter로 선언된다.
return arg*1000; //3.arg=1 일 때 결과값으로 1000을 반환.
}
alert(get_argument(1)); //2.함수 괄호안에 있는 1은 인자. 함수가 호출되면서 arg=1 이라는 값이 함수내에 선언된다.
//4.반환된 값 1000은 alert(1000);으로 호출된다.
alert(get_argument(2));
</script>
</body>
</html>
예제를 크롬에서 열게 되면 함수를 실행한 결과가 페이지에 나타난다.
경고창 답
1. 1000
2. 2000
※인자는 예제처럼 1개가 아닌 2개 이상의 복수로도 사용할 수 있다. 하지만 함수내의 return값은 하나만 가질 수 있다.
d. 함수를 정의 하는 다른 방법
변수에 함수를 넣어서 정의하는 방법
예제4
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
var numbering = function (){ // numbering 이라는 변수에 function으로 시작하는 값을 대입한 것
i = 0;
while(i < 10){
document.write(i);
i += 1;
}
}
numbering(); //변수는 함수를 갖게 되므로 함수처럼 정의하여 사용할 수 있음
</script>
</body>
</html>
예제를 크롬에서 열게 되면 함수를 실행한 결과가 페이지에 나타난다.
경고창 답
0123456789
함수의 정의와 호출을 함께하는 방법 (익명함수)
일회성으로 호출하는 경우에 사용되는 방법
예제5
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
(function (){ // 이름이 없어도 되는 함수표현방식
i = 0;
while(i < 10){
document.write(i);
i += 1;
}
})(); // 함수를 괄호로 감싼 다음 괄호를 붙여줌으로써 함수가 정의되고 호출됨. (function~)();
</script>
</body>
</html>
예제를 크롬에서 열게 되면 함수를 실행한 결과가 페이지에 나타난다.
경고창 답
0123456789
'JavaScript > 생활코딩' 카테고리의 다른 글
자바스크립트 기본 - 객체 (0) 2018.11.16 자바스크립트 기본 - 배열 (0) 2018.11.16 자바스크립트 기본 - 반복문 (0) 2018.11.15 자바스크립트 기본 - 조건문 (0) 2018.11.14 자바스크립트 기본 - 비교 (0) 2018.11.14 댓글