함수란 무엇일까?
함수는 JavaScript에서 기본적인 구성 블록 중의 하나이며 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차이다. 함수를 사용하려면 함수를 호출하고자 하는 범위 내에서 함수를 정의해야만 한다.
함수의 장점
함수를 사용하면 각 명령의 시작과 끝을 명확하게 구별할 수 있다. 즉, 함수를 사용함으로써 이미 정해진 코드를 함수로서 묶어 실행이 가능하므로 하나의 "실행 블록"으로 여길 수 있다는 것이다.
더불어 함수를 사용하면 같은 기능이 필요할 때 이미 선언한 함수를 이용하여 불필요한 반복 혹은 코드 삽입을 줄일 수 있다. 이를 통해 시간 절약과 코드를 줄여 메모리 절약이 가능하다.
함수의 장점을 요약하면 다음과 같다.
함수의 장점
1. 각 명령의 시작과 끝을 명료하게 파악 가능
2. 같은 기능의 구현이 용이함.
함수의 정의와 실행
내장 함수( ex. alert)뿐만 아니라 프로그램을 작성하면서 필요한 기능, 특히 프로그래밍을 하면서 자주 사용하게 되는 기능은 사용자가 직접 묶어 함수로 선언할 수 있다.
이때, 어떤 명령을 처리해야 할지를 알려주는 것을 '함수를 선언한다.'라고 하며 선언한 함수를 가져와 사용하는 것을 '함수를 실행한다'라고 한다.
| 함수 선언 | 함수가 어떤 명령을 수행할지 선언하는 것. |
| 함수 실행 | 선언한 함수를 가져와 사용하는 것. |
함수를 선언할 때에는 function() 예약어를 사용하며 중괄호 안에 함수에서 실행할 명령어를 묶는다.
function(): 함수 선언 예약어
[실습] 1. 덧셈 함수 선언 및 실행
다음 예제를 통해 함수를 선언하는 방법에 대해 알아보자. 먼저 이전 포스팅을 참고하여 글꼴 크기 변경에 대해 복습한다.
[제어문] #4. while 문
while 문 자바스크립트에서 사용할 수 있는 반복문은 for 이외에도 while문과 do-while 문이 있다. for 문은 카운터 변수를 기준으로 명령을 반복하기 때문에 횟수가 정해져 있는 반복 명령을 실행할 때
udangtangtang-cording-oldcast1e.tistory.com
document.write("<span " + "style='font-size:" + value + "px'>" +"</span>");<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>더하기 프로그램</h1>
<script>
function add(a,b){
var rst = a + b;
return rst;
}
a= parseInt(prompt("더하기 할 첫번째 값을 입력해 주세요."));
b= parseInt(prompt("더하기 할 두번째 값을 입력해 주세요."));
document.write("<span " + "style='font-size:" + 15 + "px'>" + "계산 결과: "+ add(a,b)+"</span>");
</script>
</body>
</html>함수 선언
<script>
function add(a,b){
var rst = a + b;
return rst;
}
a= parseInt(prompt("더하기 할 첫번째 값을 입력해 주세요."));
b= parseInt(prompt("더하기 할 두번째 값을 입력해 주세요."));
document.write("<span " + "style='font-size:" + 15 + "px'>" + "계산 결과: "+ add(a,b)+"</span>");
</script>fuction() 함수 선언 예약어를 통해 함수를 선언한다. 이때 함수 선언 예약어 뒤의 변수는 함수의 이름이 되며, 소괄호 안의 변수는 함수의 인자가 된다. 중괄호 안의 코드는 함수가 실행되었을 때 수행할 코드이다.
함수의 인자 값은 각각 prompt() 함수를 이용해 입력을 받았다. 이때까지 prompt() 함수를 사용할 때에는 문자열을 입력받고 문자열을 출력하는 것이라 출력에 문제가 없었지만, 이번 더하기 프로그램 같은 경우 더하기 계산을 하기 위해서는 문자열을 정수로 변환해야 한다. 이때 사용하는 것이 parseInt() 함수이다.
parseInt() 함수: 문자열을 정수로 변환
parseFloat() 함수: 문자열을 실수로 변환
함수의 선언을 마치고 각각의 변수를 입력했다면 이제 출력 시에 함수를 실행하는 일만 남았다.
document.write() 함수가 사용된 줄을 보면 함수를 직접 실행하여 함수의 인자 값에 a와 b를 넣고 실행했다. 함수에서 결괏값을 return 함수로 반환했으므로 반환 값에는 a와 b가 더해진 rst값이 도출된다.
[실습] 2. 덧셈 함수 선언 및 실행
HTML 파일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>함수</title>
<link rel="stylesheet" href="css/add.css">
</head>
<body>
<button>return문 알아보기</button>
</body>
</html>JS 파일
var num1 = parseInt(prompt("첫 번째 숫자 : "));
var num2 = parseInt(prompt("두 번째 숫자 : "));
var result = addNumber(num1, num2);
alert("두 수를 더한 값은 " + result + "입니다.");
function addNumber(a, b) {
var sum = a + b;
return sum;
}CSS 파일
button {
border:1px solid #ccc;
padding:10px 15px;
margin:20px auto;
font-size:16px;
}
body {
text-align: center;
}'JavaScript > [theory]' 카테고리의 다른 글
| [함수] #3. 함수 표현식 (0) | 2022.10.04 |
|---|---|
| [함수] #2. let과 constant로 변수 선언하기 (0) | 2022.10.03 |
| [제어문] #3. for 문(2) (1) | 2022.09.30 |
| [제어문] #3. for 문(1) (0) | 2022.09.29 |
| [제어문] #2. switch 문 (0) | 2022.09.29 |
