안녕하세요.
이번에는 JavaScript 함수에 대하여 알아보겠습니다.
함수
특정 작업을 수행하기 위해 독립적으로 설계된 코드 집합입니다.
기본 작성 방법
// 함수 생성
function 함수 이름() {
실행 코드
}
// 함수 실행
함수이름();
간단한 함수를 1개 생성 및 실행합니다.
<!DOCTYPE html>
<html lang="en, ko">
<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>JavaScript</title>
<script>
function sesac() {
console.log("sesac hi!");
}
sesac();
</script>
</head>
<body>
</body>
</html>
sesac() 함수를 실행해서 콘솔창에 ‘sesac hi!’라는 메시지를 출력하였습니다.
이번에는 함수명의 () 안에 abc라는 매개 변수를 추가하여 실행해 봅니다.
매개 변수는 함수에서 사용할 값을 함수를 사용할 때 받아서 사용할 때 사용이 됩니다.
<!DOCTYPE html>
<html lang="en, ko">
<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>JavaScript</title>
<script>
function sesac2(abc) {
alert(abc + " hello");
}
sesac2('용산');
sesac2('홍길동');
</script>
</head>
<body>
</body>
</html>
alert() 함수는 경고 창처럼 출력하는 함수입니다.
sesac2(’용산’)을 실행하면 abc에 용산이라는 값이 들어가게 됩니다.
그래서 결과는 용산 hello라는 값이 출력됩니다.
여기서 확인을 누르면 두 번째에 실행한 sesac2(’홍길동’) 함수가 실행돼서
홍길동 hello 가 출력이 됩니다.
그리고 함수를 사용할 때 매개 변수는 1개만 사용할 수 있는 게 아니라 상황에 따라 추가할 수 있습니다.
아래 코드에서는 3개의 매개 변수를 받고 있습니다.
<!DOCTYPE html>
<html lang="en, ko">
<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>JavaScript</title>
<script>
let a = 1;
function sesac3(abc, test, ab) {
console.log(abc + " gg " + test + " hh " + ab);
}
sesac3(a);
sesac3(a, 'power', 999);
</script>
</head>
<body>
</body>
</html>
여기서 출력을 하기 전에
sasac3(a); 처럼 3개를 받아야 하는 함수에서 1개만 매개 변수를 지정한 경우에는
앞에서부터 순서대로 값이 들어가기 때문에 abc에 a의 값이 들어가고
test, ab 에는 아무 값도 안 들어가서 undefined 값을 가지게 됩니다.
두 번째 함수인 sesac3(a, ‘power’, 999) 함수에서는 3개의 매개 변수에 값이 전부 들어가기 때문에 순서대로 abc = a / test = ‘power’ / ab = 999 값이 들어갑니다.
매개 변수에는 지정된 값이 아니라 변수를 사용할 수 있습니다.
여기서는 variable 변수에 hi라는 문자를 저장하고 parmeter3 함수에서 변수 이름을 입력해서 사용하는 코드입니다.
<!DOCTYPE html>
<html lang="en, ko">
<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>JavaScript</title>
<script>
function parameter3(a, b, c) {
console.log("----parameter3----");
console.log("a : " + a);
console.log("b : " + b);
console.log("C : " + c);
}
var variable = "hi";
parameter3(variable, variable, variable);
parameter3(variable, variable);
parameter3(variable);
</script>
</head>
<body>
</body>
</html>
그러면 다음과 같이 출력이 되는 것을 볼 수 있습니다.
더하기, 빼기, 곱하기, 나누기 만들어보기
<!DOCTYPE html>
<html lang="en, ko">
<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>JavaScript 실습</title>
<script>
let no_1 = 1;
let no_2 = 2;
let no_3 = 3;
function add(a, b , c) {
console.log("합계: " + (a+b+c));
}
add(no_1, no_2, no_3);
function sub(a, b) {
console.log("차이: " + (b-a));
}
sub(no_1, no_2);
function divide(a, b) {
console.log('나누기: ' + (a/b));
}
divide(no_1, no_2);
function mul(a, b) {
console.log('곱하기: ' + (a*b));
}
mul(no_1, no_2);
</script>
</head>
<body>
</body>
</html>
이상으로 JavaScript 함수에 대하여 알아보았습니다.
감사합니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 반복문에 대해서 알아보기 (0) | 2023.01.13 |
|---|---|
| [JavaScript] 조건문에 대해서 알아보기 (0) | 2023.01.11 |
| [JavaScript] 연산자에 대해서 알아보기 (0) | 2023.01.07 |
| [JavaScript] 형변환에 대해서 알아보기 (0) | 2023.01.06 |
| [JavaScript] 자료형에 대해서 알아보기 (0) | 2023.01.05 |