04강. 코딩의 기본, operator, if, for loop, 코드리뷰 팁

1. String concatenation

console.log('my'+'cat');

console.log('1'+2);

console.log(`string literals: 1 +2 = ${1 + 2}`);

string literals 장점_ 줄바꿈이나 중간에 ''를 이용해도 그대로 문자열로 변환됨

(＼' : 문자열 ＼n : 줄바꿈 ＼t : tab)

 

2. Numeric operators

console.log(1+1);	//add
console.log(1-1);	//substract
console.log(1*1); 	//multiply
console.log(1/1); 	//divide
console.log(1%1); 	//remainder
console.log(1**1); 	//exponentiation

 

3. Increment and decrement operators

pre vs post

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 preDecrement = --counter;
console.log(`preDecrement: ${preDecrement}, counter: ${counter}`);

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

 

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);	//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. Logical operator: ||(or), &&(and), !(not)

const value1 = true;
const value2 = 4 < 2; //false

 

 | | (or)_ finds the first truthy value 하나만 true여도(처음 true이면) true출력, 그이상 불필요한 실행

          _ 간단한 값을 먼저실행하게 앞으로

console.log(`or: ${value1 || value2 || check()}`);
		  //└ true	└ false    └ true
function check(){
	for(let i=0; i<20; i++){
		//wasting time
	console.log('-');
	}
	return true;
}

 

 && (and)_ finds the first falsy value 하나만 false여도 false출력, 그이상 불필요한 실행

often used to compress long if-statement

nullableObject && nullableObject.something

if(nullableObject != null){
    nullableObject.something;
}

 

 !  (not)

console.log(!value1);

 

7. Equality

const stringFive = '5';
const numberFive = 5;

 

 ==  loose equality, with type conversion

console.log(stringFive == numberFive);	//true;
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 = ellie;

console.log(ellie1 == ellie2); 	//false
console.log(ellie1 === ellie2); //false
console.log(ellie1 === ellie3); //true

equlity -puzzler

console.log( 0 == false); //true
console.log( 0 === false); //false

console.log( '' == false); //true
console.log( '' === false); //false

console.log( null == undefined); //true!
console.log( null === undefined); //false

 

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: ? 간단하게 쓰기, 반복사용x

 condition? value1: value2; 

console.log(name === 'ellie'? 'yes':'no');

 

10. Switch statement_ if, else를 반복하기보다 switch사용

use for multiple if checks

use for enum-like value check

use for multiple type checks in TS

const brower = 'IE';

switch(brower){
    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(`whild:${i}`);
    i--;
}

 

 do while  loop, body code is executed first, 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){
	//inline variable declaration_지역변수 선언
    console.log(`inline variable for: ${i}`);
}

nested loops_비추

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

 

break, continue

Q1. iterate from 0 to 10 and print only even SVGAnimatedNumberList(use continue)

for(let i =0; i<=10; i++){
    if(i%2===0){
        console.log(`q1. ${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(`q2.${i}`);
}