(SEB_FE) Section1 Unit9 JavaScript Koans

PYMยท2023๋…„ 3์›” 3์ผ
0

(SEB_FE) SECTION1

๋ชฉ๋ก ๋ณด๊ธฐ
34/38
post-thumbnail

์ฝ”์Šค ์‹œ์ž‘ ํ›„ ์ฒซ Koans! ๋ญ”๊ฐ€ ์‹ ๊ธฐํ•˜๊ณ  ์žฌ๋ฐŒ์—ˆ๋‹ค...!
๊ฒŒ์ž„ ํ€˜์ŠคํŠธ๋ฅผ ๊นจ๋‚˜๊ฐ€๋Š” ๊ฒƒ๋„ ๊ฐ™์•„์„œ, ๋นจ๊ฐ„ ๊ธ€์”จ๊ฐ€ ์ดˆ๋ก์ƒ‰์œผ๋กœ ๋ฐ”๋€” ๋•Œ ๋งˆ๋‹ค ์งœ๋ฆฟํ–ˆ๋‹ค.

์˜ค๋Š˜์˜ ๋ฒจ๋กœ๊ทธ๋Š” JavaScript Koans๋ฅผ ํ’€๋ฉด์„œ ํ—ท๊ฐˆ๋ ธ๋˜ ๋ถ€๋ถ„์ด๋‚˜, ์ƒˆ๋กœ์ด ์•Œ๊ฒŒ๋œ ๋ถ€๋ถ„์„ ์ •๋ฆฌํ•ด ๋ดค๋‹ค! ์ž์ฃผ์ž์ฃผ ๋“ค์–ด์™€์„œ ๋‹ค์‹œ ๋ณด๋ฉด์„œ ์™„์ „ํžˆ ๋‚ด๊ฒƒ์œผ๋กœ ๋งŒ๋“ค์ž!!

โญType

๐Ÿ’ซ ์—„๊ฒฉํ•œ ๋™์น˜ ์—ฐ์‚ฐ์ž( === )๋ฅผ ์‚ฌ์šฉํ•˜์ž!

expect(1 + "1").to.equal("11");
expect(123 - "1").to.equal(122);
expect(1 + true).to.equal(2);
expect("1" + true).to.equal("1true");
  • ์œ„ ์˜ˆ์‹œ๋“ค ์ฒ˜๋Ÿผ JS์—๋Š” ๋‹ค์†Œ ์ดํ•ดํ•˜๊ธฐ ํž˜๋“  ๋ถ€๋ถ„๋“ค์ด ์กด์žฌํ•œ๋‹ค.
    ์ด๋Ÿฐ ๋ณ„๋‚œ(quirky) ๋ถ€๋ถ„๋“ค์„ ๋”ฐ๋กœ ๋ชจ์•„ ๋‘” ์ €์žฅ์†Œ๊ฐ€ ๋”ฐ๋กœ ์žˆ์„์ •๋„!

  • ์ด๋Ÿฐ ๋ณ„๋‚œ ํŠน์„ฑ๋“ค์€ ์ „๋ถ€ ์•”๊ธฐํ•ด์„œ ๋Œ€์‘ํ•˜๋ ค ํ•˜์ง€ ๋ง๊ณ , ์˜ฌ๋ฐ”๋ฅธ ์ฝ”๋”ฉ ์Šต๊ด€์„ ๊ธฐ๋ฅด์ž. ์ตœ๋Œ€ํ•œ ๊ฐ™์€ ํƒ€์ž…๋ผ๋ฆฌ ์—ฐ์‚ฐ์„ ํ•˜๊ณ , ์ฆ‰ ์—„๊ฒฉํ•œ ๋™์น˜ ์—ฐ์‚ฐ(===)์„ ์‚ฌ์šฉํ•˜๊ณ , ์กฐ๊ฑด๋ฌธ์— ๋น„๊ต ์—ฐ์‚ฐ์„ ๋ช…์‹œํ•˜์ž.

