반응형
함수란?
- 자바스크립트에서 함수란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여주는 기능이다.
- 함수는 가독성을 높이며 유지보수에 용이하다. 또 재사용의 편리 또한 있어 자바스크립트에서 매우 중요하다.
함수의 형식과 정의
function 함수명( [인자...[,인자]] ){
코드
return 반환값
}
- 함수는 function 뒤에 함수의 이름이 오고, 소괄호가 따라온다. 소괄호에 인자라는 값이 차례로 들어오는데 이 값은 함수를 호출할 때 함수의 로직으로 전달될 변수다.
- 인자는 생략 할 수 있으며 함수를 호출 했을 때 실행하게 될 부분이 중괄호 안쪽에 온다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
function numbering(){
i = 0;
while(i < 7){
document.write(i);
i += 1;
}
}
numbering();
</script>
</body>
</html>
- 함수의 이름을 numbering()으로 정하였다. 함수 소괄호 안의 인자들이 함수 이름numbering()을 적으면 호출된다.
- 위의 코드 제일 하단에 적힌 numbering()이라는 이름의 함수가 호출되어 결과가 웹에 나와 있는 것을 확인 할 수 있다.
입력과 출력
return
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
function get_member(){
return 'kim';
return 'jin';
return 'seok';
}
alert(get_member());
</script>
</body>
</html>
- 함수 내에서 사용한 return은 return 뒤에 따라오는 값을 함수의 결과로 반환한다. 동시에 함수를 종료시킨다.
- 동시에 함수를 종료시키다보니 위의 코드에 return을 여러개 적어놓았지만 출력되는 것은 맨 처음에 적은 'kim'밖에 나오지 않고 그대로 종료하는 것을 확인 할 수 있다.
인자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
function get_arguments(arg1, arg2){
return arg1 + arg2
}
alert(get_arguments(7, 7));
alert(get_arguments(77, 77));
</script>
</body>
</html>
- 인자(argument)는 함수로 유입되는 입력 값을 의미하는데, 어떤 값을 인자로 전달하느냐에 따라서 함수가 반환하는 값이나 메소드의 동작방법을 다르게 할 수 있다.
- get_argument(arg1,arg2)은 정의된 함수를 실행하는 구문이다. get_argument로 (7, 7)과 (77, 77)을 (arg1, arg2)로 전달하겠다는 의미다.
- 이때 정의된 (arg) 구문에 의해서 변수 arg의 값으로 숫자 (7, 7), (77, 77)이 함수 안으로 전달된다. 즉 rg1, arg2에 차례로 할당된다. 이렇게 전달된 값은 함수 내부로 전달되서 더해진 후에 반환된다.
- 변수 arg1, 2들은 함수 get_argument 안에서만 유효하다.
함수를 정의 하는 다른 방법
var numbering = function (){
i = 0;
while(i < 7){
document.write(i);
i += 1;
}
}
numbering();
- numbering = function ()으로 적용하면 numbering을 function 함수명( [인자...[,인자]] )으로 함수명을 정의하는 것처럼 정의할 수 있다.
- 즉, function 함수명( [인자...[,인자]] )으로 정의한 결과와 똑같이 나온다고 말할 수있다.
반응형
'프로그래밍 개발 > JS 기본 언어' 카테고리의 다른 글
| Javascript 객체(object) 및 객체 지향 프로그램 (0) | 2020.11.06 |
|---|---|
| Javascript 배열(array) (0) | 2020.11.06 |
| javascript 반복문(Loop) (0) | 2020.11.05 |
| Javascript 조건문의 문법 (0) | 2020.11.03 |
| Javascript 비교 연산자 (0) | 2020.11.03 |
댓글