[JS] Javascript #3 Summary

Javascript #3 Summary

• 드림코딩 by 엘리: 자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 | 프론트엔드 개발자 입문편 (JavaScript ES6)
  
  
  Caution
  
  강의를 듣고 제가 기억하기 쉽게 기록하여 변형된 내용이 있을 수 있습니다.
  오류가 있거나 해당 글에 문제가 있을 경우 피드백 부탁드립니다.

String Literals

console.log(`string literals: ${1 + 2}`);
console.log(`string literals can use quotes easily like this ''' """ '" "' `);

>>> string literals: 3
>>> string literals can use quotes easily like this ''' """ '" "'

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

>>> preIncrement: 3, counter: 3
>>> postIncrement: 3, counter: 4

Logical Operators

a || b || c

==> 가벼운 연산은 a 에 가깝게 (왼쪽), 무거운 연산은 c 에 가깝게 (오른쪽) 배치하는 것이 좋다.

• ||: or --> finds the first truthy value
  or 의 특징은 여러개의 연산 중 하나라도 true 일 경우 true 를 반환한다.
  즉 || 가 여러개인 연산이 있을 경우 첫번째가 true 이면 뒤의 연산은 진행하지 않고 true 를 반환

• &&: and --> finds the first falsy value
  and 의 특징은 여러개의 연산 중 하나라도 false 일 경우 false 를 반환한다.
  즉 && 가 여러개인 연산이 있을 경우 첫번째가 false 이면 뒤의 연산은 진행하지 않고 false 를 반환

// often used to compress long if-statement
nullableObject && nullableObject.something
// ==>
if (nullableObject != null) {
    nullableObject.something;
}

• !: not

console.log(!true);

>>> false

Equality Operators

Loose Equality

• with type convension

• ==, !=

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

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

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

Strict Equality (Recommended)

• no type convension

• ===, !==

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

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

console.log(0 === false);         // false
console.log('' === false);        // false
console.log(null === undefined);  // false

Object Equality by Reference

const bruce1 = { name: 'bruce' };
const bruce2 = { name: 'bruce' };
const bruce3 = bruce1;  // bruce1 의 Reference value 를 bruce3 도 참조

console.log(bruce1 == bruce2);   // false (각각 다른 Reference 가 저장됨)
console.log(bruce1 === bruce2);  // false

console.log(bruce1 == bruce3);   // true (bruce3 는 bruce1 의 Reference value 를 참조)
console.log(bruce1 === bruce3);  // true

Conditional operators (if)

• if, else if, else

const name = 'bruce';
if (name === 'bruce') {
    console.log(`Welcome!, ${name}`);
} else if (name === 'coder') {
    console.log('You are amazing coder');
} else {
    console.log('unknown');
}

Ternary Operator

• condition ? value1 : value2;
  • value1: condition 이 true 일 경우
  • value2: condition 이 false 일 경우

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

>>> yes

Switch Statement

• use for multiple 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 away!');
        break;
    case 'Chrome':
    case 'Firebox':
        console.log('Love you!');
        break;
    default:
        console.log('same all!');
        break;
}

>>> go away!

Loop

• break: loop 종료

• continue: 지금만 skip 하고 다음 step 으로 넘어감

while

• 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

do while

• do while loop, body code is executed first, then check the condition

let i = 0;

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

>>> do while: 0

for

• for (begin; condition; step) {}

for (i=3; i>0; i--) {
    // i 는 기존에 존재하는 변수이며, 그곳에 새로운 값 할당
    console.log(`for: ${i}`);
}

1. begin 처음 한번 호출
2. condition 조건 확인 후 true 이면 block 실행
3. step 실행
4. condition 조건 확인 후 true 이면 block 실행
5. step 실행
6. . . .

for (let i=3; i>0; i-=2) {
    // block 안에 지역변수 i 를 새롭게 선언 (inline variable 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}`);
    }
}

• O(n^2)

• CPU 에 좋지 않으므로 피하는 것이 좋음

Quiz

• Q1. Iterate from 0 to 10 and print only even numbers (use continue)

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

>>> q1: 0
>>> q1: 2
>>> q1: 4
>>> q1: 6
>>> q1: 8
>>> q1: 10

• Q2. Iterate from 0 to 10 and print numbers until reacing 8 (use break)

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

>>> q2: 0
>>> q2: 1
>>> q2: 2
>>> q2: 3
>>> q2: 4
>>> q2: 5
>>> q2: 6
>>> q2: 7
>>> q2: 8