๐Ÿ’ซ ์›์‹œ ์ž๋ฃŒํ˜• VS ์ฐธ์กฐ ์ž๋ฃŒํ˜•

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์›์‹œ ์ž๋ฃŒํ˜•(primitive data type ๋˜๋Š” ์›์‹œ๊ฐ’)์€
    ๊ฐ์ฒด๊ฐ€ ์•„๋‹ˆ๋ฉด์„œ method๋ฅผ ๊ฐ€์ง€์ง€ ์•Š๋Š” ์•„๋ž˜ 6๊ฐ€์ง€์˜ ๋ฐ์ดํ„ฐ
    โžก string, number, bigint, boolean, undefined, symbol, (null)

    • ์›์‹œ ์ž๋ฃŒํ˜•์€ ๊ฐ’ ์ž์ฒด์— ๋Œ€ํ•œ ๋ณ€๊ฒฝ์ด ๋ถˆ๊ฐ€๋Šฅ(immutable)

    • ์ƒˆ๋กœ์šด ๊ฐ’์œผ๋กœ ์žฌํ• ๋‹น์€ ๊ฐ€๋Šฅํ•˜๋‹ค!

    • ์›์‹œ ์ž๋ฃŒํ˜•์„ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•  ๊ฒฝ์šฐ, ๊ฐ’ ์ž์ฒด์˜ ๋ณต์‚ฌ๊ฐ€ ์ผ์–ด๋‚œ๋‹ค.
      โžก ์ฆ‰, ์ฃผ์†Œ๊ฐ€ ์•„๋‹ˆ๋ผ ๊ฐ’ ์ž์ฒด๋ฅผ ๋ณต์‚ฌํ•ด์„œ ์•„์˜ˆ ์ƒˆ๋กœ์šด ๋ณ€์ˆ˜์— ํ• ๋‹นํ•œ ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ๋ณ€๊ฒฝํ•ด๋„ ์›๋ณธ ์›์‹œ ์ž๋ฃŒํ˜•์˜ ๊ฐ’์€ ๋ณ€ํ•˜์ง€ ์•Š๋Š”๋‹ค.

    • ์›์‹œ ์ž๋ฃŒํ˜• ๋˜๋Š” ์›์‹œ ์ž๋ฃŒํ˜•์˜ ๋ฐ์ดํ„ฐ๋ฅผ ํ•จ์ˆ˜์˜ ์ „๋‹ฌ์ธ์ž๋กœ ์ „๋‹ฌํ•  ๊ฒฝ์šฐ๋„ ๊ฐ’ ์ž์ฒด์˜ ๋ณต์‚ฌ

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์›์‹œ ์ž๋ฃŒํ˜•์ด ์•„๋‹Œ ๋ชจ๋“  ๊ฒƒ์€ ์ฐธ์กฐ ์ž๋ฃŒํ˜•.
    ๋ฐฐ์—ด([])๊ณผ ๊ฐ์ฒด({}), ํ•จ์ˆ˜(function(){})๊ฐ€ ๋Œ€ํ‘œ์ 

    • ์ฐธ์กฐ ์ž๋ฃŒํ˜•์„ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•  ๊ฒฝ์šฐ, ๋ฐ์ดํ„ฐ์˜ ์ฃผ์†Œ๊ฐ€ ์ €์žฅ

    • ๋ฐฐ์—ด์ด ์–ผ๋งˆ๋‚˜ ๋งŽ์€ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”์ง€๊ฐ€ ํ”„๋กœ๊ทธ๋žจ์˜ ์‹คํ–‰ ์ค‘ ์ˆ˜์‹œ๋กœ ๋ณ€๊ฒฝ๋  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋”ฐ๋กœ ๋ช…์‹œํ•˜์ง€ ์•Š๋Š” ์ด์ƒ 100๋งŒ๊ฐœ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ผ์ผํžˆ ๋ณต์‚ฌํ•˜๋Š” ๊ฒƒ์€ ์ƒ๋‹นํžˆ ๋น„ํšจ์œจ์ ์ด๋‹ค. ๋”ฐ๋ผ์„œ ์ผ๋‹จ์€ ์ฃผ์†Œ๋งŒ ๋ณต์‚ฌํ•ด์„œ ๋™์ผํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ”๋ผ๋ณด๊ฒŒ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ํšจ์œจ์ ์ด๋‹ค.

    • arr.slice๋Š” arr์˜ ๊ฐ’ ์ž์ฒด๋ฅผ ๋ณต์‚ฌํ•˜์—ฌ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋ฆฌํ„ด

    • ๊ฐ์ฒด(Object)๋ฅผ ํ•จ์ˆ˜์˜ ์ „๋‹ฌ์ธ์ž๋กœ ์ „๋‹ฌํ•  ๊ฒฝ์šฐ, ์ฃผ์†Œ(reference)๊ฐ€ ์ „๋‹ฌ๋œ๋‹ค.

    • 'Object.assign'์„ ํ†ตํ•œ ๋ณต์‚ฌ๋Š” reference variabled์˜ ์ฃผ์†Œ๋งŒ ๋ณต์‚ฌ
      ์ฆ‰, ๊ทธ ์•ˆ์— ์žˆ๋Š” ๋˜ ๋‹ค๋ฅธ ๊ฐ์ฒด๋Š” ๋ณต์‚ฌํ•˜์ง€ ์•Š๋Š”๋‹ค. (์–•์€๋ณต์‚ฌ์™€ ๊นŠ์€ ๋ณต์‚ฌ)

    • ์–•์€ ๋ณต์‚ฌ์™€ ๊นŠ์€ ๋ณต์‚ฌ์— ๋Œ€ํ•ด ๋” ์•Œ์•„๋ณด์ž.

  • Array.from = ์œ ์‚ฌ๋ฐฐ์—ด ๊ฐ์ฒด๋ฅผ ๋ฐฐ์—ด๋กœ ๋ฐ”๊ฟ”์ค€๋‹ค.


