TIL05⎜JavaScript : If & Switch & While & For

알고리즘을 풀면 풀수록 중요한 개념으로 다가왔던 연산자들!

if

if () 괄호안의 조건이 맞으면, {}괄호 안에 있는 코드를 실행시켜라!

if(condition){
block(could be console.log,alert..)
} else if (condition){
block} else {
block
}

if문은 항상 참이어야한다. 참이 아니면 else block으로 감

if("10" === 10){
    console.log("Hi");
}else{
    console.log("Ho");
} //"Ho"

​

ternary operators

let result = condition ? value1 : value2;

condition이 true라면 value1, 그렇지 않으면 value2

함수안에서 쓰여서 바로 return 값으로 줄 수도 있다.

function getFee(isMember) {
return (isMember ? '$2.00' : '$10.00');
}

console.log(getFee(true));
// expected output: "$2.00"

​

switch operators

Use the switch statement to select one of many code blocks to be executed.
else if를 반복한다면 switch를 사용하는 것을 고려하는 것이 좋다.

switch(expression) {
case x:
// code block
break;
case y;
// code block
break;
default :
// code block
}

​

while loop

while loop, while the condition is truthy, body code is executed.

let i = 3;
while (i>0) {
 console.log(`while: ${i}`);
 i--;
} 
//
while: 3
while: 2
while: 1

​

for loop

for : 초기값을 한 번만 호출하고, condition에 맞지 않을 때까지 step실행

if you want to run the same code over and over again, each time with a different value.

for(시작값 ; 끝 ; 증가 or 감소) {
반복조건이 맞으면 실행할 코드
}

• 시작값부터 끝값까지 증가 or 감소시키며 for 문의 {} 내부를 실행하라는 뜻!

var greeting = ["Hello","Chao","Whatsup"]
for(let i=0; i<=greeting.length; i++){
  console.log(greeting[i])
}

또는
for(let i in greeting) {
  console.log(greeting[i])
}
//
Hello
Chao
Whatsup

nested loops도 가능

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

i 안에 j가 있기에 i=0 가 한 번 호출되고 j가 0부터 9까지 모두 실행된 다음, i=1로 증가하게 된다.

expected output; 

i: 0, j:0
i: 0, j:1
i: 0, j:2
i: 0, j:3
i: 0, j:4
i: 0, j:5
i: 0, j:6
i: 0, j:7
i: 0, j:8
i: 0, j:9
i: 1, j:0
i: 1, j:1
i: 1, j:2
i: 1, j:3
i: 1, j:4.....

ex01. iterate from 0 to 10 and print only even numbers(use continue)

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

ex02. iterate from 0 to 10 and print numbers until reaching 8 (use break)

for(let i = 0; i <= 10; i++) {
  if(i > 8) {
   break;
  }
  console.log(`q2.${i}`);
 }   

ex03. ❗️value값에는 tag들도 들어갈 수 있다

  for (let i = 0; i <= 7; i++) {    
    const imgRyan = document.createElement('img');
    //같은 이미지가 8개 생성된다

​

DOM if else function practice

Q : <h1 id = "title">This works!</h1>
mousteneter event 시,
currentColor가 BASE_COLOR와 같다면 OTHER_COLOR로 바꿔라

const title = document.querySelector("#title");
//먼저 DOM을 이용해서 HTML속성 선택하고 가져오기

const BASE_COLOR = "rgb(255, 255, 255)";
const OTHER_COLOR = "#7f8c8d";

function changecolor(){
const currentColor = title.style.color;
if(currentColor === BASE_COLOR){
    title.style.color = OTHER_COLOR;
} else{
title.style.color = BASE_COLOR;
 }
}

function init(){
  title.addEventListener("mouseenter",changecolor);
}
init();