코드 그라데이션
8. 함수와 이벤트 (2) let, const / 함수의 재사용 본문
1. let 사용한 변수의 특징
- var 을 빠뜨리게 되면 의도치 않게 전역변수가 되기도 하고
- 프로그램 길이가 길어지면 실수로 / 사용하는 변수를 재선하거나 값을 재할당해 버리는 경우가 생기기도 함.
var과 let, const의 가장 큰 차이
- var은 함수 영역(레벨)의 스코프를 가짐
- let, const는 블록 영역의 스코프를 가진다.
1) 블록 안에서만 쓸 수 있는 변수
- 변수를 선언한 블록에서만 유효하고
- 블록을 벗어나면 사용할 수 없다.
- 전역 변수를 선언하고 싶다면 let 예약어를 쓰지 않고 변수 이름과 초깃값만 할당하면 된다.
예제 1. 블록 변수 선언하기
<body>
<script>
function calcSum(n) {
let sum = 0;
for(let i = 1; i < n + 1; i++) {
sum += i;
}
console.log(sum);
}
calcSum(10);
</script>
</body>예제 2. 전역 변수 선언하기
<body>
<script>
function calcSum(n) {
sum = 0;
for(let i = 1; i < n + 1; i++) {
sum += i;
}
}
calcSum(10);
console.log(sum);
</script>
</body>
2) 재할당은 가능하지만 재선언은 할 수 없는 변수
- let을 사용하여 선언한 변수는 값을 재할당할 수는 있지만 변수를 재선언할 수는 없다.
- 그래서 var처럼 실수로 같은 변수의 이름을 사용할 걱정은 없다.
예제 1. 블록 변수의 재할당
<body>
<script>
function calcSum(n) {
let sum = 0;
for(let i = 1; i < n + 1; i++) {
sum += i;
}
sum = 100;
console.log(sum);
}
calcSum(10);
</script>
</body>실행 결과
예제 2. 재선할 수 없는 변수
- 실행 결과 : 변수 sum이 중복으로 선언되었다는 메시지가 나타남.
<body>
<script>
function calcSum(n) {
let sum = 0;
for(let i = 1; i< n + 1; i++) {
sum += i;
}
let sum;
console.log(sum);
}
calcSum(10);
</script>
</body>
3) hoisting 이 없는 변수
- var 예약어를 사용한 변수는 선언하기 전에 실행하더라도 undefined 값을 가질 수 있다.
- 이것은 호이스팅 때문이다.
- 하지만 let 예약어를 사용한 변수는 선언하기 전에 사용할 경우 다음과 같은 오류 메시지가 나타남.
<body>
<script>
var x = 10;
function displayNumber() {
console.log("x is " + x);
console.log("y is " + y);
let y = 20;
}
displayNumber();
</script>
</body>실행 결과
2. const를 사용한 변수의 특징
- 변수를 선언할 때 사용하는 예약어
- const는 상수를 의미
- 프로그램 안에서 특정한 상숫값을 자주 사용한다면 변수에 담아서 사용하는것이 편리
- const로 할당한 변수는 재선언하거나 재할당할 수 없으며,
- let 예약어 를 사용한 변수처럼 블록 레벨의 스코프를 갖는다.
- const를 사용해 이미 지정한 변수에 새로운 값을 할당하는 것도 안 된다.
값이 자주 바뀌는 변수라면 let 예약어를 사용하고
재할당이 없는 변수라면 const 예약어를 사용하라.
자바스크립트 변수 사용법
- 전역 변수는 최소한으로 사용하라
- var 변수는 함수의 시작 부분에서 선언하라
- for 문에스 카운터 변수를 사용할 때는 var 예약어를 사용하지 마라
- ES6을 사용한다면 var 보다 let을 사용하는 것이 좋다.
재사용성
- 입력을 바꿔 여러 번 사용할 수 있는 성질을 읨
- 함수의 가장 큰 장점이다.
매개변수, 인수, return
매개변수
- 변숫값이 자주 변하는 상황에서 사용하려면 값을 고정하지 않고 어떤 숫자든지 함수로 넘겨서 값을 계산하면 된다.
- 즉, 함수를 실행하는 데 필요한 값을 함수 밖에서 제공하는 로직.
- 이렇게 하려면 함수를 선언할 때부터 외부에서 값을 받아줄 변수를 미리 만들어야 한다. 이것이 매개변수
- 함수를 호출할 때 괄호 안에 매개변수의 이름을 넣는다.
- 매개변수는 선언된 함수 내에서만 사용하며,매개변수를 여러 개 사용할 때는 매개변수 이름 사이에 , 을 찍어 나열한다.
예제
<body>
<script>
function addNumber(num1, num2){
var sum = num1 + num2;
return sum;
}
var result = addNumber(2, 3);
document.write("두 수를 더한 값 : " + result);
</script>
</body>실행 로직
매개변수 기본값 지정하기
- ES6부터는 함수에서 매개변수를 선언할 때 기본값을 지정하는 기능이 생겼다.
- 아래 예제에서 multiple() 함수에서 매개변수 b와 c의 변숫값을 넘겨받지 못했을 때 기본값을 사용한다.
<body>
<script>
function multiple(a, b = 5, c = 10) { // b = 5, c = 10으로 기본값 지정
return a * b + c;
}
var result1 = multiple(5, 10, 20); // a = 5, b = 10, c = 20
document.write("multiple(5, 10, 20)을 실행하면 결과는 " + result1 + "입니다. <br>")
var result2 = multiple(10, 20); // a = 10, b = 20, c = 10(기본값)
document.write("multiple(10, 20)을 실행하면 세번째 매개변수는 기본값을 사용하고 결과는 " + result2 + "입니다.<br>")
var result3 = multiple(30); // a = 30, b = 5(기본값), c = 10(기본값)
document.write("multiple(30)을 실행하면 두번째, 세번째 매개변수는 기본값을 사용하고 결과는 " + result3 + "입니다.")
</script>
</body>
728x90
'Front > Mega-JavaScript' 카테고리의 다른 글
| 10. 함수와 이벤트 (4) 이벤트 처리기 관련 (0) | 2023.05.21 |
|---|---|
| 9. 함수와 이벤트 (3) 함수 표현식 (0) | 2023.05.21 |
| 7. 함수와 이벤트 (1) var을 사용한 변수의 특징 (0) | 2023.05.20 |
| 6. 자바스크립트 기본 문법 (4) 반복문 (0) | 2023.05.20 |
| 5. 자바스크립트 기본 문법 (3) 조건문 (0) | 2023.05.20 |
'Front/Mega-JavaScript' Related Articles
more
Comments