함수
동작해야 할 목적대로 묶은 명령을 함수(function)
alert() 함수와 같이 자바스크립트에 미리 만들어 놓은 함수를 '내장 함수'라고 함
함수를 사용하는 기본적인 방법은 함수를 만들 때 이름을 붙이고 필요할 때마다 함수 이름을 사용해 실행
함수가 어떤 명령을 처리할지 미리 알려주는 것을 함수를 선언한다, 함수를 정의한다 라고 함
<script>
funciont 함수명(){
명령
}
</script>함수를 선언하는 것만으로 함수가 실행되지 않음. 함수를 선언한 후 따로 실행하는 코드를 작성해야함
함수를 사용하는 것을 함수를 호출한다, 함수를 실행한다 라고 함
함수명([변수])함수 선언과 실행 순서 : 웹 브라우저에서 자바스크립트 소스를 해석할 때 함수 선언 부분을 가장 먼저 해석. 원하는 어느 곳에 함수를 선언해 놓기만 하면 선언한 위치와 상관없이 함스를 실행할 수 있음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수</title>
</head>
<body>
<script>
alert("자바스크립트에서 미리 만들어 놓은 함수를 내장 함수라고 함")
</script>
<script>
// 두 수를 더하는 함수 만들기
function addNum(a, b) {
var sum = a + b;
alert(sum);
}
</script>
<script>
// 함수를 사용하지 않고 두 수 더하기
var num1 = 10;
var num2 = 20;
var sum2 = num1 + num2;
alert("함수를 사용하지 않고 두 수 더하기 : " + sum2);
</script>
<script>
// 함수를 사용해 두 수 더하기
function addNum2() {
var num3 = 2;
var num4 = 3;
var sum3 = num3 + num4;
alert("함수를 사용해 두 수 더하기 : " + sum3);
}
</script>
</body>
</html>
var
스코프 : 변수가 적용되는 범위. 변수가 어디까지 유효한지 범위를 가리키는 영역
지역 변수, 로컬 변수(local variable) : 한 함수 안에서만 사용할 수 있는 변수
전역 변수, 글로벌 변수(global variable) : 스크립트 소스 전체에서 사용할 수 있는 변수
함수 안에서만 쓸 수 있는 지역 변수 : 지역 변수를 선언할 때 사용하는 예약어 var
<script>
// var 예약어로 지역 변수 선언하기
function addNumber(){
var sum = 10 + 20; // 지역 변수 선언
}
addNumber(); // 함수 호출
console.log(sum);
</script>
스크립트 안에서 자유롭게 쓸 수 있는 전역 변수 : 전역 변수를 선언할 때는 var 예약어를 붙이지 않음. 함수 안에 선언한 변수라도 var 예약어를 사용하지 않으면 됨
<script>
// var 예약어를 사용한 지역 변수와 전역 변수
function addNumber2(){
var sum = 10 + 20;
multi = 10 * 20;
}
addNumber2();
console.log(multi);
</script>
var와 호이스팅
호이스팅은 상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것
<script>
var x = 10;
function hoistingEx(){
console.log("x = "+x);
console.log("y = "+y);
var y = 20;
}
hoistingEx();
</script>
※ undefined는 변수가 선언되었지만 아직 값이 할당되지 않은 상태일 때의 자료형
자바스크립트 해석기는 함수 소스를 훑어보면서 var를 사용한 변수는 따로 기억해둠. 즉, 변수를 실행하기 전이지만 어떤 변수가 있는지를 기억해 두기 때문에 선언한 것과 같은 효과가 있는 것
위의 코드가 실제 코드라면 자바 스크립트 해석기가 인식하는 코드는
<script>
var x = 10;
function hoistingEx(){
var y;
console.log("x = "+x);
console.log("y = "+y);
y = 20;
}
hoistingEx();
</script>로 인식하게 됨
변수의 재선언과 재할당
var를 사용한 변수는 재선언과 재할당이 가능함
<script>
// var 예약어를 사용한 변수의 재할당과 재선언
function addNumber(num1, num2){
return num1 + num2;
}
var sum = addNumber(10, 20);
console.log(sum); // 30
sum = 50; // 변수 재할당
console.log(sum); // 50
var sum = 100; // 변수 재선언
console.log(sum); // 100
</script>
let과 const의 등장
var 예약어를 사용하는 변수는 함수 영역의 스코프를 가지고, 재할당과 재선언이 가능함. 이는 프로그램 오류를 발생시킬 수 있음.
var 예약어를 빠뜨리면 의도하지 않게 전역 변수가 되기도 하고, 변수를 재선언하거나 값을 재할당해 버리는 경우가 생김.
이러한 문제를 해결하기 위해 let, const가 추가되었고, var 예약어는 사용하지 않을 것이 권장됨
var, let, const의 가장 큰 차이는 스코프의 범위인데 var는 함수 영역의 스코프를 가지며, let과 const는 블록 영역의 스코프를 가짐
let
let으로 선언한 변수는 변수를 선언한 블록에서만 유효
<script>
// 블록 변수 선언
function calcSum(n){
let sum = 0;
for(let i = 1; i < n + 1; i++){
sum += i;
}
console.log(sum);
}
calcSum(10);
</script>
전역 변수를 선언하고 싶다면 let 예약어를 쓰지 않고 변수 이름과 초깃값만 할당하면 됨
<script>
// 전역 변수 선언하기
function caclSum1(n){
sum = 0;
for(let i = 0; i <= n; i++){
sum += i;
}
}
caclSum1(10);
console.log(sum);
</script>
let예약어를 사용하여 선언한 변수는 값을 재할당할 수 있지만 변수를 재선언할 수 없음
<script>
// 블록 변수의 재할당
function calcSum2(n){
let sum = 0;
for(let i = 0; i <= n; i++){
sum += i;
}
sum = 10; // sum 변수 재할당
console.log(sum);
}
calcSum2(10);
</script>
<script>
// 재선언할 수 없는 let 변수
function caclSum3(n){
let sum = 0;
for(let i = 0; i <= n; i++){
sum += i;
}
let sum;
console.log(sum);
}
calcSum3(10);
</script>
let 예약어는 같은 변수 이름을 중복해서 사용할 수 없음
호이스팅이 없는 변수
let 예약어를 사용한 변수는 선언하기 전에 사용할 경우 오류메시지를 나타냄
<script>
var x = 10;
function dispalyNum(){
console.log("x = " + x);
console.log("y = " + y); // 선언되지 않은 y를 사용
let y = 20; // y 변수 선언
}
</script>
const
const로 선언한 변수는 상수 변수(constant variable)
상수는 프로그램 안에서 변하지 않는 값
프로그램 안에서 특정한 상숫값을 자주 사용한다면 변수에 담아서 사용하는 것이 변리
재선언, 재할당 할 수 없음
<script>
// 재선언할 수 없는 const 변수
const currentYear = 2024;
console.log(currentYear);
const currentYear;
</script>
<script>
// 재할당할 수 없는 const 변수
const currentYear2 = 2024;
console.log(currentYear2);
currentYear2 = 2025;
console.log(currentYear2);
</script>
따라서 변수 때문에 생기는 오류를 줄이려면 let과 const를 사용하는 것이 좋음
값이 자주 바뀌는 변수라면 let을, 재할당이 없는 변수라면 const 예약어를 사용