[유튜브 '드림코딩'] 자바스크립트(JavaScript ES6) 4강

4. 코딩의 기본 operator, if, for loop

오늘 내가 배운 것 

 

`` (백텍)의 좋은 점은 중간에 줄바꿈을 하거나 ‘’ (홑 따옴표)을 사용하면 그대로 문자열로 변환돼서 보인다.

 

예를 들어

console.log(‘Ellie’s book’);  (홑 따옴표 가득...)

이라고 하면 중간의 홑 따옴표나 특수기호가 인식이 되지 않는데 이때는 

 

console.log(‘Ellie\’s book’);   

‼️홑따옴표 앞에 백 슬러시를 이용해서 대입해 주어야 제대로 출력이 된다.‼️

줄 바꿈은 \n

탭은 \t

 

|| (1가지라도 true 면 true )

 Value 1 , value 2에서 true 가 나오면 뒤는 판단하지 않는다. (밑에 코드 노트 참고.)

그래서 Value 1 이 true 였으면 value 2와 check는 판단하지 않으므로 function 이 실행되지 않음..

함수로 호출하는 것이 (연산을 많이 하는 작업을 ) 뒤로 배치하여 효율적인 코드를 작성한다. 

 

&& ( 모두 true 여야 true , 한 가지라도 false 면  false)

Value 1에서 false 가 나왔으므로 뒤에 작업은 하지 않고 (value 2 , check 함수가 실행되지 않음) false로 종료.

 

 블럭안을 먼저 실행하고 싶으면 do-while을 사용하고

조건에 맞을 때 블럭을 사용하고 싶으면 while을사용한다.

 

유튜브 강의 내 퀴즈 풀어보기 

//break , continue
    // Q1. iterate from 0 to 10 and print only even numbers(use continue) 0~10 까지 짝수만 호출하기

    for (let i = 0 ; i <= 10 ; i++){
        if (i % 2 != 0){
        continue;
    }
        console.log(`i : ${i}`);
    }
/*
정답 : 
for (let i = 0 ; i <11 ; i++){
        if (i % 2 !== 0){
   continue;
    }
        console.log(`i : ${I}`);
    }

//실전에서는 원하는 값만 출력하게 간단하게 짠다.
for (let i = 0 ; i <11 ; i++){
        if (i % 2 === 0){
        console.log(`i : ${i}`);
    	}
    }

*/




    // Q2. iterate from 0 to 10 and print numbers until reaching 8 (use break).    0~10까지 출력하는데 8이 되면 멈춤
    for ( let k = 0 ; k <=10 ; k++){
      if (k < 9) {
        console.log(`k : ${k}`)
      } 
      else {
        break;
      }
    }


/*
정답:
for ( let k = 0 ; k <11 ; k++){
      if (k > 8 ) {
        Break;
      } 
      console.log(`k : ${k}`)
   }

*/

---

동영상 보면서 따라 적어보기

// 1. String concatenation
console.log('my' + 'cat');
console.log('1' + 2);
console.log(`string literals : 1 + 2 = ${1 + 2}`);
console.log('Ellie\’s \n\t book');

// 2. Numeric operators
console.log(1+1);   //add
console.log(1-1);   //substract
console.log(1/1);   //divide
console.log(1*1);   //multiply
console.log(5%2);   //remainder
console.log(2**3);  //exponentiation  2^3

// 3. Increment and decrement operators
let counter = 2;
const preIncrement = ++counter;
//counter = counter + 1;
//preIncrement = counter;
console.log(`preIncrement : ${preIncrement}, counter : ${counter}`);

const postIncrement = counter++;
//postIncrement = counter;
//counter = counter +1;
console.log(`postIncrement : ${postIncrement}, counter : ${counter}`);

const perDecrement = --counter;
//counter = counter - 1;
//preDecrement = counter;
console.log(`preDecrement : ${perDecrement}, counter : ${counter}`);

const postDecrement = counter--;
//postDecremnet = counter;
//counter = counter -1;
console.log(`postDecrement : ${postDecrement}, counter : ${counter}`);

// 4. Assignment operators
let x = 3;
let y = 6;

x += y ;    //x = x+y
x -= y ;    //x = x-y
x *= y ;    //x = x*y
x /= y ;    //x = x/y;

// 5. Comparison operators
console.log(10 < 6);           //less than
console.log(10 <= 6);          //less than or equal
console.log(10 > 6);           //greater than
console.log(10 >= 6);          //greater than or equal

// 6. Logicla operators : || (or), && (and), !(not)
const value1 = false;
const value2 = 4 < 2 ;

    // || (or), finds the first trethy value
    console.log(`or: ${value1 || value2 || check()}`);   // false || false || ture

    // && (and), finds the first falsy value 
    console.log(`and : ${value1 && value2 && check()}`); 
    /*ex) often used to compress long if-statement
     nullalbeObject && nullableObject.something
     if(nullableObject != null){
        nullableObject.something;
    }  */
    function check(){
    for (let i = 0; i<10; i++){
    //wasting time 
    console.log('😱'); 
    }
    return true ;
    }

    // ! (not)
    console.log(!value1);

// 7. Equlity
const stringFive = '5';
const numberFive = 5;

    // == loose equality, with type conversion
    console.log(stringFive == numberFive);
    console.log(stringFive != numberFive);

    // === strict equality, no type conversion
    console.log(stringFive === numberFive);
    console.log(stringFive !== numberFive);

    // object equality by reference
    const ellie1 = { name : 'ellie' }; //1과 2는 different reference
    const ellie2 = { name : 'ellie' };
    const ellie3 = ellie1;              //1과 3은 같음.
    console.log(ellie1 == ellie2);  //다른 reference
    console.log(ellie1 === ellie2); // type이 같든 아니든 다른 reference 값
    console.log(ellie1 === ellie3); // 같은 reference

    //equality - puzzler   // variable.js:64:boolean
    console.log(0 == false);
    console.log(0 === false);
    console.log('' == false);
    console.log('' === false);
    console.log(null == undefined);
    console.log(null === undefined);

// 8. Conditional operators : if
// if, else if, else
const name = 'ellie';
if (name ==='ellie'){
    console.log('Welcome, Ellie!');
} else if (name === 'coder') {
    console.log('You are amazing coder');
} else{
    console.log('unknown');
}

// 9. Ternary operator :?
// condition ? value1 : value 2;
console.log(name === 'ellie' ? 'yes' : 'no');

// 10. Switch statement
// use for mutiple if checks
// use for enum-like value check
// use for multiple type checks in TS
// else if ,else if 를 반복한다면 Switch 를 사용하는 것이 좋다.

const browser = 'IE';
switch (browser) {
    case 'IE':
        console.log('go away!');
        break;
    case 'Chrome' :
    case 'Firefox' :
        console.log('love you!');
        break;
    default:
        console.log('same all!');
        break;
}

// 11. Loops
    // while loop, while the condition is truthy,
    // body code is executed.
    let i = 3;
    while ( i > 0) {
        console.log(`while : ${i}`);
        i--;
    }
    // do while loop, body code is executed first,
    // then check the condition
    let j =3;
    do {
        console.log(`do while : ${j}`)
        j--;
    } while (j > 0);

    // for loop, for(begin; condition; step)
    for ( i =3 ; i >0 ; i--) {
        console.log (`for : ${i}`);
    } 
    for (let i =3 ; i >0; i=i-2){
        //inline varialbe declaration 
        console.log(`inline variable for : ${i}`);
    }

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