☝️ 조건문(Conditional Statement)

If operators

이런 형식인데, 예시 먼저 봅시다!!

const name = "solmi";

if (name === "solmi"( { //만약 name의 값이 "solmi"면
	console.log("Welcome, solmi!"); //Welcome, solmi!를 출력하고
} else if (name === "kang"){ //만약 name의 값이 "solmi"는 아니지만, "kang"라면
	console.log("Hi, Kang!"); // Hi, Kang!을 출력하고
} else { //name의 값이 "solmi"도 아니고 "kang"도 아니라면
	console.log("unkwnon"); //unkwnon을 출력
}

if aa라면 A 출력, else if 아니고 bb라면 B 출력, else 그것도 아니면 C 출력! 간ㅡ단쓰

💁🏻‍♀️ 여러가지 경우 중 조건에 맞는건 모두 실행하고 싶을 때

if문을 쓸때 else if 를 거의 세트처럼 사용했는데...

let a =15, b = 4
if (a는 5의 배수) {} // a는 여기에 걸리고 // b는 여기에 안걸리고
if (a는 3의 배수) {} // a는 여기에도 걸리고 // b는 여기에도 안걸리고
if (a는 2의 배수) {} // a는 여기에는 안걸리고 // b는 여기에는 걸리고

이런식으로 if문을 여러개 사용할 수 있다!!!

💁🏻‍♀️ If를 간단하게 쓸 수 있는 Ternary operator (삼항 연산자)

console.log(name === "solmi" ? "yes" : "no");

?가 if의 역할을 한다.
name === "solmi" 가 맞으면 yes를 출력! 아니면 no를 출력!
Ternary operator를 사용해서 계속 if else if else if....묶어나가면 코드의 가독성이 떨어지므로, 그럴 경우에는 if 또는, switch 를 사용하는게 좋다!

---

Switch operators

const browser = "IE";

switch (browser){
	case "IE" : //browser의 값이 "IE"이면
		console.log("go aray!!"); //go away!! 를 출력
		break; //하고 나서 멈춘다. break 를 써주지 않으면, 바로 뒤의 case 영역이 뒤이어 실행되니 꼭 써주자!
	case "Chrome" : //browser의 값이 "IE"가 아니면, if의 else처럼 아래줄의 명령을 실행하게 된다.
		case "Firefox" : //break가 없으면 아래 줄의 코드도 실행되는 점을 이용해서, 같은 값을 출력하고자 할땐 이렇게 짧게 입력할 수 있다.
		console.log("I love you!");
		break;
	default : //위의 값이 모두 아닐 때 실행된다.
		console.log("same all");
		break; 
}

하나의 변수에 많은 경우의 수가 있거나,
typescript에서 정해져있는 type을 검사할때는 if 에서 if..else..if..else..하지 말고!
switch 를 사용하면 가독성이 좋다.

---

✌️ 반복문 (Looping Statement)

while loop

let i = 3;

while (i > 0) { //i가 0보다 크니? => 응!
	console.log(`while: ${i}`); //i를 출력하고,
	i--; //i의 값을 1 감소시키고 => 다시 while (i > 0)으로 되돌아가서 false가 나오기 전까지 반복
} //while:3, while:2, while:1 까지 출력되고 더이상 출력되지 않는다.

⇒ 특정 조건을 만족하면 같은 코드를 반복해서 실행한다.
(값이 false가 나오기 전까지 계속해서 반복된다.)

do-while loop

let i = 0;

do {
	console.log(`do while: ${i}`); //do while:0이 먼저 출력된다.
	i--;
} while (i > 0); //그 후에 조건이 맞는지 검사

⇒블럭{ } 안의 코드를 무조건 1번은 실행한 다음에, 조건이 맞는지 검사한다.
(조건을 검사하기 전에 먼저 1번 실행하고 싶을 때 사용한다.)

for loop

for(begin;(초기값 정의) condition;(실행 조건) step(갱신)) 의 구조로 사용한다.

let i = 2; //이미 지정된 변수
for (i = 3; i > 0; i--) { //다시 값을 지정할 수도 있고(let일 경우)
	console.log(`for: ${i}`);
}

이렇게 이미 지정된 변수에 다시 값을 지정할 수도 있고 (let일 경우)

for (let i = 3; i > 0; i = i - 2) { //기존에 없던 변수를 { }안에 지역변수로 선언할 수도 있다.
	console.log(`inline variable for: ${i}`);
}

for() 안에서 지역 변수를 선언할 수도 있다!
이를 inline variable declaration (인라인 변수 선언) 이라고 부른다.
(출력은 이렇게 된다!)

forEach

특정 객체의 열거 가능한 모든 프로퍼티를 루프 처리

const arr = ["item1", "item2", "item3"];

arr.forEach(function (item, index) {
  console.log(item); // item, item2, item3
  console.log(index); // 0, 1, 2
});

화살표 함수를 통해 간결하게 만들 수 있다.

arr.forEach((item, index) => {
  console.log(item);
  console.log(index);
});

for...in

• 객체의 속성들을 반복해서 작업 수행
• 모든 객체에서 사용 가능
• key 값에 접근할 수 있지만, value 값에 접근하는 방법은 제공하지 않음

for (let key in solmi) {
	console.log(key);
} // name, age

const arr = ["item1", "item2", "item3"];

for (let prop in arr) {
  console.log(prop, arr[prop]);
} // 0 item1, 1 item2, 2 item3

for...of

• [Symbol.iterator] 속성을 가지는 컬렉션에서만 반복

const arr2 = ["item1", "item2", "item3"];

for(value of arr2) {
	console.log(value);
}

for of 문을 사용하면 간단하게

 for(let i = 0; i < arr2.lengh; i++) {
   console.log(value);
}

Symbol.iterator 속성?

Javascript 자료형의 Primitive Types 중 하나인 Symbol에서 사용된다.
객체에 대응하는 기본 iterator(배열이나 유사한 자료 구조의 내부 요소를 순회하는 객체)를 지정하고, for..of와 같이 사용된다.

nested loop

for (let i = 0; i < 10; i++) {
	for (let j = 0; j < 10; J++) {
		console.log(`i: ${i}, J: ${j}`);
	}
}

for문 안에 다시 for문을 작성할 수 있는데, 위의 예제의 경우에는 이렇게 실행된다.

i가 0일때, j가 0~9까지 실행되고, 그 다음 다시 i의 step으로 돌아가서 i가 1 추가되고, 그후에 i가 1일때, j가 0~9까지 실행된다. 계속 반복되다가, i가 10이 되는 순간, 더이상 실행되지 않는다.

label

break; : 루프를 아예 종료하고 다음 코드로 넘어감
continue; : 현재 루프의 나머지 코드를 건너뜀

🙅🏻‍♀️ label을 사용하지 않고도 코드를 좀 더 간편하게 바꿔서 작성할 수 있기 때문에 현업에서는 잘 사용하지 않는다.

---

🕹 continue랑 break 이해하기

Q1) 0부터 10까지의 숫자 중, 짝수인 숫자만 출력하기 (continue 이용해서)

for (i = 0; i < 11; i++) {
  if (i % 2 !== 0) {
    continue;
  }
  console.log(`${i}`);
}

예제는 continue 를 사용하기 위해 저렇게 작성한거지만, continue 를 사용하지 않고 이렇게 작성하는게 더 좋다.

for (let i = 0; i < 11; i++) {
  if (i % 2 === 0) { //원하는 값일 때만 결과 출력
    console.log(`${i}`);
  }
}

Q.2 ) 0부터 10까지의 숫자를 출력하되, 8 이상인 숫자는 출력하지 말기 (break 이용해서)

for (let i = 0; i < 11; i++) {
  if (i === 8) { //8을 만나면 멈추기로 이해하고 이렇게 작성했는데 i > 8 로 작성하는게 훨씬 깰ㅡ끔
    break;
  }
  console.log(`${i}`);
}