JS 챌린지 5일차 TIL

선민·2023년 3월 10일

1. while문 & do while문

반복문 while문 : 조건이 만족하는 동안 코드 계속 실행됨. continue와 break가 있음

console.log("Menu");
console.log("1. Ice Americano");
console.log("2. Cafe Latte");
console.log("3. Cappuccino");
console.log("4. Tea");

var count=0;

while(count <3){
	var choice = parseInt(prompt("메뉴를 선택"));
	console.log(choice + "번 메뉴를 선택함");


	switch(choice) {
		case 1:
			console.log("아이스 아메리카노는 1500원");
			break;
		case 2:
			console.log("카페 라떼는 1800원");
			break;
		case 3:
			console.log("카푸치노는 2000원");
			break;
		case 4:
			console.log("홍차는 1300원");
			break;	
		default:
			console.log("sorry. 그런 메뉴 없음");
			break;
	}
	count++;
}
console.log("bye");

do while문 : 1번은 코드 실행되고, 이후에 while(조건식) 에 따라 반복할 지 결정

var cond=false;
while(cond) {
	console.lgo("이 구문 실행 안됨");
}
do{
	console.log("이 구문 한 번 실행됨");
}while(cond);

2. for문 & for in문

for문 : 초기구문 + 업데이트 구문 + 반복조건이 있는 반복문
for문 vs while문 : for문에서 continue; 만나면 업데이트 구문으로 이동, 반면 while문에서 continue; 만나면 반복실행 코드의 끝으로 이동 후에 바로 조건식 검사
for in문 : 객체의 각 element에 접근가능한 반복문

var obj={
	name:"object",
	weight:30,
	isObject:true,
	arr:[1,2,3],
	obj:{property:1}
};

console.log("for 구문으로 object property 반복");

var property_list = Object.keys(obj);
console.log("property list: ",property_list);

for( var i=0 ; i<property_list.length ; i++ ){
    var propertyName = property_list[i];
    console.log( "\t", propertyName, ": ", obj[propertyName] );
}

console.log("\n\nfor in 구문으로 object property 반복하기");
for( var propertyName in obj ){
    console.log( "\t", propertyName, ": ", obj[propertyName] );
}

객체에 해당 속성이 존재하는 지 확인할 수 있음

3. 변수의 scope

변수의 scope : 선언한 변수가 유효한 영역
변수의 scope는 function의 scope를 따름(객체는 선언된 함수 안에서만 접근 가능)

function a(){
	var v_a="a";

	function b() {
		var v_b="b";
		console.log("b : ", typeof(v), typeof(v_a), typeof(v_b));
	}
	b();
	console.log("a : ", typeof(v), typeof(v_a), typeof(v_b));

}
var v="v";
a();
console.log("o : ", typeof(v), typeof(v_a), typeof(v_b));

4. 변수의 shadowing

변수의 shadowing :

함수 안에서 밖에서도 선언되었던 같은 이름의 변수 사용하는 경우 - 함수 밖 변수는 가려짐(shadowing), 함수 안에서는 해당 함수의 변수 사용, 함수에서 빠져나오면서 다시 해당 변수에 접근 가능
함수 안에서만 값이 유지되어야 하는 경우 - 함수 안에서 var 사용해 선언
여러 함수에서 값이 유지되면서 사용되는 변수의 경우 - 함수 포괄하는 곳에서 선언

function shadowing_ex(){
	console.log("F",val);
	val++;
}
var val=0;
shadowing_ex();
console.log("0",val);

function shadowing_ex(){
	var val=0;
	console.log("F",val);
	val++;
}
var val=0;
shadowing_ex();
console.log("0",val);

5. method & this

this : 예약어. 일반적인 함수를 호출할 때, 해당 함수 내부에서 사용된 this는 전역객체에 바인딩됨

function f() {
	console.log(this);
	console.log("f is called");
}

var o={name:"object", method:f};
f();
o.method();

6. closure

closure : 함수, 함수가 선언될 때의 환경으로 구성. (중요함. 심화학습 필요)
함수가 정의될 때 환경과 함께 클로저로 합쳐지면서 다양한 활용 가능

function makeCounterFunction(initVal){
    var count = initVal;
    function Increase(){
        count++;
        console.log(count);
    }
    return Increase;
}

var counter1 = makeCounterFunction(0);
var counter2 = makeCounterFunction(10);

counter1();
counter2();