본문 바로가기
Develope_Web_Programming/01_HTML&CSS&JS

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

by 스타트업_디벨로퍼 2021. 2. 13.
💡
객체 자체는 예를 들어 ellie.name의 경우, ellie는 ref를 찾게 되어 여기서의 name이 ellie를 가르키고 있고 ellie, age의 경우 20을 가르키고 있다!! → 결국 object는 ref의 차이!!
//Note!!

/**
 * Immutable data types : premitive types, froznen object (i.e. object.freeze())
 * Mutable data types : all ojbects by default are mutable in JS
 * favor immutable data type always for a few reasons : 
 * - security
 * - thread safety 
 * - reduce humanm mistakes
 */

 //1.Sring concatenation
 console.log('my' + 'cat'); ///my cat
 console.log('1' + 2); //12
 console.log(`string literals: 1+ 2 = ${1+2}`); //sring literals : 1  + 2 =3

 //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);  // exponetiation

// 3. Increment and decrement operators

 let counter = 2;
 const preIncremetnt = ++ counter;
 counter = counter  + 1;
 preIncrement = counter;

console.log (`preIncrement: %${preIncrement}, counter : ${counter}`);
//3,3
const postIncrement = counter++;
console.log (`postIncrement: %${postIncrement}, counter : ${counter}`);
//3,4

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

//5. Comparison Operators
console.log(10<6);
console.log(10<=6);
console.log(10>6);
console.log(10>=6);

//6. Logical Operators : ||(or) , $$ (and), !(not)
const value1 = true;
const value2 = 4<2;

// ||(or), finds the first truthy value

console.log(`or: ${value1 || value2 || check()}`);

function check(){
    for (let i =0; i < 10; i ++){
        //wasting time
        console.log('bad');
    }
    return true;
}
// 이 경우 short circuit에 의해서 하나라도 true면 바로 종료된다!! 
// 시간 오래걸리는 check()을 앞에 놓으면 절대 안됨~~ 

///&& (and), finds the first falsy value -> 앞에 하나라도 false면 false
console.log(`and: ${value1 && value2 && check()}`);


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

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

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

console.log(stringFive === numberFive); //false
console.log(stringFive !== numberFive); //true


//object equality by reference
const ellie1 = {name : 'ellie'};
const ellie2 = {name : 'ellie'};
const ellie3 = ellie1;
console.log(ellie1 == ellie2); //false (reference)
console.log(ellie1 === ellie2); //false (reference)
console.log(ellie1 === ellie3); //true 

// equality - puzzler
console.log(0 == false); //true
console.log(0 == false); //falsse
console.log('' == false); //true
console.log('' == false); // false
console.log(null == undefined); //true
console.log(null === undefined); //false

// 8. Conditional Operoators : if
// if, else if, else

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

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

//10. Switch Statement
// use for mulitiple if checks
// use for enum-like value check
// use for multiple type checks in TS

const browser = 'IE';
switch (browser) {
    case 'IE':
        console.log('go awya!');
        break;
    case 'Chrome':
        console.log('love you!');
        break;
    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 frist,
//then check the condition (한번은 무조건 실행!! )
do { 
    console.log(`do while: ${i}`);
    i--;
} while(i > 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){
    console.log(`inline variable for: ${i}`);
}

//break, continue
// Q1. iterate form 0 to 10 and print only even numbers (use continue)
for (let i = 0; i<=10; i++){
    if(i%2!=0){
        continue;
    }
    console.log(i);
}

// Q2. 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(i);
}
 

Notion2Tistory

 

boltlessengineer.github.io

출처 : youtu.be/YBjufjBaxHo

 

반응형