13-2. JS 함수 (let, const, 재사용 가능한 함수)

13-2. JS 함수 (let, const, 재사용 가능한 함수)

2021. 10. 19. 15:03ㆍHTML + CSS + JS

728x90

var 변수는 여러가지 문제(?)를 발생시킬 수 있다.

만약 var 예약어를 빼먹으면 전역변수가 되어 의도치않게 여러군데에서 쓰이게 되어 원하는 값이 안나올 수도 있고,

var 변수는 재선언과 재할당이 가능하여 코드 길이가 길어져 var 변수를 선언했었는지 모르고

같은 이름으로 재선언하거나 재할당하게 될 수도 있다.

이러면 또 사용자가 예상했던 값이 아닌 전혀 다른 값으로 출력될수도 있다.

따라서 ES6에서는 변수를 선언하기 위한 예약어로 let과 const가 새로 생겼다.

그리고 되도록이면 var 사용을 권장하지 않는다고 한다.

❗ var는 함수 영역의 범위에서 사용되고, let과 const는 블록 영역의 범위에서 사용한다.

1. let

1️⃣ 블록에서 사용 가능하다.

let 예약어는 변수를 선언한 {} 에서만 유효하고 {}을 벗어나면 사용할 수 없다.

2️⃣ 재할당은 가능하지만 재선언은 불가능하다.

let 예약어를 사용하여 선언한 변수는 값을 재할당할 수는 있지만 변수를 재선언할 수는 없다.

3️⃣ 호이스팅이 없다.

https://hyejin.tistory.com/152

13-1. JS 함수 (지역변수, 전역변수, 호이스팅, 재선언, 재할당)

1. 지역변수와 전역변수 자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 범위를 스코프라고 한다. 1️⃣ 지역변수 지역변수는 한 함수 안에서만 사용할 수 있는 변수로, 로컬 변

hyejin.tistory.com

여기서 var 예약어는 호이스팅이 가능하여 y 의 값이 undefind가 되었었다.

하지만 let 예약어는 변수 y를 초기화 하기 전에는 사용할 수 없다.

2. const

const 사용한 변수 역시 let 과 마찬가지로 변수를 선언할 때 사용하는 예약어이다.

const로 선언한 변수는 상수 변수이다. 즉 변하지않는 값을 변수로 선언할 때 예약어로 const를 사용한다.

const로 선언한 변수는 재선언이나 재할당할 수 없다!!!

3. 변수 사용 권장

1️⃣ 전역변수는 최소한으로 사용한다.

오류 발생 확률이 높아지기 때문에 전역 변수는 되도록이면 적게 사용하는것을 권장한다.

2️⃣ var 변수는 함수의 시작부분에서 선언한다.

var 를 사용한 변수는 어디에서 선언하든 상관은 없지만 내부에서 호이스팅이 생기기 때문에 오류를 발생시킬 가능성이 존재하므로 시작부분에 다 선언한다.

3️⃣ for문에서 카운터 변수를 사용할 때는 var 예약어를 사용하지 않는다.

let 예약어 사용 권장!

4️⃣ ES6를 사용한다면 var보다 let 예약어 사용 권장

4. 재사용 가능한 함수

function addNumber(num1, num2) 에서

num1와 num2는 매개변수이다.

매개변수에 기본값을 지정해둘 수 있다.

* 연습문제

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>1부터 n까지 더하기</title>
</head>
<body>

	<script>
		function calcSum(n) {
			var sum = 0; 
				for(let i = 1; i < n+1; i++) {
						sum += i;
				}

				document.write("1부터 " + n + "까지 더하면 " + sum);
		}

		var userNumber = prompt("얼마까지 더할까요?");

		if(userNumber !== null) {
			calcSum(parseInt(userNumber));
		}
	</script>
</body>
</html>

728x90

'HTML + CSS + JS' 카테고리의 다른 글

13-4. JS 함수 연습문제 (0)	2021.10.19
13-3. JS 함수 (익명함수, 화살표함수, 이벤트, DOM ) (0)	2021.10.19
13-1. JS 함수 (지역변수, 전역변수, 호이스팅, 재선언, 재할당) (0)	2021.10.19
12-4. JS 연습문제 1,2 (0)	2021.10.18
12-3. JS 반복문 ( for, 중첩 for문, while, do while ) (0)	2021.10.18

💖💗

💖💗

태그

최근글

댓글

공지사항

아카이브

'HTML + CSS + JS' 카테고리의 다른 글

관련글

티스토리툴바