파트 9-1 while문
1. 반복문이란?
반복문은 특정한 조건이 만족할때까지 코드를 반복하는 문이다!!
2. while문 예시
while(count < 3){//메뉴를 선택을 3번까지 반복함!!
var choice = parseInt(prompt("메뉴를 선택해 주세요"));
console.log(choice + "번 메뉴를 선택하셨습니다.");
switch(choice){
case 1:
console.log("아이스 아메리카노는 1500원 입니다.");
break;
case 2:
console.log("카페 라떼는 1000원 입니다.");
break;
case 3:
console.log("카푸치노는 2000원 입니다.");
break;
case 4:
console.log("홍차는 1300원 입니다.");
break;
default:
console.log("죄송합니다. 그런 메뉴는 없습니다.");
break;
}
count++;
console.log("안녕히 가십시오") //반복문 실행후 실행될 문장!!!3. break와 continue명령어를 이용한 while문!!
break : 반복문을 빠져나오는 명령어
continue : 반복문을 다시 처음부터 반복하는 명령어
예시 코드
while(true){
var ans;
ans = parseInt(prompt("1+1=?"));
if (ans != 2){
console.log((++count) + "번 틀렸습니다. 다시 도전하세요.");
continue;
}
ans = parseInt(prompt("7-3=?"));
if(ans != 63){
console.log( (++conunt) + "번 틀렸습니다. 다시 도전하세요.")
continue;
}
break;
//continue를 만나면 여기로 이동합니다!!
//break를 만나면 여기로 이동합니다.
console.log("참 잘했습니다!")코드를 간단히 설명하자면.....
- 주어진 문제를 풀지못하면 continue명령어를 작동하게하고 그러면 다시 문제를 풀게된다.
- 문제를 맞히게 된다면 break명령어를 이용해 반복문에서 탈출 할 수 있다!!!
파트 9-1 while문 실습(1)
문제
count를 0으로 초기화하고 while문 안에서 1씩 더해주고 있습니다. 이렇게 하면 count가 9까지 증가한 다음 while문의 조건에 따라 반복이 종료됩니다. [실행]버튼을 눌러서 실행 결과를 확인해 보세요.
실행결과
반복문 내에는 두줄의 코드가 있는데
1. 첫째 줄은 count의 값을 출력해주는 코드
2. 둘째 줄은 count의 값을 크게해주는 코드이다.
따라서 count는 while문의 '()'안에 있는 조건에 따라 0부터 9까지
증가하면서 화면에 출력된다!!!!
코드
var count = 0;
while( count < 10){
console.log( count );
count++;
}파트 9-1 while문 실습(2)
문제
함수 solution은 n을 인자로 받아서 1부터 n까지 더한 값을 return하는 함수입니다. 예를들어 solution(3)을 호출하면 1+2+3인 6을 return합니다.
코드 4번째줄과와 코드 5번째줄의 빈칸을 채워 solution을 완성해 보세요.
해결방법
강의에서 알려준 while문의 작성방식을 이용해 조건에 맞는 값이 저장되게 반복을 해준다!!!
코드
function solution(n){
var count = 1;
var sum=0;
while( count <= n){
sum = sum + count;
count++;
}
return sum;
}파트 9-2 do while
1. do while문 예시 코드
var cond=false;
while(cond){
console.log("이 구문은 실행되지 않습니다.");
}
do{
console.log("이 구문은 한번은 실행됩니다.");
}while(cond);
do{
var ans = parseInt(prompt("1+1=?"));
}while(ans != 2);
console.log("맞췄습니다.");while문과 달리 do while문은 한번은 코드가 작성되고 반복가능 여부를 판단한다!!!
파트 9-2 for문
1. for문 코드 예시
var array = [1,2,3,4,5,6,7,8,9,10];
for(var i = 0; i < array.length ; i++){ // 조건식
//반복 실행될 코드
console.log(array[i]);
}파트 9-2 for문 실습
문제
for문을 이용해서 배열 cost의 값을 모두 더해 total_cost 변수에 저장하세요.
해결방법
문제의 조건에맞게 for문의 조건식과 반복구문을 작성해준다!!!
해답코드
var cost = [ 85, 42, 37, 10, 22, 8, 15 ];
var total_cost = 0;
// 여기에 코드를 작성하세요.
for (var i = 0 ; i < cost.length; i++){
total_cost += cost[i];
}
console.log(total_cost);파트 9-3 for in문
1. 객체의 속성에 접근하는 방법
var obj{
name: "object",
weight:30,
isObject:true,
arr[1,2,3],
obj:{property:1}
};
console.log(Object.keys(obj));
//["name", "weight", "isObject", "arr", "obj"]Object.keys함수를 통해 객체의 속성에 접근할 수 있다1!!
2. for in문을 이용해서 객체 속성에 접근하기!!
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 propertyNmae in obj){
console.log("\t", propertyName, ": ", obj[propertyName]);
}파트 9-3 for in문 실습(1)
문제
typeof함수를 사용하면 각 변수의 자료형을 알 수 있습니다. 실행버튼을 눌러서 실행 결과를 확인하세요.
실행결과
각각 num, string, array자료형임을 확인할 수 있다!!!
코드
var a = 5;
var b = "문자열";
var c = [1,2];
console.log( typeof( a ) );
console.log( typeof( b ) );
console.log( typeof( c ) );파트 9-3 for in문 실습(2)
문제
for in문을 이용해서 obj의 속성중, number 타입의 값을 모두 더해서 sum에 저장하도록 빈칸을 채워 코드를 완성해 보세요.
해결방법
강의에서 배운 for in을 이용한 객체 속성 접근법을 통해서 문제를 해결 할 수 있다.
해답코드
var obj = {
name: "object",
age: 10,
weight: 5
}
var sum = 0;
for ( var k in obj){
if( typeof( obj[k]) == "number" ){
sum = sum + obj[k];
}
}
console.log("sum :", sum);파트 10-1 변수의 scope
1. 변수의 scope란?
선언된 변수가 어느 범위까지 유효한지를 알 수 있다!!!
2. 예시 코드를 알아보기
function a(){
var v_a="a";
console.log("b :", typeof(v), typeof(v_a), typeof(v_b));
// string string string
function b(){
var v_b="b";
}
b();
console.log("a :", typeof(v), typeof(v_a), typeof(v_b));
// string string undefined
//b()함수가 종료되었기 때문에 v_b에대한 선언은 사라진다
}
var v="v";
a();
console.log("o : ", typeof(v), typeof(v_a), typeof(v_b));
// string undefinede undefined
//b()함수와 a()함수가 종료되었기 때문에 v_b와 v_a대한 선언은 사라진다변수의 scope는 function의 scope를 따른다!!!
파트 10-2 변수의 shadowing
###코드 예시
function shadowing_example(){
console.log("F", val);
val++;
}
var val = 0;
shadowing_example();
console.log("O", val);
//함수 선언전에 변수 val이 선언되었기 때문에
//함수 내에서 변수 val이 수정될 수 있다!!!
- 함수내에서만 사용할 변수 => 함수내에서 변수선언
- 여러 함수내에서 사용할 변수 => 함수 실행전에 변수선언
파트 10-2 변수의 shadowing 실습
문제
다음 코드는 구구단을 2단부터 9단까지 출력하는 코드입니다. 하지만 이대로 실행하면 정상적으로 구구단을 출력하지 않습니다. 아래의 코드에 shadowing 효과를 추가해 구구단이 잘 출력되도록 하세요.
해결방법
현재 코드에서는 변수i가 함수 실행전에 선언되었다 따라서
함수 내에서 변수를 재선언 해주면 변수의 shadowing으로 문제를 해결할 수 있다!!!
해답코드
function printTimesTable(a){
for( var i = 1 ; i <= 9 ; i++ ){
console.log( a + " * " + i + " = " + a*i );
}
}
for( var i = 2 ; i <= 9 ; i++ ){
printTimesTable(i);
}파트 10-3 method, this
1. 메소드란?
객체내에 있는 함수를 메소드라 부를수 있다!!
2.예제 코드!!
function f(){
console.log(this);
//메소드를 포함한 객체 출력!!!
//독립적인 함수로 실행될 경우 windows가 객체로 실행된다!!
console.log("f is called");
}
var o={name:"object", method:f};
var o2 = {name: "", setName:setName}
f();
o.method();
//이런 방식으로도 메소드로 실행가능하다!!!
o.setName("object1");
o2.setName("object2");
// setName함수로 object의 이름의 변경이 가능하다!!
console.log(o, o2);
// 각 set된 object들이 출력된다!!
메서드를 호출할 때 this의 값은 인스턴스화 된 객체
(해당 메서드를 호출한 객체)를 참조한다.
파트 10-4 closure(클로저)
1. 클로저란?
함수와 envirionment로 이루어져있는 것이다!!
2. 예제 코드
function makeCounterFunction(ininVal){
var count = initVal;
function Increase(){
count++;
console.log(count);
}
return Increase;
}
var counter1 = makeCounterFunction(0);
var counter2 = makeCounterFunction(10);
counter1(); //1출력!!
counter2(); //11출력
평균 구하기
문제
정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요.
해결방법
지금 까지 배운 javascript문법을 이용해 문제를 해결할 수 있다.
1. arr에 접근하기 위해서는 arr[index]를 이용할수 있고
2. arr의 크기를 구하기 위해서는 arr.length를 사용할 수 있다.
3. 위의 2가지로 평균을 구할 수 있다!!
해답코드
function solution(arr) {
var answer = 0;
var size = arr.length
sum = 0
for (var k = 0; k < size; k++){
answer += arr[k];
}
return answer/size;
}챌린지를 하면서...
처음에는 javascript라는 새로운 언어라서 생소하고 쉽게 못해낼줄 알았는데 하루하루 정해진양을 해가면서 결국에는 해내면서 앞으로도 꾸준히 다른 어려운 것들도 해낼수 있겠다는 자신감이 생겼다!!!
