Today I Learned(js_05)

심동근·2024년 3월 15일

UDR 멋쟁이 사자처럼 언더독레볼루션

멋쟁이 사자처럼

목록 보기

5/19

1. 오늘 배운 내용에 대한 요약

1.1 while문

조건의 따라 프로그램의 일정 코드를 반복적으로 수행할 수 있도록 하는 구문

ex) while(조건){ / 실행될 코드 / }
continue: 남은 코드 모두 무시
break: while문 탈출

1.2 do while문

do while은 반드시 한 번은 코드가 실행되고 그 이후 조건을 따짐

1.3 for문

형태: for(var i=0; i<5; i++){ / 반복 실행 / }

1.4 for in문

object.keys(): 객체의 속성들이 배열로 반환
객체의 각 엘리먼트에 접근할 수 있는 반복문.

1.5 scope

변수의 scope는 function의 scope를 따른다.
객체(변수)는 선언된 함수 안에서만 접근이 가능

1.6 shadowing

함수 안에서 함수 밖에서 선언된 변수와 같은 이름의 변수를 사용할 때

함수 밖에 변수는 가려짐(shadowing)
함수 안에서 새롭게 선언된 변수를 사용
함수 종료 후 함수 밖에 있는 기존 변수 사용 가능

1.7 this

일반적인 함수를 호출할 때, 해당 함수 내부에서 사용된 this는 전역객체(브라우저의 경우 window객체)에 바인딩
메서드를 호출할 때 this의 값은 인스턴트화 된 객체(해당 메서드를 호출한 객체)를 참조

1.7 closure

함수와 environment로 구성
함수가 정의 될 때의 environment가 함께 closure로 결합되면서, 다양한 활용이 가능

잘 이해가 안된다면 아래 주소 확인
https://velog.io/@wngud4950/%ED%81%B4%EB%A1%9C%EC%A0%80Closure%EB%9E%80

2. 각각의 실습 코드 정리

<!-- while.js-->
cnt= 0;

while(cnt < 3){
	var choice= parseInt(prompt("chooose 1~5"));
	switch(choice){
	case 1:
		alert(1);
		break;
	case 2:
		alert(2);
		break;
	case 3:
		alert(3);
		break;
	case 4:
		alert(4);
		break;
	case 5:
		alert(5);
		break;
	default:
		alert("chooose 1~5");
		break;
	}
	cnt++;
}

<!-- while2.js-->
var cnt= 0;

while(true){
	var ans= parseInt(prompt("1+1="));
	if(ans!=2){
		cnt++;
		continue;
	}

	ans= parseInt(prompt("2+2="));
	if(ans!=4){
		cnt++;
		continue;
	}

	ans= parseInt(prompt("3+3="));
	if(ans!=6){
		cnt++;
		continue;
	}else{
		alert(cnt+"번 틀림");
		break;
	}

}

<!-- do_while.js -->
var cnt= 0;

while(true){
	var ans= parseInt(prompt("1+1="));
	if(ans!=2){
		cnt++;
		continue;
	}

	ans= parseInt(prompt("2+2="));
	if(ans!=4){
		cnt++;
		continue;
	}

	ans= parseInt(prompt("3+3="));
	if(ans!=6){
		cnt++;
		continue;
	}else{
		alert(cnt+"번 틀림");
		break;
	}

}

<!-- for.js -->
var arr= [1,2,3,4,5,6,7,8,9,10];

for(var i=0; i<arr.length; i++){
	console.log(arr[i]);
}

<!-- for_in.js -->
var obj= {
	name: "object",
	weight: 30,
	isObject: true,
	arr: [1,2,3],
	obj: {property:1}
};

var property_list= Object.keys(obj);
console.log(property_list)

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

for(var propertyName in obj){
    console.log("\t", propertyName, ": ", obj[propertyName]);
}

,<!-- 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));

<!-- shadowing.js -->
function shadowing_example(){
	var val= 0;
	console.log("F", val);
	val++;
}

var val= 0;
shadowing_example();
console.log("O", val);

<!-- this.js -->
function f(){
	console.log(this);
	console.log("f is called");
}

function setName(name){
	this.name= name;
}

var o= {name: "object", method:f, setName:setName};
var o2= {name: "", setName:setName};

o.setName("object1");
o.setName("object2");

console.log(o, o2);

<!-- closure.js -->
function makeCounterFunction(initVal){
	var cnt= initVal;
	function increase(){
		cnt++;
		console.log(cnt);
	}
	return increase;
}

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

counter1();
counter2();