자바스크립트 강의노트 #4 - 코딩의 기본 operator, if, for loop 코드리뷰 팁

아래 내용은 위 강의 내용을 토대로 작성한 개인 공부용 학습 자료입니다.

기본적으로 강의 내용을 주로 요약하였지만, 일부 내용은 강의 내용과 다를 수 있습니다.

 

Variable (let) vs Constant (const) 복습

출처: 드림코딩

// Variable, rw(read/write)
// let (added in ES6)
let globalName = 'global name'; // Global Variable 선언 및 값 할당
{
    let name = 'kevin'; // Local Variable 선언 및 값 할당
    console.log(name); // kevin 출력
    name = 'hello'; // Variable 값 변경
    console.log(name); // hello 출력
    console.log(globalName); // global name 출력
}
console.log(name); // 미출력
console.log(globalName); // global name 출력

// Variable은 메모리의 값을 읽거나 쓸 수 있다.

 

출처: 드림코딩

// Constant, r(read only)
// use const whenever possible.
// only use let if variable needs to change.

// favor immutable data type always for a few reasons:
//   - security
//   - thread safety
//   - reduce human mistakes
const daysInWeek = 7;
const maxNumber = 5;

 

 

Mutable vs Immutable 데이터 타입 복습

// Note!
// Immutable data types: primitive types, frozen objects (i.e. object.freeze())
// Mutable data types: all objects by default are mutable in JS
// favor immutable data type always for a fe reasons:
//   - security
//   - thread safety
//   - reduce human mistakes

 

 

1. String concatenation

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

 

 

2. Numeric operators

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

 

 

3. Increment and decrement operators

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

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

 

 

4. Assignment operators

// 4. Assignment operators
let x = 3;
let y = 6;
x += y;
console.log(`x: ${x}, y: ${y}`) // x: 9, y: 6
x -= y;
console.log(`x: ${x}, y: ${y}`) // x: 3, y: 6
x *= y;
console.log(`x: ${x}, y: ${y}`) // x: 18, y: 6
x /= y;
console.log(`x: ${x}, y: ${y}`) // x: 3, y: 6

 

 

5. Comparision operators

// 5. Comparison operators
console.log(10 < 6); // false
console.log(10 <= 6); // false
console.log(10 > 6); // true
console.log(10 >= 6); // ture

 

 

6. Logical operators: || (or), && (and), ! (not)

// 6. Logical operators: || (or), && (and), ! (not)
const value1 = false;
const value2 = 4 < 2;
const value3 = true;
const value4 = 4 > 2;

// || (or), finds the first truthy value
console.log(`or: ${value1 || value2 || check()}`); // false, false, true -> true
console.log(`or: ${value3 || value2 || check()}`); // true -> true
// 조건 중 하나라도 true이면 true 반환
// 앞 조건 부터 탐색해서 true 나오면 탐색 종료 후 반환하므로 무거운 로직은 후순위 조건으로 두는게 좋음.

// && (and), finds the first falsy value
console.log(`and: ${value1 && value2 && check()}`); // false -> false
console.log(`and: ${value3 && value4 && check()}`); // true, true, true -> true

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

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

// 시간 낭비하는 임의의 함수
function check() {
    for (let i = 0; i < 10; i++) {
        // wasting time
        console.log('✔');
    }
    return true;
}

 

 

7. Equality

// 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 kevin1 = {name: 'kevin'};
const kevin2 = {name: 'kevin'};
const kevin3 = kevin1;

console.log(kevin1 == kevin2); // false
console.log(kevin1 === kevin2); // false
console.log(kevin1 === kevin3); // true

// equality = 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

// 8. Conditional operators: if
// if, else if, else
const name = 'kevin';
if (name === 'kevin') {
    console.log('Welcome, Kevin!');
} else if (name === 'coder') {
    console.log('You are amazing coder!');
} else {
    console.log("You are stranger!")
}

 

 

9. Ternary operator: ?

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

 

 

10. Switch statement

// 10. Switch statement
// use for multiple if checks
// use for enum-like value check
// use for multiple type checks in TS
const browser = 'Firefox';
switch (browser) {
    case 'IE':
        console.log('go away!');
        break;
    case 'Chrome':
    case 'Firefox':
        console.log('Good!');
        break;
    default:
        console.log('same all!');
        break;
}

 

 

11. Loops

// 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.
i = 3;
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 -> O(n^2) 이므로 피하는게 좋음
for (let i = 0; i < 2; i++) {
    for (let j = 0; j < 2; j++) {
        console.log(`i: ${i}, j: ${j}`);
    }
}

// break, continue
// 01. iterate from 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);
}


// 02. 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);
}