240129 자바스크립트

변수

1. 변수명만 존재 : 적용범위를 제한하지 않고 사용가능(전역 변수)
   mul = 10*20;
   mul = 20*30;
   mul = 10;
2. var : 동일한 변수명으로 중복 선언 가능, 선언된 변수에 재할당(변경) 가능
   var mul = 10*20;
   var mul = 20*30;
   mul = 20;
3. let : 동일한 변수명으로 중복 선언 불가능, 선언된 변수에 재할당 가능
   let mul = 10*20;
   let mul = 20*30; //중복선언오류
   mul = 30;
4. const : 동일한 변수명으로 중복 선언 불가능, 선언된 변수에 재할당(변경) 불가능(상수화), 변수 선언시 반드시 데이터 값을 초기화
   const mul = 10 * 20;
   const mul = 20 * 30; //중복선언오류
   mul = 20; //데이터값 재할당(변경) 오류

스코프(scope) : 변수는 코드의 일정 범위 안에서만 유효하고, 특정 변수가 가지는 코드 상의 유효 범위를 스코프라고 함

 

함수

<script type="text/javascript">
//매개변수가 없고 반환값이 없는 경우
// "*"를 20번 출력
var i;
function line() {
	for(i = 1; i<=20; i++){
	document.write(i + "* ");
	}
	document.write("for문 종료<br>");
}
line(); //함수 호출
line();
</script>
	<button type="button" onclick="line();">line() 메소드 호출</button>

<script type="text/javascript">

 

<script type="text/javascript">
//매개변수가 있고, 반환값이 없는 경우
function line1(str){
	for(i = 1; i<=20; i++){
	document.write(i + str+" ");
	}
	document.write("for문 종료<br>");
}
line1("@");
line1("#");
</script>

 

<script type="text/javascript">
//매개변수가 없고, 반환값이 있는 경우
function sum(){
	let num1 = parseInt(prompt("num1값을 입력"));
	let num2 = parseInt(prompt("num2값을 입력"));	
	let hap = num1 + num2;
// 	document.write(`${hap}<br>`);
	return hap; //호출한 쪽으로 반환값을 돌려줌
}
// let result = sum(); //호출 하고 결과값도 가지고 있음
// document.write("result = " + result);
document.write("sum() = " + sum());
</script>

 

<script type="text/javascript">
//매개변수가 있고, 반환값이 있는 경우
	function ramen(name) {
		switch (name) {
		case "신라면":
			alert("신라면을 선택");
			break;
		case "안성탕면":
			alert("안성탕면을 선택");
			break;
		case "짜파게티":
			alert("짜파게티를 선택");
			break;
		}
	}
</script>

	<button type="button" onclick="ramen('신라면')">신라면</button>
	<button type="button" onclick="ramen('안성탕면')">안성탕면</button>
	<button type="button" onclick="ramen('짜파게티')">짜파게티</button>

<script type="text/javascript">
//매개변수가 있고, 반환값이 있는 경우
	function ramen(name) {
		switch (name) {
		case "신라면":
			alert("신라면을 선택");
			return;
		case "안성탕면":
			alert("안성탕면을 선택");
			return;
		case "짜파게티":
			alert("짜파게티를 선택");
			return;
		}
	}
</script>

	<button type="button" onclick="ramen('신라면')">신라면</button>
	<button type="button" onclick="ramen('안성탕면')">안성탕면</button>
	<button type="button" onclick="ramen('짜파게티')">짜파게티</button>

chapter07.html

0.00MB

 

호이스팅

• 변수 선언이 함수 또는 전역 코드의 상단에 이동하는 것과 같은 기능
• 일반적으로 변수 선언은 제일 먼저 해석(변수가 선언되고 초기화 되어 있어야함)
• 변수가 선언되기 전에 사용될 수 있다는 것을 의미
• 코드를 작성할 때 중간부분에 변수를 선언해도 변수가 코드의 제일 처음 선언된 것처럼 취급되는 것을 말함
• 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위 쪽으로 끌어 올리는 것

<script type="text/javascript">
//호이스팅(Hoisting) : 
//변수 선언과 할당을 분리해서 선언 부분을 스코프(유효범위)의 가장 위쪽으로 끌어올림
//자바스크립트 엔진의 해석 순서를 제일 먼저 수행

//var로 선언된 변수 : 이미 존재하고 있는 변수명으로 중복으로 선언 가능
var a = "자바스크립트";
var a = "자바스크립트";
document.write(`var 변수 a 값 = ${a}<br>`);
document.write(`--------------------------------<br>`);

b = 'var로 선언된 변수의 호이스팅';
var b;
document.write(`var 변수 b 값 = ${b}<br>`);
document.write(`--------------------------------<br>`);

</script>

그림 1.

<script type="text/javascript">
function addNumber() {
	
	var sum = 10 + 2;
	multi = 10 * 2;
	let sub = 10 - 2;
	const div = 10 / 2; //상수화, 초기값이 없으면 에러발생
	
	document.write(`함수 내의 sum 지역 변수 : ${sum}<br>`);
	document.write(`함수 내의 multi 전역 변수 : ${multi}<br>`);
	document.write(`함수 내의 sub 지역 변수 : ${sub}<br>`);
	document.write(`함수 내의 div 상수 변수 : ${div}<br>`);
	document.write(`--------------------------------<br>`);	
	
	//함수 내에서 새로운 값을 변수에 대입
	sum = 20 + 5;
	multi = 20 * 5;
	sub = 20 - 5;
	//div = 20 / 5; //오류. 새로운 값을 대입 할 수 없음.
	
	document.write(`함수 내의 sum 지역 변수 : ${sum}<br>`);
	document.write(`함수 내의 multi 전역 변수 : ${multi}<br>`);
	document.write(`함수 내의 sub 지역 변수 : ${sub}<br>`);
	//document.write(`함수 내의 div 상수 변수 : ${div}<br>`);
	document.write(`--------------------------------<br>`);	
	
}

addNumber(); //함수 호출
</script>

그림 2.

<script type="text/javascript">
var x = 10;

function displayNumber() {
	x = 20;
 	//y = 30;
	let z = x + y;
	document.write(`함수 내의 x 지역 변수 : ${x}<br>`);
	document.write(`함수 내의 y 지역 변수 : ${y}<br>`);
	document.write(`함수 내의 z 지역 변수 : ${z}<br>`);
	
	var y = 20;

}

displayNumber();

</script>

chapter07_1.html

0.00MB

 

 

※함수 표현식 형식에 의한 함수 생성 방법

이름이 없는 함수 : 익명 함수(Anonymous function)

함수 정의

var 변수명 = function (매개변수){

 수행할 내용

return 반환값(함수를 종류하고 뒤에 있는 값을 반환);

}

호출 :변수명(매개변수값)