[JS] 조건문 / 반복문

 

 

 

 

 

조건문 ( If / switch )

 

 

 

If문

조건부분이 충족되면 동작부분을 수행한다.

넓은 범위를 만족하는 조건식을 만들 때 효과적이다.

//if문
if (조건부분) {
  동작부분
}

//예시
if (temperature <= 0) {
  console.log('물이 업니다.');
} else if (temperature < 100) {
  console.log('물이 얼지도 끓지도 않습니다.') 
} else if (temperature < 150) {
  console.log('물이 끓습니다.')
} else {
  console.log('물이보두 수증기가 되었습니다.')
}

 

 

if (조건부분) 에서 boolean으로 값을 판별해서 true이면 동작부분이 실행된다.

여기서 falsy와 truthy 값으로도 동작한다.

 

 

 

 

const userName = 'Kim'
if (userName) {
  A
} else if (userName === 'Kim') {
  B
} else {
  C
}


//A가 실행
userName은 비어있지 않은 문자열이기 때문에 Truthy값으로 참으로 변환된다.

 

 

 

 

 

switch문

 어떤 값을 입력했는지에 따라 다르게 동작한다.

 특정값에 일치하는 조건을 만들 때 효과적이다.

switch (비교할_값) {
  case 조건값_1:
    동작부분;
    break;      //breack로 switch문 빠져나온다.

  case 조건값_2:
    동작부분;
    break;

  default :
    동작부분;
}

 

 

 

[옵션] default는 모든 조건값과도 일치하지 않을경우 동작할 코드 ( if문의 else역할 )

let myChoice = 3;

switch (myChoice) {
  case 1:
    console.log('토끼를 선택한 당신, ...');
    break;
  case 2: 
    console.log('고양이를 선택한 당신...');
    break;
  case 3:
    console.log('강아지를 선택한 당신...');
    break;
  default:
    console.log('1에서 3사이의 숫자 선택하세요')
}

 

 

 

 

 

---

 

 

 

 

 

반복문 

 

 

 

반복문의 종류

1. for 반복문
2. forEach() - Array전용
3. for in - Object 전용
4. for of - iterable ( array, string, arguments, nodelist, map, set )

 

반복문의 용도

1. 코드를 여러번 실행할 때
2. array, object에서 자료들을 하나씩 꺼내고 싶을 때

 

 

 

 

 

for문

조건 부분이 충족되면 계속해서 순환하면서 동작부분을 반복한다.

 

초기화문 : 변수생성, 반복횟수를 저장하는 역할, 시작할 때 딱한번 실행되는 부분 ( 보통 index의 i )

조건문 : 반복횟수, true면 계속실행 false면 종료

counter : 조건부분 true일때 이 동작부분을 실행 ( i++ = i+1 )

for ( 초기화문; 조건문; counter 변화) {
  수행할 동작
}

 

 

 

[예시]

//for문 예시
for ( let i = 1; i <= 10; i++) {
  console.log(`${i}번째 for문`)
}

//출력
1번째 for문
2번째 for문
3번째 for문
4번째 for문
5번째 for문
6번째 for문
7번째 for문
8번째 for문
9번째 for문
10번째 for문

//변수 추가해서 저장
function forLoops() {
  let myArray = [];    //변수추가해서 저장
  for (var i=1; i<6; i++) {
      myArray.push(i);
    }
  return myArray;
}

 

 

 

break

반복문 조건에 상관없이 중간에 빠져나오고 싶을 때 사용한다.

// 7에서 종료
for (let i=1, i<=10, i++) {
  console.log(i);
  if ( i===7 ) {
    break;
  }
}

 

continue

동작부분을 필요에 따라 건너뛴다.

continue에 해당되면 동작이 실행되지않고 다음숫자로 넘어간다.

// 짝수생략
for (let i=1; i<=10; i++) {
   if ( i%2 === 0 ) {
      continue;
   }
   console.log(i)
}

//출력 
1
3
5
7
9

 

 

 

 

 

---

 

 

 

for ~ in

•  Object 자료형에 저장된 자료들 하나씩 꺼내고 싶을 때 사용한다.
•  오브젝트안의 데이터 갯수만큼 반복하며, 반복할 때 마다 let 변수는 데이터의 key값이 된다.
•  반복마다 변경되는 key값을 이용하면 object 내의 자료를 모두 출력할 수 있다.  - object[key] / object.key 로 꺼낸다.

let obj = { name: 'kim', age: 30 };

for (let key in obj) {
  console.log(obj)
  console.log(key)
  console.log(obj[key])
}

// 출력
name
age

{ name: 'kim', age: 30 }
{ name: 'kim', age: 30 }

kim
30

 

 

 

 for in의 특징 1. enumerable한 것만 출력한다.

var 오브젝트 = { name : 'Kim', age : 30 };

console.log(Object.getOwnPropertyDescriptor(오브젝트, "name"))

 object 자료형에는 3가지 속성이 들어있다. (그래서 좀 무거움)

 여기에 enumerable이 있는데 이것이 true인 값들만 for in에서 출력된다.

 (거르고 싶은거 false로 만들면됨)

 

 

 

for in의 특징 2. 부모의 prototype에 저장된 것도 출력된다.

class 부모1 {}

부모1.prototype.name = "kim";

let 오브젝트1 = new 부모1();

for (let key in 오브젝트1) {
  console.log(오브젝트1[key]);
}
//출력 : kim

 

 

 

 

 

---

 

 

 

for ~ of

• iterable한 자료형에 사용가능하다.
• array, string, arguments, NodeList, Map, Set

for (let 자료 of 'ㅁㄴㅇㄹㅁ') {
  console.log(자료);
}

//출력
ㅁ
ㄴ
ㅇ
ㄹ
ㅁ

 

NodeList

document.getElementsByClassName();    [HTML1, HTML2]
documnet.querySelectorAll();