โญconst

  • const๋กœ ์„ ์–ธ๋œ ๋ณ€์ˆ˜๋Š” ์žฌํ• ๋‹น์€ ๋ถˆ๊ฐ€๋Šฅํ•˜์ง€๋งŒ, ์ƒˆ๋กœ์šด ์š”์†Œ์˜ ์‚ญ์ œ, ์ถ”๊ฐ€๋Š” ๊ฐ€๋Šฅํ•˜๋‹ค.
  • deleteํ•ด์„œ ์‚ญ์ œํ•œ ๋ณ€์ˆ˜๋Š” ์กฐํšŒ์‹œ undefined์ด๋‹ค.

โญscope

let funcExpressed = "to be a function";

expect(typeof funcDeclared).to.equal("function");
expect(typeof funcExpressed).to.equal("string");

 //ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ์œผ๋กœ ์ •์˜๋œ ํ•จ์ˆ˜๋Š” ํ˜ธ์ด์ŠคํŒ…์ด ์ผ์–ด๋‚œ ๊ฒƒ ์ฒ˜๋Ÿผ ๋ณด์ธ๋‹ค. 
 //๋ฐ‘์— ์„ ์–ธ ํ–ˆ๋Š”๋ฐ๋„ ์œ„์—์„œ๋„ ์กฐํšŒ ๋ฐ ์‚ฌ์šฉ๊ฐ€๋Šฅ
   function funcDeclared() {
     return "this is a function declaration";
   }

 //ํ•จ์ˆ˜ ํ‘œํ˜„์‹์œผ๋กœ ์ •์˜๋œ ํ•จ์ˆ˜๋Š” ํ˜ธ์ด์ŠคํŒ…์ด ์ผ์–ด๋‚˜์ง€ ์•Š๋Š”๋‹ค. 
 //๋”ฐ๋ผ์„œ ์ƒ๋‹จ typeof ์ฝ”๋“œ๋Š” string์ด ๋‚˜์˜จ๋‹ค. 
   funcExpressed = function () {
     return "this is a function expression";
   };
