[JacaScript]개념 및 동작원리 3. Control flow

jungeundelilahLEE·2020년 9월 14일
0

# INDEX

1. Values & Data type
2. Operators
3. Control flow
   3-1. if 문
   3-2. for 문
   3-3. for in 문
   3-4. while 문

4. Scope & Hoisting
5. Object & Array
6. This
7. Prototype & Inheritance
8. Function
9. Callback function
10. Closuer
11. Class
12. Others

3. Control flow

3-1. if Statement

: '만약에' / 지정한 조건이 참(truthy)인 경우 명령문(statement)을 실행함 / 조건이 거짓(falsy)인 경우, 또다른 명령문(else if)이 실행될 수 있음

if (조건1)      
   명령문1      
else if (조건2)
   명령문2
else if (조건3)
   명령문3
...
else
   명령문N

3-2. for loop

: 반복되는 구문을 작성 / 배열 or 문자열 등을 순회할 때 주로 사용

for (1번 (초기화); 2번 (조건설정); 4번 (증감);) {
     3번 (실행 문장)
}
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
- 1번 (초기화) : 가장 먼저 실행되며, 단 한번만 실행됨 / 주로 변수 선언
- 2번 (조건 설정) : 조건 성립에 따라 3번 파트의 실행 여부를 결정
- 3번 (문장) : 반복 실행을 원하는 로직
- 4번 (증감) : 3번의 실행 이후 실행되며, 실행된 이후 2번으로 돌아감

// 실행순서 ex)
arr = [1,2,3];
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
  1. 1번) 변수 i 를 선언 & 숫자 타입 0을 할당
  2. 2번) i < 3을 실행 & i = 0이므로, true이므로 계속
  3. 3번) arr[0]를 콘솔에 출력 //1
  4. 4번) i++을 실행 & i = 1로 i의 값 재할당됨
  5. 2번) i < 3을 실행 & i = 1이므로 계속
  6. 3번) arr[1]를 콘솔에 출력 //2
  7. 4번) i++을 실행 & i = 2로 i의 값 재할당됨
  8. 2번) i < 3을 실행 & i = 2이므로, true이므로 계속
  9. 3번) arr[2]를 콘솔에 출력 //3
  10. 4번) i++을 실행 & i = 3로 i의 값 재할당됨
  11. 2번) i < 3을 실행 & i = 3이므로, false이므로 실행중지 (=> for문 종료)

3-3. for in / for of

: 주로 객체의 key & value 를 순회할 때 주로 사용

for (let 변수 in 객체) {
     실행 문장}

for in 과 for of 의 차이

let arr = [3, 5, 7];	
arr.foo = "hello";		// arr = [3,5,7,{foo:"hello"}]

for (let i in arr) {
   console.log(i); 		// logs "0", "1", "2", "foo"
}

for (let i of arr) {
   console.log(i); 		// logs "3", "5", "7"
}

for of 문제 예시

// 문제 : str에서 가장 긴 문자열을 반환해보자

let str = "Willy is supppper lovely"
let splited = str.split(" ")		// ["Willy", "is", "supppper", "lovely"]
let result = "";			// 원하는 값의 비교를 위한 설정 
					// ""(빈문자열).length = 0
for (let element of splited) {
  		// 첫번째가 끝나고 두번째 for loop이 시작된다!
  			// 세번째 for loop이 시작된다!
  				// 네번째 for loop이 시작된다!
    	console.log("element:" + element);
  	// 첫번째 // "element:Willy"
  		// 두번째 // "element:is"
  			// 세번째 // "element:supppper"
  				// 네번째 // "element:lovely"
    if (element.length > result.length) { // 가정 : (element.length) > 0 
      	// 첫번째 // 5 > 0 이므로 계속~
      		// 두번째 // 2 > 5 이므로 실행불가 중단!
      			// 세번째 // 8 > 5 이므로 계속~
      				// 네번째 // 6 > 8 이므로 실행불가 중단!
      				// 다시 위로 올라갔더니 모든 element순회를 끝냈으므로 for 문을 빠져나온다
        console.log("result:" + result);
      	// 첫번째 // "result:" (빈배열이므로)
      			// 세번째 // "result:willy"
    result = element;
        console.log("결과result:" + result);
      	// 첫번째 // "결과result:Willy"
      			// 세번째 // "결과result:supppper"
        console.log(result.length)
      	// 첫번째 // 5
				// 세번째 // 8      
    }
}
// 결과적으로 result는 가장 긴 단어인 "supppper"를 추출할 수 있다!
// for in 문 예시

let baby = {
  name : "willy",
  age : 1,
  gender : "man"
};

for (let property in baby) {
  console.log(property);
  // "name", "age", "gender"
  console.log(baby[property])
  // "willy", 1, "man");
}

3-4. while

: 조건문이 참이면 문장을 계속해서 수행

초기화
while (조건설정) {
        실행 문장 }
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
- 초기화 : optional
- 조건설정 : 조건이 truthy인 경우, 본문 실행 / 조건이 falsy인 경우, 해당 반복문 안의 문장은 실행을 멈추고 다음 문장으로 넘어감
- 문장 : 결과가 참이 경우 반복적으로 실행할 문장

// 실행 ex)

// 1번)
let i = 0;
while (i < 5) {
  console.log( i );	//0, 2, 4
  i+=2;
}

// 2번)
let j = 0;
while (j < 5) {
  j+=2;
  console.log( j );	//2, 4, 6
}

1번) 실행순서
1) i=0;
2) i<5; true continue
3) console.log(0); //0
4) i=2;
5) i<5 true continue
6) console.log(2); //2
7) i=4;
8) i<5; true continue
9) console.log(4); //4
10) i=6;
11) i<5; false stop

2번) 실행순서
1) i=0;
2) i<5; true continue
3) i=2;
4) console.log(0); //2
5) i<5 true continue
6) i=4;
7) console.log(4); //4
8) i<5; true continue
9) i=6;
10) console.log(6); //6
11) i<5; false stop

profile
delilah's journey

0개의 댓글