반응형
▶ 함수
- JavaScript에서 기본적인 구성 블록 중의 하나다.
- 작업을 수행하거나 값을 계산하는 문장 집합이다.
- 함수를 사용하려면 함수를 호출하고자 하는 범위 내에서 함수를 정의해야 한다.
- 함수는 global 영역에 존재한다.
함수 원형 (Function Prototype)
- 함수 이름 : 호출을 위한 이름이다.
- 파라미터
- 필수사항과 옵션사항이 있다.
- 파라미터의 개수는 가변 한다.
- 변수 선언 키워드가 없다. (const, let)
- 리턴형은 생략한다.
- 리턴 값
함수의 종류
- 선언 함수 : 함수의 이름이 있다
- 익명 함수 : 함수의 이름이 없다. (확장)
* 익명 함수와 선언적 함수의 메커니즘은 완전히 같다.
- 익명 함수
- 형식 : function() {}
- ES6의 방식이다.
사용 예
<script>
const add = function(a, b)
{
console.log(a);
console.log(b);
return a+b;
}
let result = add(3, 4);
alert(result);
</script>
- 선언적 함수
- 형식 : function function_name() {}
사용 예
<script>
function add2(a, b)
{
console.log(a);
console.log(b);
return a+b;
}
let result = add2(3, 4);
alert(result);
</script>
가변 파라미터
- 가변적인 파라미터 개수를 처리하기 위한 기법
- 첫번째 파라미터가 어떤 타입인지 검사하여 로직을 구성한다.
- 형식 : function function_name(…rest_parameter) { }
- Ex) 버블소트를 아래왜 같이 호출하고자 할 때 가변 사용한다.
-
<body> <script> let lesurt result = bubbleSort(25, 1, 56, 2, 6) console.log(result) result = bubbleSort([43, 7, 1, 3]) console.log(result) </script> </body>
-
가변 파라미터와 일반 파라미터의 조합
- 제일 뒤쪽에 넣어야한다.
<script> function testFunc (a, b, ...items) { console.log(a); console.log(b); console.log(items); } testFunc(1, 2); testFunc(1, 4, 2, 65); testFunc(4, 2, 3, 165); </script>
가변 파라미터의 type
1. ar 배열의 타입을 확인한다.
<body>
<script>
const ar = [1, 2, 3]
console.log(typeof(ar));
</script>
</body>결과는 object가 나온다.
2. printFuntion 함수의 데이터 타입을 확인한다.
<body>
<script>
const printFunction = function(...items)
{
console.log(typeof(items)); //데이터 타입을 확인한다.
console.log(items);
}
printFunction(1);
printFunction(1, 2);
printFunction(1, 2, 3);
</script>
</body>마찬가지로 object라는 결과가 나오며 이는 배열이라는 결과를 얻을 수 있다.
3. 추가적인 데이터를 입력하여 데이터 타입을 확인한다.
<script>
const printFunction = function(...items)
{
console.log(typeof(items));
console.log(items);
}
printFunction(1);
printFunction(1, 2);
printFunction(1, 2, 3);
printFunction(1, 2, 3, true, 'abc');
</script>결과 어떤 값이 들어와도 배열인 것을 확인 할 수 있다.
* 그렇다면 배열안에 들어온 elemet의 type은?
☞ 예제
※ 가변 파라미터를 참고하여 최댓값을 구하는 함수를 설계하여 출력하시오.
<body>
<script>
const getMax = function(...items)
{
let Max = items[0]
for(let i = 0; i < items.length; i++)
{
if(Max < items[i])
{
Max = items[i];
}
}
alert(Max);
}
getMax(1, 5, 132, 8, 4);
getMax(99, 24, 5665);
</script>
</body>
※ 값을 입력받아 최댓값을 구하고 숫자가 아닌 값이 입력되면 잡아내는 코드를 만드시오.
<body>
<script>
const getMax = function(...items)
{
let Max = items[0]
for(let i = 0; i < items.length; i++)
{
if(typeof(items[i]) !== 'number') //Gard cord : 숫자가 아닌것을 잡아내는 코드.
{
console.log(items[i]);
alert('비교 할 수 없습니다.')
return null;
}
else
{
if(Max < items[i]) //숫자라면 최댓값을 구하는 코드.
{
Max = items[i];
}
}
}
alert(Max);
}
let result = getMax(1, 5, 132, 8, 4, 41, 4813, 61288, 'HI');
</script>
</body>
</body>
let result = getMax(1, 5, 132, 8, 4, 41, 4813, 61288);
▶ 재귀함수
정의 단계에서 자신을 재참조하는 함수다.
☞ 예제
※ n!(Factorial) 을 구하는 함수를 작성하시오.
<body>
<script>
let fac = function(num) //n!구하는 함수
{
if(num === 1)
{
return num;
}
else
{
return(num) * fac(num-1);
}
}
let result = fac(6) //n!입력
alert(result)
</script>
</body>
▶ 디버깅
- Break-point
- Sources탭으로 이동후 html선택
- 해당 라인에서 클릭
- Step into (F11)
- Function 내부로 진입하여 수행
- Step over (F10)
- Function 전체를 수행
- watch
- 변수값을 조사
- Call stack
- 현재 호출된 Function depth표시
참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript
JavaScript | MDN
JavaScript (JS)는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js, Apache CouchDB, Adobe Acrobat처럼
developer.mozilla.org
☞ 예제
※ 수를 입력하고 최대값을 출력하시오.
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// ES6 type
const getMax = function (...values)
{
for (let i = 0; i< values.length; i++)
{
if ('number' !== typeof(values[i]))
{
return null;
}
}
let maxTemp = values[0];
for (let i = 1; i < values.length; i++)
{
if (maxTemp < values[i])
{
maxTemp = values[i];
}
}
return maxTemp;
}
</script>
</head>
<body>
<script>
let max = getMax(1, 43, 555, 2, 32, 77); //max에 입력
if (max !== null)
alert("최대값 : " + max);
else
alert('입력값이 잘못되었습니다.');
</script>
</body>
※ 두 수A, B를 입력하고 A~B 까지 모두 더해서 출력하시오.
<body>
<script>
const twoNum = prompt('두값을 입력하시오.', ', 으로 구분');
const twoVal = twoNum.split(', ');
let twoAr = [];
//문자열을 숫자타입으로 변환
for (let i = 0; i < 2; i++)
{
twoAr[i] = twoVal[i];
}
//작은값 부터 큰값을 더하는 함수
const add = function(...val)
{
let ar = []
for(let i = 0; i < val.length; i++)
{
ar[i] = Number(val[i]);
}
let smallNum; //작은 숫자
let bigNum; //큰 숫자
//작은숫자와 큰 숫자를 정하라
if((ar[0]) > (ar[1]))
{
smallNum = ar[1];
bigNum = ar[0];
}
else if ((ar[0]) < (ar[1]))
{
smallNum = ar[0];
bigNum = ar[1];
}
else
{
alert('숫자가 입력되지 않았습니다.');
}
let total = 0; //총합
//총합을 구하는 식
for (let i = smallNum; i <= bigNum; i++)
{
total = total + i;
}
return total;
}
let result = add(twoAr[0], twoAr[1])
alert(result);
</script>
</body>
※ 숫자를 입력받아 버블소트로 나열하는 함수를 구하시오.
<body>
<script>
//number 배열을 입력받아 버블소트를 수행하는 함수를 작성하시오.
const ar = prompt('숫자를 입력하시오', ', 로 구분합니다.')
const val1 = ar.split(', ')
const newAr = []
for(let i = 0; i < val1.length; i++)
{
newAr[i] = val1[i]
}
console.log(newAr);
const bubble = function(...num)
{
console.log(bubble[0]);
for(let i = 0; i < bubble.length; i++)
{
}
}
let result = bubble(newAr);
</script>
</body>반응형
'JavaScript' 카테고리의 다른 글
| [JavaScript] 재귀함수(재귀호출) (0) | 2022.04.11 |
|---|---|
| [JavaScript] unshift, Array.isArray (0) | 2022.04.10 |
| [JavaScript] split, 조건문, 반복문, sort (split, if else, switch, for, while, continue) 예제 (0) | 2022.04.07 |
| [JavaScript] Array(배열) 예제, (length, push, splice.. ) (0) | 2022.04.07 |
| [JavaScript] 기초지식, Datatype, 데이터 입력, 자료형 변환, 예제 (0) | 2022.04.06 |