함수(function)
기능을 정의해 놓은 것
함수는 하나의 로직을 재사용할 수 있도록 하는 것으로 코드의 재 사용성을 높여줌.
자바스크립트에서의 함수는
1. 변수나 데이터안에 담길 수 있고
2. 매개변수로 전달 할 수 있고
3. 반환 값으로 사용할 수 있고
4. 실행도중에 생성될 수 있다
형식)
function 함수이름(매개변수1, 매개변수2) {
함수 호출 시 실행될 문장;
return 반환값;
}
함수 사용 시 장점
1. 코드의 중복 제거 및 코드 재사용 가능.
2. 유지보수 용이성
자바스크립트 함수의 종류
1. 사용자 정의 함수 : 사용자가 직접 만들어 놓은 함수.
2. 내장 함수 : 자바스크립트에서 자체적으로 제공해 주는 함수
자바스크립트는 호이스팅(hoisting)때문에
함수선언문이 함수 실행문보다 나중에 위치해도 함수가 실행된다.
호이스팅이란?
자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다.
함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.
유효 범위: 함수 블록 {} 안에서 유효
즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.
실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다.
실제 메모리에서는 변화가 없다.
호이스팅의 대상
var 변수 선언과 함수선언문에서만 호이스팅이 일어난다.
var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.
let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.
(함수표현식 : ex) let sayHello = function() { console.log('Hello'); } )
사용자 정의 함수 예제)
<body>
<script type="text/javascript">
function hello() {
alert("안녕하세요??? 방가방가");
}
hello();
</script>
</body>
리턴(return)
함수 내부에는 포장이 되어 있기 때문에 한번 실행이 되면 외부에서 접근이 불가능함.
이 때 매개변수를 활용을 하면 함수 내부로 데이터 전달이 가능하다고 하였음.
매개변수 값이 함수 외부에서 함수 내부로 들어오는 값이라면,
리턴값은 함부 내부에서 처리된 결과값을 함수 외부로 전달하기 위해 사용되는 일종의 출력값을 의미
이 때 사용되는 키워드가 return!
<body>
<script type="text/javascript">
// [문제] 키보드로 두 수와 연산자를 입력받아서
// 연산자에 해당하는 함수를 호출하여 화면에 출력해 보세요.
function plus(su1, su2) {
return su1 + su2;
}
function minus(su1, su2) {
return su1 - su2;
}
function mul(su1, su2) {
return su1 * su2;
}
function divide(su1, su2) {
return su1 / su2;
}
function mod(su1, su2) {
return su1 % su2;
}
let su1 = Number(prompt("첫 번째 숫자 입력"));
let su2 = Number(prompt("두 번째 숫자 입력"));
let operator = prompt("연산자 입력");
switch(operator) {
case "+" :
document.write(su1+" + "+su2+" = "+plus(su1, su2)+"<br>");
break;
case "-" :
document.write(su1+" - "+su2+" = "+minus(su1, su2)+"<br>");
break;
case "*" :
document.write(su1+" * "+su2+" = "+mul(su1, su2)+"<br>");
break;
case "/" :
document.write(su1+" / "+su2+" = "+divide(su1, su2)+"<br>");
break;
case "%" :
document.write(su1+" % "+su2+" = "+mod(su1, su2)+"<br>");
break;
default :
alert("잘못된 연산자를 입력하셨습니다. 다시 입력해 주세요...");
}
</script>
</body>
while문에서 사용하면 함수를 탈출하는 명령어로 사용된다.
<body>
<script type="text/javascript">
function hap() {
let sum = 0, count = 1;
while(true) { // 무한반복
let value = Number(prompt("수 입력"));
if(value === 0) {
document.write("종료합니다.~~~~<br>");
return; // 함수를 탈출하는 명령어.
}
sum += value;
// 매번 입력된 값을 출력해 보자.
document.write(count+ " / "+ value + " / >>> " + sum +"<br>");
count++;
}
}
hap();
</script>
</body>
종료합니다. 라는 문장 출력>>>>while문 탈출
화살표 함수(arrow function)
화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function)의 간편한 대안.
형식)
let func = (arg1, arg2, ...argN) => (
expression1;
expression2;
);return문이 1줄일 때는 표현식을 감싸는 괄호를 생략 할 수 있다.
let func = (arg1, arg2, ...argN) => expression;
위 함수는 아래 함수의 축약버전이라고 볼 수 있다.
let func = function(arg1, arg2, ...argN) {
return expression;
};
인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있다.
let double = n => n * 2인수가 하나도 없을 땐 빈괄호로 남겨두면 된다. 이때, 괄호는 생략 할 수 없다.
let sayHi = () => alert("안녕하세요!");
무명(익명)함수
무명함수는 이름이 없는 함수를 말함. 이벤트 처리 등에 자주 사용이 됨.
함수를 무명으로 만드는 경우에는 주로 함수를 재사용하지 않는 경우에 사용됨
<body>
<script type="text/javascript">
let numbering = function() {
for(let i=1; i<=10; i++) {
document.write("i >>> " + i + "<br>");
}
}
numbering();
</script>
</body>
'Front-End > Javascript' 카테고리의 다른 글
| [JavaScript] 객체(Object), 내장 객체(Date, Math) (0) | 2021.12.14 |
|---|---|
| [JavaScript] 자바스크립트 내장 함수_타이머 함수 (0) | 2021.12.10 |
| [JavaScript] 배열(array) (0) | 2021.12.09 |
| [JavaScript] 반복문(while, do~while, for), continue, break 명령문 (0) | 2021.12.09 |
| [Java Script] NaN (0) | 2021.12.07 |
댓글