CONTENTS
JavaScript
9.함수
1)함수의 정의
2)함수의 호출
3)내장함수
---------------------------------------------------------------
JavaScript
9.함수
1)함수의 정의
(1)개념
-특정 작업이나 계산을 수행하기 위해 정의된 코드 블록으로 특정 기능을 구현한 것으로 '무언가'에 의해 호출되었을 때 실행함. 따라서 여러 프로그램에서 많이 사용하는 것을 하나의 함수로 정의하여 놓으면 매번 반복하여 코딩하지 않고 불러 사용하면 유용함
(2)구조
입력값 → 함수 f(x) → 출력값
(재료) (기능수행) (결과값에 대한)
◎함수 선언 방법
function 함수이름 (매개변수 1,2,3, ... n)
{
실행될 함수 문장
} |
-함수는 function 키워드와 함께 이름 뒤에 괄호가 오며 함수 이름은 변수명과 동일한 규칙을 가짐. 매개변수는 쉼표로 구분하여 포함함. 함수에 의해 실행될 코드는 중괄호({}) 안에 위치함. 정의한다고 바로 실행되지 않고 함수 호출을 해야 실행함/ 함수 선언은 실행문이 아니라서 중괄호 마지막에 세미콜론을 붙이지 않음
함수 기본
<script>
function myFunction(a,b) {
return a * b;
}
document.write(myFunction(4,3));
</script>
◎매개변수
-매개변수는 함수가 정의될 때, 함수의 입력값을 받을 "변수"를 나타냄. 함수 선언에서 사용되며, 함수가 호출될 때 전달될 값을 지정함
◎인자값(인수)
-호출문이 함수에게 전달하는 "값". 매개변수에 대응하는 값으로, 함수 호출시 사용됨. 인수와 매개변수는 1:1 대응관계를 이루면서 매개변수에 값을 전달함
◎가변 인자 함수
-일반적으로 프로그래밍 언어에서는 인수와 매개변수가 1:1 대응관계를 가짐. 따라서 다른 언어에서는 인자의 수와 매개변수의 수가 일치하지 않으면 다른 함수로 인식됨. 그러나 자바스크립트는 1:1 대응관계를 유지하지 않아도 인수를 매개변수에 할당할 수 있음. 인수는 함수를 호출할 때 호출 함수에 나열된 값의 리스트.
*매개변수 기본 원칙
1.자바스크립트는 매개변수에 대한 데이터 유형을 지정하지 않음
2.자바스크립트 함수는 받은 인수의 수를 확인하지 않음
3.함수 이름은 같아도 매개변수가 여러가지인 경우 가장 맣은 매개변수를 가지고 있는 함수에만 호출 함수가 적용됨
-인수보다 매개변수 개수가 많으면 초과된 매개변수는 'undefined'라고 지정되고, 반대로 인수가 많으면 초과된 인수는 무시함
매개변수_인수
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function print (x,y) {
document.write(x + "가 " +y+ "개 있습니다." + "<br>");
}
</script>
</head>
<body>
<script>
print('사과', 10);
print('사과'); //초과된 매개변수 undefined
print('사과', '수천', 500, "완판"); //초과된 인수 무시
</script>
</body>
여러 매개변수
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function print(x,y) {
document.write(x + "가 " +y+ "개 있습니다." + "<br>");
}
function print(x) {
document.write(x + "를 판매한다." + "<br>");
}
function print(a,b,c,d) {
document.write(a + "가 " +b+ "개 있으며, 단가는" +c+ "원이며," +d+ "가 되었다." + "<br>");
}
</script>
</head>
<body>
<script>
print("사과", 10);
print("사과");
print("사과", "수천", 500, "완판"); //제일 많은 매개변수 호출
</script>
</body>
undefined 매개변수에 값 할당하기
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function print(fruit, count) {
if(count == undefined) {
count = 10;
document.write(fruit + "가 " + count + "개 있습니다.");
}
}
</script>
</head>
<body>
<script>
print("사과");
</script>
</body>
◎초과된 인수
-대부분 함수는 매개변수를 정의하여 인수를 받아들이도록 준비함. 그러나 간혹 매개변수를 정의하지 않고 함수를 선언할 필요가 있음. 이때 인수로 넘어온 값들을 함수에서 활용하고자 할 때에는 자바스크립트에서 'arguments'라는 객체를 이용하며, 이들 인수는 'arguments'의 배열 값의 형태로 활용함
arguments
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function add() {
let len = arguments.length;
if(len < 2) {
document.write("2개 이상의 숫자를 입력하세요.");
}
else {
let sum = 0;
for(let idx in arguments) {
sum = sum +arguments[idx];
}
return sum;
}
}
</script>
</head>
<body>
<script>
document.write('add()의 결과: '+add() + "<br>");
document.write('add(100)의 결과: '+add(100) + "<br>");
document.write('add(100, 200)의 결과: '+add(100, 200) + "<br>");
document.write('add(100, 200, 300, 400, 50)의 결과: '+add(100, 200,300, 400, 50) + "<br>");
</script>
◎배열, 객체
-함수의 인수에는 배열이나 객체가 올 수 있음
배열, 객체 매개변수
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function showMe(a,b) {
document.write(a[0] + "가 " + a[1]+ "개 있습니다." + "<br>");
document.write("나는 " + b.car + "를 타고" + b.color + "이다." + "<br>");
}
</script>
</head>
<body>
<script>
let array = ["사과", 10];
let obj = {"car":"BMW", "color":"black"};
showMe(array, obj);
</script>
</body>
◎Function() 생성자
-Function() 이라는 자바스크립트 내장 함수 생성자를 사용하여 런타임 중에 함수를 정의하여 사용할 수 있음
생성자
<script>
let myFunction = new Function("a", "b", "return a*b");
document.write(myFunction(4,3));
</script>
</body>
◎return
-함수에서 return은 해당 함수의 실행을 종료하고, 호출한 곳으로 값을 반환하는 역할을 함. return문이 실행되면 함수의 실행 흐름이 중단되고, return 뒤에 지정된 값이 함수 호출 위치에 전달됨. return문이 없거나 return문 뒤에 변수가 없으면 undefined를 반환함
return
<script>
function myFunction(a,b) {
return a*b;
}
let x = myFunction(4,3)*2;
document.write(x);
</script>
◎함수 자료형
-변수의 자료형에 함수가 포함되어 있음.변수에 함수 이름을 저장하면 그 변수는 함수 이름이 그대로 반영됨.
함수 자료형
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function helloworld() {
alert("Hello World");
}
</script>
</head>
<body>
<script>
let view = helloworld;
view();
document.write(view);
</script>
</body>
◎무명 함수
-함수의 이름을 부여하지 않고, 함수를 변수에 할당하듯이 선언된 함수를 무명함수(이름이 없는 함수)하고 함. 무명 함수는 주로 일회성으로 사용되거나(이벤트 처리 함수로 이용될 때), 다른 함수의 인자로 전달될 때 유용함. 명시적 함수와 다른점은 중괄호 다음에 세미콜론이 있음(주의!)
let 변수 = function(인자1, ... ,인자n) {
함수본문
return문
}; |
noname
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function helloworld01(){ //전역함수 : 선언 후 호출, 선언 전 호출 : 잘 작동
alert("Hello World 01");
} //함수 선언문-> 객체 생성됨, 객체 생성이 된 주소를 담고 있는 곳: helloworld01
let helloworld02 = function(){ //전역변수 : 선언부가 모두 메모리 올라가고, 위에서 아래로 코드 수행될 때 연산(fuction 객체가 helloworld02 변수에 대입)이 이루어진다.
alert("Hello World 02");
}; //함수 표현식-> 객체 생성됨, 객체 생성이 된 주소를 담고 있는 곳: helloworld02
</script>
</head>
<body>
<script>
helloworld01(); //식별자 + () : 식별자 내용에 해당하는 함수를 호출하겠다
helloworld02(); //식별자 + () : 식별자 내용에 해당하는 함수를 호출하겠다
</script>
</body>
◎선언 순서
선언 순서
<body>
<script>
helloworld01();
function helloworld01() {
alert("Hello World 01");
}
helloworld02();
let helloworld02 = function() {
alert("Hello World02");
}
</script>
</body>
-명시적 함수의 경우, 함수의 선언이 함수 호출 이후에 있어도 오류가 발생하지 않지만, 함수 표현식은 먼저 호출하고 나중에 함수를 선언하면 결과를 제대로 출력하지 못하는 오류가 발생함.
-이는 명시적 함수의 경우 <script>를 실행할 때 호스팅하여 함수를 상단으로 올림. 따라서 함수 어디에 선언하여도 호출에 영향을 미치지 않음. 반면, 함수 표현식은 함수가 변수에 할당되는 대입문임. 따라서 대입문이 실행되어 함수가 변수에 할당되어야만 그 변수를 함수 객체의 개념에서 접근할 수 있음. 고로 함수를 <head>섹션에 기술할 것 .
◎즉시 실행
(function() {
실행할 구문;
})(); |
일회용
<script>
(function () {
console.log("이 함수는 즉시 실행됩니다.");
})();
</script>
2)함수의 호출
-자바스크립트 함수는 함수가 정의될 때 함수 내의 코드가 실행되지 않고, 함수가 호출될 때 함수 내부의 코드가 실행됨. 함수의 호출은 다음의 경우에 발생함
1.이벤트가 발생할 때(ex. 사용자가 버튼을 클릭할 때)
2.자바스크립트 코드에서 호출할 때
3.자체(재귀 함수) 호출할 때
-함수를 호출할 때에는 함수명과 인수가 요구됨. 인수는 매개변수와 1:1 대응관계를 가지고 매핑됨. 함수 내에서 매개변수는 함수 스코프 변수로 적용함.
(1)함수 호출에서 괄호의 사용
호출1
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
document.write(toCelsius(77));
</script>
(2)함수 안에서 외부 함수 호출
-함수 내부는 일반적인 프로그램 코드 부분과 동일하므로 함수 외부에 있는 다른 함수를 호출할 수도 있음. 이때 호출되는 외부 함수는 다른 어느 위치에서도 호출이 가능하므로 전역함수라고 함.
호출2
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function square(x,y) { //함수1
let suml
sum = (x*y)/2;
return sum;
}
function display(a,b) { //함수2 : 서로 다름, square(a,b)로 호출
document.write("삼각형의 면적: " + square(a,b));
} //a, b 변수 값이 바뀔 수 있는 것을 저장
</script>
</head>
<body>
<script>
display(100,200);
</script>
</body>
(3)함수 안에서 내부 함수 호출(중첩함수)
-호출된 내부 함수는 함수 내부에서만 호출되지 다른 곳에서는 호출되지 않는 지역 함수에 해당됨
호출3
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function area(x,y) { //외부함수
let claculate = function(a,b) { //내부함수
sum = (x*y)/2;
return sum;
}
}
let result = claculate(x,y);
document.write("삼각형의 면적 : " + result);
</script>
</head>
<body>
<script>
area(100,200);
document.write("삼각형의 면적 : " + calculate(x,y)); //호출되지 않는다.
</script>
</body>
◎콜백 함수
-자바스크립트는 함수를 변수로 저장(함수 표현식) 할 수 있기 때문에 함수 표현식에 의한 변수를 함수의 인수로 사용하여 매개변수에 전달할 수 있음. 이때 함수의 매개변수에 전달되는 함수 표현식의 변수인 인수를 콜백 함수라고 함
콜백함수
<script>
function callBack(x) { //callBack : 고차함수 : 매개변수로 함수를 전달받는 함수
for(let i = 1; i <= 10; i++){
x(i); //함수 x를 실행하겠다.
}
}
var greeting = function(i) {
document.write('Hello JavaScript World' + "<br>");
}
callBack(greeting); //greeting : 콜백함수 : 인수로 전달되는 본인
</script>
3)내장함수
-자바스크립트가 자체적으로 제공하는 함수를 내장 함수라고 함. 내장함수는 이미 시스템에서 정의되어 있기 때문에 사용자가 별도로 정의하지 않고 주어진 원칙에 따라 사용하면 되는 함수임. 대표적인 내장 함수에는 alert()가 있음
◎eval()
-주어진 문자열을 JavaScript 코드로 해석하고 실행함
eval()
<script>
let eval_string = "20+15";
document.write("결과값 : " + eval(eval_string));
</script>
◎parseInt(), parseFloat()
parsaInt(n) 함수는 'n'이 숫자나 문자로 구성되었을 때 숫자 부분만 지정한 진법으로 변환하는 함수임. 즉, 입력된 문자열에 있는 숫자 부분만을 정수 또는 2진수, 8진수, 16진수 등으로 바꾸어 반환해주는 함수임
parseInt()
<script>
let num_str1 = "12";
let num_str2 = "12.34";
let num_str3 = "1234567";
let num_str4 = "1.234e2";
let num_str5 = "0x1234";
document.write("결과값 : " + parseInt(num_str1) + "<br>");
document.write("결과값 : " + parseInt(num_str1, 8) + "<br>");
document.write("결과값 : " + parseInt(num_str2, 8) + "<br>");
document.write("결과값 : " + parseInt(num_str3) + "<br>");
document.write("결과값 : " + parseInt(num_str4) + "<br>");
document.write("결과값 : " + parseInt(num_str5) + "<br>");
</script>
parseFloat(String);
-parseFloat() 또한 숫자형 문자열을 입력받아 부동 소수점으로 변환하여 그 값을 반환해주는 함수임
parseFloat()
<script>
let num_str1 = "12";
let num_str2 = "12.34";
let num_str3 = "1.234e2";
let num_str4 = "1.23abcd";
document.write("결과값 : " + parseFloat(num_str1) + "<br>");
document.write("결과값 : " + parseFloat(num_str2) + "<br>");
document.write("결과값 : " + parseFloat(num_str3) + "<br>");
document.write("결과값 : " + parseFloat(num_str4) + "<br>");
</script>
◎isFinite(), isNaN()
-위 함수의 결과는 true 또는 false임
-isFinite()는 주어진 값이 유리수인지 아닌지 여부를 판단하는 함수임. 값이 유리수일 경우 true, 아닐 경우 false를 그 결과 값으로 반환함
isFinite()
<script>
let str1 = "1234e5";
let str2 = "123456";
document.write("결과값: " + isFinite(str1) + "<br>");
document.write("결과값: " + isFinite(str2) + "<br>");
</script>
-isNaN()은 주어진 값이 숫자인지 아닌지 여부를 판단하는 함수임. 값이 숫자일 경우는 'false', 아닐 경우는 'true'를 그 결과 값으로 반환함
isNaN
<script>
let str1 = "1234e5";
document.write("결과깂: " + isNaN(str1) + "<br>");
</script>
◎Number(), String()
-Number() 함수는 문자열을 숫자로, String() 함수는 숫자를 문자열로 변환함
Number(), String()
<script>
let num1 = 12;
let num2 = 34;
let num1_str = 12;
let num2_str = 34;
document.write(String(num1) + String(num2));
document.write(String(num1_str) + String(num2_str));
</script>