let message = "Outer";

    function getMessage() {
  //ํ•จ์ˆ˜ ๋‚ด๋ถ€์— message๊ฐ€ ์žˆ๋‚˜? 
  // ์—†์œผ๋ฉด ์™ธ๋ถ€์ฐธ์กฐ 
      return message;
    }

    function shadowGlobal() {
  //ํ•จ์ˆ˜ ๋‚ด๋ถ€์— massage๊ฐ€ ์žˆ๋‚˜? 
  // ์žˆ์œผ๋‹ˆ ๋‚ด๋ถ€ ์ฐธ์กฐ 
      let message = "Inner";
      return message;
    }

    function shadowGlobal2(message) {
  //๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ ์žˆ์œผ๋‹ˆ, ๋งค๊ฐœ๋ณ€์ˆ˜ ์ฐธ์กฐ 
      return message;
    }

    function shadowParameter(message) {
  //์™ธ๋ถ€ ๋ณ€์ˆ˜์— ์žฌํ• ๋‹น ๋œ๋‹ค. 
  // ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์™ธ๋ถ€๋กœ ์ „๋‹ฌ๋˜๋„๋ก ํ•ด๋‘๊ณ ์„  ๊ตณ์ด ๋‚ด๋ถ€์—์„œ ์žฌํ• ๋‹น? ์ด๋Ÿฌ์ง€ ๋ง์ž.
      message = "Do not use parameters like this!";
      return message;
    }

    expect(getMessage()).to.equal("Outer");
    expect(shadowGlobal()).to.equal("Inner");
    expect(shadowGlobal2("Parameter")).to.equal("Parameter");
    expect(shadowParameter("Parameter")).to.equal(
      "Do not use parameters like this!"
    );
  • ํ•จ์ˆ˜ ์•ˆ์—์„œ ๋‹ค์‹œ let์œผ๋กœ ์„ ์–ธํ•˜๋ฉด ๊ทธ๋ ‡๊ฒŒ ์ƒˆ๋กœ ์„ ์–ธ๋œ ๋ณ€์ˆ˜๊ฐ€ ํ•จ์ˆ˜ ์•ˆ์—์„œ ํ™œ์šฉ ๊ฐ€๋Šฅ. ์š”๋ ‡๊ฒŒ ์กฐ๋ ‡๊ฒŒ ํ™œ์šฉํ•œ ๊ฐ’์„, ๋ฆฌํ„ด ๊ฐ’์œผ๋กœ ๋„˜๊ฒจ์ค„ ์ˆ˜๋„ ์žˆ๋‹ค.
  • ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์‚ฌ์šฉํ•ด๋„ ๋™์ผํ•˜๊ฒŒ ๊ฐ€๋Šฅ!
  • ํด๋กœ์ €๋Š” ๋‚ด๋ถ€(inner) ํ•จ์ˆ˜๊ฐ€ ์™ธ๋ถ€(outer) ํ•จ์ˆ˜์˜ ์ง€์—ญ ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.

โญArrow Function

 const htmlMaker = (tag) => (textContent) =>
      `<${tag}>${textContent}</${tag}>`;
    expect(htmlMaker("div")("code states")).to.eql("<div>code states</div>");
  • html ํƒœ๊ทธ ๊ฐ’์„ ๋งŒ๋“œ๋Š” JS ์ฝ”๋“œ๋ฅผ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋กœ ์ž‘์„ฑํ•œ ๊ฒƒ.
  • ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” ์ž์‹ ์˜ this๊ฐ€ ์—†๋‹ค.
  • ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์—์„œ์˜ this๋Š” ์ž์‹ ์„ ๊ฐ์‹ผ ์ •์  ๋ฒ”์œ„(lexical context)์ด๋‹ค.
    (์ „์—ญ์—์„œ๋Š” ์ „์—ญ ๊ฐ์ฒด)
  • ํ˜„์žฌ ๋ฒ”์œ„์—์„œ ์กด์žฌํ•˜์ง€ ์•Š๋Š” this๋ฅผ ์ฐพ์„ ๋•Œ, ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ๋ฐ”๋กœ ๋ฐ”๊นฅ ๋ฒ”์œ„์—์„œ this๋ฅผ ์ฐพ๊ฒŒ ๋œ๋‹ค.

โญSpread Syntax

๐Ÿ’ซ rest parameter

  • Rest Parameter๋Š” ํ•จ์ˆ˜์˜ ์ „๋‹ฌ์ธ์ž๋ฅผ ๋ฐฐ์—ด๋กœ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๊ฒŒ ํ•œ๋‹ค.
  • rest parameter๋Š” ํ•ญ์ƒ ๋ฐฐ์—ด์ด๋‹ค!
 // rest parameter๋Š” ํ•ญ์ƒ ๋ฐฐ์—ด
    function getAllParams(required1, required2, ...args) {
      return [required1, required2, args];
    }
    expect(getAllParams(123)).to.deep.equal([123, undefined, []]);

โญ๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น(Destructuring Assignment)

  • ๋ฐฐ์—ด์ด๋‚˜ ๊ฐ์ฒด์˜ ์†์„ฑ์„ ํ•ด์ฒดํ•˜์—ฌ ๊ทธ ๊ฐ’์„ ๊ฐœ๋ณ„ ๋ณ€์ˆ˜์— ๋‹ด์„ ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” Javascript ํ‘œํ˜„์‹

๐Ÿ’ซ ๋ฐฐ์—ด

1. ๋ฐฐ์—ด์˜ ๋ถ„ํ•ด

const array = ["code", "states", "im", "course"];

const [first, second] = array;
expect(first).to.eql("code");
expect(second).to.eql("states");

const result = [];
function foo([first, second]) {
	result.push(second);
	result.push(first);
}

foo(array);
expect(result).to.eql(["states", "code"]);

