lil.dev
Published on

๐ŸŽ‰ JS(4)-๋“œ๋ฆผ์ฝ”๋”ฉ ๊ฐ•์˜ ์ •๋ฆฌ

๊ธ€์“ด์ด

    ๐Ÿ“Œ ๋ชฉ์ฐจ

    Welcome

    โœจ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ ๊ฐ•์˜ (ES5+): ๊ฐ™์ด ๋…ธํŠธ๋ฅผ ์ž‘์„ฑํ•˜๋ฉฐ ๋ฐฐ์›Œ์š” ๐Ÿ“’

    ๐Ÿ’๐Ÿป

    1. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์—ญ์‚ฌ์™€ ๋ชฉ์  ๋ฐ ๋™ํ–ฅ
    2. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋™์ž‘์›๋ฆฌ

    ์—ฐ์‚ฐ.๋ฐ˜๋ณต๋ฌธ(4๊ฐ•)

    ๋‹ค๋ฅธ ์–ธ์–ด์—์„œ๋„ ๊ณตํ†ต์ ์œผ๋กœ ์“ธ ์ˆ˜ ์žˆ๋Š” operators~

    1. String concatenation (๋ฌธ์ž ์—ฐ๊ฒฐ)

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

    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. ++, -- 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. = operators

    let x = 3;
    let y = 6;
    x += y; // x = x + y;
    x -= y;
    x *= y;
    x /= y;
    

    5. <= 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 (||, &&, !)(๋…ผ๋ฆฌ ์—ฐ์‚ฐ์ž)

    ๋น„๊ต ์—ฐ์‚ฐ์ž๋Š” true๊ฐ’์„ ์ฐพ์œผ๋ฉด ๊ทธ ๋’ค๋กœ๋Š” ์—ฐ์‚ฐ์„ ํ•˜์ง€ ์•Š๋Š”๋‹ค.

    ๊ทธ๋Ÿฌ๋ฏ€๋กœ ๊ฐ„๋‹จํ•œ value๊ฐ’์„ ์ œ์ผ ๋จผ์ € ๋†“๋Š”๊ฒŒ ํšจ์œจ์ ์ด๋‹ค. ๋ฌด๊ฑฐ์šด expression์€ ๋งจ ๋’ค์— ๋†“๊ธฐ~!

    7. Equality Operators (==, ===)

    == loose equality, with type conversion ํƒ€์ž…๊นŒ์ง€๋Š” ๋น„๊ตํ•˜์ง€ ์•Š๋Š”๋‹ค.

    === strict equality, no type conversion ํƒ€์ž…๊นŒ์ง€ ๋น„๊ตํ•œ๋‹ค!

    object equality by reference

    const ellie1 = { name: 'ellie' };
    const ellie2 = { name: 'ellie' }; //ellie1๊ณผ ellie2๋Š” ์„œ๋กœ ๋‹ค๋ฅธ ๋ ˆํผ๋Ÿฐ์Šค๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.
    const ellie3 = ellie1;
    console.log(ellie1 == ellie2); //reference๊ฐ’์ด ๋‹ค๋ฅด๋ฏ€๋กœ false
    console.log(ellie1 === ellie2); //reference๊ฐ’์ด ๋‹ค๋ฅด๋ฏ€๋กœ false
    console.log(ellie1 === ellie3); //reference๊ฐ’์„ ellie1์— ํ• ๋‹นํ•œ ๊ฒƒ์ด๋ผ 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 (์กฐ๊ฑด ์—ฐ์‚ฐ์ž)

    if,else if,else

    9. Ternary operators (์‚ผํ•ญ ์—ฐ์‚ฐ์ž)

    condition ? value1 : value2; ๋„ˆ๋ฌด nesting์„ ํ•˜๋ฉด ๊ฐ€๋…์„ฑ์ด ๋–จ์–ด์ง€๋ฏ€๋กœ ๊ฐ„๋‹จํ•œ ๊ฒฝ์šฐ์—์„œ๋งŒ ์“ฐ์ž.

    10. Switch operators (switch ์—ฐ์‚ฐ์ž)

    switch - case if๋ฌธ์„ ๋„ˆ๋ฌด ๋ฐ˜๋ณตํ•˜๊ฒŒ ๋˜๋ฉด switch๋ฌธ์„ ์“ฐ๋Š”๊ฒŒ ์ข‹๋‹ค.

    11. while loop (while ๋ฐ˜๋ณต๋ฌธ)

    while () {} ()์•ˆ์˜ ์‹์ด ์ฐธ์ผ ๋•Œ๋งŒ ์•ˆ์— ์žˆ๋Š” ์‹์„ ๊ณ„์† ๋ฐ˜๋ณตํ•ด์„œ ์‹คํ–‰

    12. do-while loop (do-while ๋ฐ˜๋ณต๋ฌธ)

    do๋ธ”๋Ÿญ์„ ๋จผ์ € ์‹คํ–‰ํ•˜๊ณ  while์ด ์ฐธ์ธ์ง€ ์•„๋‹Œ์ง€ ๊ฒ€์‚ฌ ๋ธ”๋Ÿญ์„ ๋จผ์ € ์‹คํ–‰ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ์š”๊ฑธ ์“ด๋‹ค.

    
    ### 13. for loop (for ๋ฐ˜๋ณต๋ฌธ)
    ```css
    //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}`);
    }
    

    14. nested loop (์ค‘์ฒฉ ๋ฐ˜๋ณต๋ฌธ)

    ์‹คํ–‰ ์†๋„๊ฐ€ ๋Š๋ ค์„œ ๋˜๋„๋ก ์“ฐ์ง€ ์•Š๋Š”๊ฒŒ ์ข‹๋‹ค.

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

    break, continue

    continue๋Š” if๋ฌธ์ด ์ฐธ์ผ ๋•Œ ๋„˜์–ด๊ฐ€๋Š” ๊ฒƒ.