1. 함수란?
▷ 동작해야 할 목적대로 명령을 묶어 놓은 것입니다.
▷ 각 명령의 시작과 끝을 명확하게 구별할 수 있습니다.
▷ 묶은 기능에 이름을 붙여 어디든 같은 이름으로 명령을 실행할 수 있습니다.
▷ 자바스크립트에는 이미 여러 함수가 만들어져 있어서 사용할 수 있습니다. ex) alert()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수</title>
</head>
<body>
<script>
function addNumber() {
var num1 = 2;
var num2 = 3;
var sum = num1 + num2;
alert("결과 값: " + sum);
}
addNumber();
addNumber();
</script>
</body>
</html>
위의 방법과 같이 합을 구하는 함수를 선언할 수 있습니다.
◎ 변수의 특징
▷ 스코프 : 변수가 적용되는 범위
▶ 지역 변수 : 함수 안에서 선언하고 함수 안에서만 사용합니다. var과 함께 변수 이름 지정을 합니다.
▶ 전역 변수 : 스크립트 소스 전체에서 사용합니다. 함수 밖에서 선언하거나 함수 안에서 var 없이 선언합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>var 예약어를 사용한 지역 변수와 전역 변수</title>
</head>
<body>
<script>
function addNumber(){
var sum = 10 + 20; // 지역 변수 선언
multi = 10 * 20; // 전역 변수 선언
}
addNumber();
// console.log(sum); // 지역 변수 사용 오류
console.log(multi); // 전역 변수 사용
</script>
</body>
</html>
위의 코드 예시를 보시면 전역 변수만 출력 가능하고 지역 변수는 오류가 나타나게 됩니다.
◎ 호이스팅
▷ 변수를 뒤에서 선언하지만, 마치 앞에서 미리 선언한 것처럼 인식합니다.
▷ 함수 실행문을 앞에 두고 선언 부분을 뒤에 두더라도 앞으로 끌어올려 인식합니다.
▷ let 변수는 호이스팅이 불가능합니다.
예시)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>변수 호이스팅</title>
</head>
<body>
<script>
var x = 10;
function displayNumber() {
console.log("x is " + x);
console.log("y is " + y);
var y = 20;
}
displayNumber();
</script>
</body>
</html>
y는 미리 선언하지 않았지만 나중에 선언이 됐기 때문에 값은 저장되지 않고 선언된 것으로 표현됩니다.
◎ 재선언과 재할당
▷ 재선언 : 이미 선언한 변수를 다시 선언할 수 있습니다.
▷ 재할당 : 같은 변수에 다른 값을 할당할 수 있습니다.
▶ 이 두 가지가 가능하면 변수를 잘못 조작할 확률이 높아집니다.
◎ let
▷ 블록 변수 : 블록({ }) 안에서만 사용할 수 있습니다.
▷ 전역 변수는 변수 이름과 초기 값만 할당하면 됩니다.
▷ 재할당은 가능하지만 재선언은 할 수 없습니다.
◎ const
▷ 상수 : 변하지 않는 값을 선언할 때 사용합니다. 재선언, 재할당을 할 수 없습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Function - Variable</title>
</head>
<body>
<script>
/*
const hi = function(){
return "안녕하세요";
}
*/
const hi = () => "안녕하세요?";
alert(hi);
let sum = (a, b) => console.log(a + b);
sum(10, 20);
</script>
</body>
</html>
주석 처리한 부분과 밑의 const 안녕하세요 문장은 똑같이 function이 선언된다는 말입니다.
밑의 sum 예시는 함수 선언의 추가 예시입니다.
() => "안녕하세요?" //알림 창
30 //콘솔 창
◎ 변수 사용 시 주의사항
▷ 전역 변수는 최소한으로 사용합니다. → 메모리를 적게 사용하자!
▷ var 변수는 함수의 시작 부분에서 선언합니다. → 변수가 먼저 선언되어야 합니다.
▷ for 문에서 카운터 변수는 var보다 let 변수로 선언합니다.
▷ ES6를 사용한다면 var보다 let을 사용하는 것이 좋습니다.
▶ ES(ECMAScript), 6(버전 6)
▶ ES : 프로그래밍 언어가 아닌 스크립트 언어들에 대한 표준 규격입니다.
2. 재사용할 수 있는 함수 만들기
◎ 매개 변수와 인수, return 문
▷ 매개 변수 : 하나의 함수를 여러 번 실행할 수 있도록 실행할 때마다 바뀌는 값을 변수로 처리한 것입니다.
ex) function addNumber(num1, num2) → num1, num2는 매개변수 입니다.
▷ 인수 : 함수를 실행할 때 매개 변수 자리에 넘겨주는 값입니다.
ex) addNumber(2, 3) → 2, 3은 인수 입니다.
▷ return : function 내부에서 사용하며, 한 개의 값에 대해서만 반환할 수 있습니다.
ex) return sum;
▷ 매개 변수와 인수는 매칭이 되어야 사용 가능합니다.
◎ 익명 함수
▷ 이름 없는 함수로 함수 자체가 식이므로 변수에 할당할 수 있고 다른 함수의 매개변수로 사용할 수 있습니다.
▷ 많이 사용하지 않고 급하게 변경해야하는 사항이 있을 때 사용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수</title>
<style>
body {
padding-top:20px;
text-align:center;
}
</style>
</head>
<body>
<script>
var sum = function(a,b){
return a + b;
}
document.write("함수 실행 결과: " + sum(10, 20));
</script>
</body>
</html>
◎ 즉시 실행 함수
▷ 함수를 실행하는 순간 자바스크립트 해석기에서 함수를 해석합니다.
▷ 식 형태로 선언하므로 함수 선언 끝에 세미콜론(;)을 붙입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>즉시 실행 함수</title>
<style>
body {
padding-top:20px;
text-align:center;
}
</style>
</head>
<body>
<script>
(function(a, b){ // 함수 선언을 위한 매개변수
sum = a + b;
}(100, 200)); // 마지막에 함수 실행을 위한 인수
document.write("함수 실행 결과 : " + sum);
</script>
</body>
</html>
자바스크립트의 함수는 다음 글에서 계속 게시하겠습니다!!
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
'FrontEnd > java script' 카테고리의 다른 글
| [java script] 객체 1(object, 내장 객체 Array) (0) | 2022.12.16 |
|---|---|
| [java script] 자바 스크립트 함수 2(function) (0) | 2022.12.16 |
| [java script] 자바스크립트 반복문(for, while) (0) | 2022.12.15 |
| [java script] 자바스크립트 조건문(if, switch) (0) | 2022.12.15 |
| [java script] 자바스크립트 기본 문법(변수, 자료형 등) (2) | 2022.12.15 |
