JS 코딩의 기본 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

 

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

 

 

3. Increment and decrement operators

 

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

 

++를 앞에 붙여주면 그걸 바로 preIncrement라고 한다.

이거는  아래의 코드와 동일한 의미이다.

 

counter = counter + 1;
preIncrement = counter;

 

반대로 postIncrement를 알아보자.

 

let counter = 2;
const postIncrement = counter++;

// postIncrement = counter;
// counter = counter + 1;

 

 

 postDecrement와  preDecrement도 이처럼 값이 하나씩 -되는 것이다.

 

 

4. Assignmnet 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 operators;  || (or), && (and), ! (not)

 

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


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

// && (and), finds the first falsy value
console.log(`and: ${value1 && value2 && check()}`);

// often used to compress long if-statement
// nullableObject && 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);

||은 or 연산자이기때문에, 

앞에서 true가 나오면 거기서 멈춘다.

그래서 심플한 value들을 앞에 두는게 좋지, function과 같은 heavy한 값들을 앞에다 두면 

heavy한 것부터 처리가되기때문에 좋지 않음.

 

반면에, 

 

&&연산자는 and연산자이기때문에,

앞에 value1에서 false가 나오면

"아 게임 끝났네.. " 하면서 바로 실행 종료! (뒤에 친구들은 아예 실행이 되지 않음)

왜나면 하나라도 false가 나오면 안되기 떄문이다.

그래서 and도 heavy한 operation일수록 뒤에 넣어주는게 좋다.

 

마지막 

! not 연산자는 값을 반대로 바꾸어줌. true-> false / false -> true 로!

 

 

7. Equality operators

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 = ellie1;
console.log(ellie1 == ellie2);   // false -> ellie1과 ellie2에는 각가 다른 레퍼런스가 저장되어있어서 false
console.log(ellie1 === ellie2);  // false -> 똑같은 타입이든 아니던 레퍼런스 값이 다르기 때문에 false
console.log(ellie1 === ellie3);  // true -> ellie1이 가진 레퍼런스 벨류를 3으로 할당했기 떄문에. 


// equality - puzzler
console.log(0 == false);   // true
console.log(0 === false);   // false  -> 0은 boolea타입이 아니기 때문에. false가 나오지 않음.
console.log('' == false);   // true
console.log('' === false);   // false -> undfined 값도 boolean타입이 아니어서 false가 나오지 않음.
console.log(null == undefined);  // true -> null과 undefined 가 같은 것으로 간주됨.
console.log(null === undefined);   // false -> type이 다르니까 아니얏! 

 

 

8. If operators // 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('unknwon');
}

 

if () -> ()에 있는게 true면 그 안에 있는 {}값을 실행하게 된다.

else if -> 그러면 넌 coder니?

else -> 얘도 아니고 얘도 아니면 실행되는 값.

 

 

9. Ternary operator: ?  // condition ? value1 : value2;

 

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

? 는 아래와 같다.

'ellie'가 true니? 그러면 좌항인 'yes'값을 실행하고, 아니면 우항인 'no'값을 실행해.

 

긴 구문같은 경우는 if, switch operator를 쓰는게 좋고, 

이 ternary operator는 간단할 경우에 사용하는 것이 좋다.

 

 

10. Switch operators

// use for multiple if checks

// use for enum-like value check

// use for mutiple type checks in TS

 

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--;
}

 

false값이 나올 때까지 loop됨. 계속 반복됨. 

 

반대로, 

 

do while loop가 있다.

 

// do while loop, body code is executed first,

// then check the condition.

 

do {
	console.log(`do while: ${i}`);
    i--;
} while (i > 0);