JavaScript 함수
[이론내용 정리]
함수란?
함수(Function)는 데이터를 전달받아 처리한 후 결과를 돌려주는 코드 블록이다.
자주 사용하는 코드를 하나로 묶어 필요할 때마다 호출하여 사용할 수 있다.
- 매개변수가 없는 함수도 있다
- 매개변수를 받아 처리하는 함수도 있다
- 결과값을 반환하지 않는 함수도 있다
매개변수가 없는 함수
매개변수 없이 정해진 작업만 수행하는 함수이다.
함수 선언 기본 형식
function 함수명() {
실행할 코드
}함수 호출 기본 형식
함수명();예제 코드
<script>
function hello() {
alert("자바스크립트");
}
hello(); // 함수 호출
</script>매개변수가 있는 함수
함수를 호출할 때 값을 전달받아 처리하는 함수이다.
전달받은 값은 함수 내부에서 매개변수(parameter) 로 사용된다.
매개변수 함수 선언 형식
function 함수명(매개변수) {
실행할 코드
}매개변수 함수 호출
함수명(값);return 키워드
- 함수의 실행 결과를 함수를 호출한 곳으로 반환
- return을 만나면 함수 실행은 즉시 종료된다
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function add1(a, b) {
let sum;
sum = a + b;
return sum;
}
</script>
</head>
<body>
<script>
let n = add1(3, 4);
document.writeln(n);
</script>
</body>
</html>변수식 함수 선언 (익명 함수)
함수의 이름이 없고, 함수 전체를 변수에 저장하여 사용하는 방식이다.
이런 함수를 익명 함수라고도 한다.
변수식 함수 선언 기본 형식
let 변수명 = function() {
실행할 코드
};
변수명();특징
- 함수 이름이 없다
- 변수명을 통해 함수를 호출한다
- 주로 이벤트 처리나 콜백 함수에서 많이 사용된다
예제 코드
<script>
let hello = function() {
console.log("변수식 함수 호출");
};
hello();
</script>매개변수가 있는 변수식 함수
변수식 함수도 매개변수와 return 값을 사용할 수 있다.
예제 코드
<script>
let add2 = function(a, b) {
return a + b;
};
let result = add2(10, 20);
console.log(result);
</script>[실습내용 정리]
함수(예시)
eval() 함수
- 문자열이 실제로 연산되는 함수
기본적인 함수의 사용
[참고] : 함수를 먼저 호출하고 그 뒤에 함수 정의 코드를 작성해도 정상적으로 호출(실행)이 된다. -> "호이스팅"
매개변수 함수
return 값을 가지는 함수
예제 1
[같은 코드인데 "삼항조건 연산자" 를 이용해서 아래와 같이 바꿔서 쓸 수 있다.]
예제 2
전역변수 / 지역변수
나는 부자가 될래!😼🐰❤️