2. rest/spread ๋ฌธ๋ฒ•์„ ๋ฐฐ์—ด ๋ถ„ํ•ด์— ์ ์šฉ

const array = ["code", "states", "im", "course"];
const [start, ...rest] = array;
expect(start).to.eql("code");
expect(rest).to.eql(["states", "im", "course"]);

// ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฌธ๋ฒ•์€ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค. 
//ํ• ๋‹นํ•˜๊ธฐ ์ „ ์™ผ์ชฝ์—๋Š”, rest ๋ฌธ๋ฒ• ์ดํ›„์— ์‰ผํ‘œ๊ฐ€ ์˜ฌ ์ˆ˜ ์—†๋‹ค!
// const [first, ...middle, last] = array

๐Ÿ’ซ ๊ฐ์ฒด

1. ๊ฐ์ฒด์˜ ๋‹จ์ถ•(shorthand) ๋ฌธ๋ฒ•

const name = "๊น€์ฝ”๋”ฉ";
    const age = 28;

    const person = {
      name,
      age,
      level: "Junior",
    };
    expect(person).to.eql({ name: "๊น€์ฝ”๋”ฉ", age: 28, level: "Junior" });
  • ์ด๋ ‡๊ฒŒ ๋ฏธ๋ฆฌ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜์—ฌ ๊ฐ’์„ ํ• ๋‹นํ•ด ๋‘๊ณ  ๊ทธ ๋ณ€์ˆ˜๋ฅผ ๊ฐ์ฒด ์•ˆ์— ๋„ฃ์„ ์ˆ˜ ์žˆ๋‹ค.

2. ๊ฐ์ฒด ๋ถ„ํ•ด

const student = { name: "๋ฐ•ํ•ด์ปค", major: "๋ฌผ๋ฆฌํ•™๊ณผ" };

    const { name } = student;
    expect(name).to.eql("๋ฐ•ํ•ด์ปค");

3. rest/spread ๋ฌธ๋ฒ•์„ ๊ฐ์ฒด ๋ถ„ํ•ด์— ์ ์šฉ

const user = {
      name: "๊น€์ฝ”๋”ฉ",
      company: {
        name: "Code States",
        department: "Development",
        role: {
          name: "Software Engineer",
        },
      },
      age: 35,
    };

const changedUser = {
	...user,
	name: "๋ฐ•ํ•ด์ปค",
	age: 20,
};

const overwriteChanges = {
	name: "๋ฐ•ํ•ด์ปค",
	age: 20,
	...user,
};
//spread syntax๋กœ user๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ ์ „์— name๊ณผ age์— ๊ฐ’์„ ๋ถ€์—ฌํ•ด์„œ
//๋ถˆ๋Ÿฌ์˜ค๋ฉด ๋‹ค์‹œ ์›๋ณธ user์˜ ๊ฐ’์œผ๋กœ ๋ฎ์–ด์”Œ์›Œ์ง„๋‹ค. 

const changedDepartment = {
	...user, //์›๋ณธ user ๊ฐ’ ๋ถˆ๋Ÿฌ์˜ด
	company: {
	...user.company, //์›๋ณธ user์˜ company ๊ฐ’ ๋ถˆ๋Ÿฌ์˜ด
	department: "Marketing", //๋ถˆ๋Ÿฌ์˜จ ๊ฐ’ ์ค‘, department ๋ถ€๋ถ„ ๊ฐ’ ๋ณ€๊ฒฝ
	},
};

expect(changedUser).to.eql({
	name: "๋ฐ•ํ•ด์ปค",
	company: {
		name: "Code States",
		department: "Development",
		role: {
		name: "Software Engineer",
		},
	},
	age: 20,
});

expect(overwriteChanges).to.eql({
	name: "๊น€์ฝ”๋”ฉ",
	company: {
		name: "Code States",
		department: "Development",
		role: {
		name: "Software Engineer",
		},
	},
	age: 35,
});

expect(changedDepartment).to.eql({
	name: "๊น€์ฝ”๋”ฉ",
	company: {
		name: "Code States",
		department: "Marketing",
		role: {
		name: "Software Engineer",
		},
	},
	age: 35,
});
profile
๋ชฉํ‘œ๋Š” "ํ•จ๊ป˜ ์ผํ•˜๊ณ  ์‹ถ์€, ํ•จ๊ป˜ ์ผํ•ด์„œ ์ข‹์€" Front-end ๊ฐœ๋ฐœ์ž

0๊ฐœ์˜ ๋Œ“๊ธ€