👩‍💻 Koans.

1. Scope.

---

1-1. 함수 선언식(declaration)과 함수 표현식(expression)의 차이를 확인합니다.

• 
    let funcExpressed = "to be a function";
  
    expect(typeof funcDeclared).to.equal("function"); // 선언식 함수는 function
    expect(typeof funcExpressed).to.equal("string"); // let funcExpressed으로 선언이 먼저 되어서.
  
    function funcDeclared() {
      return "this is a function declaration";
    }
  
    funcExpressed = function () {
      return "this is a function expression";
    };
  
    const funcContainer = { func: funcExpressed }; // funcContainer는 funcContainer 객체내에 func을 호출..?
    expect(funcContainer.func()).to.equal("this is a function expression"); // 초기값인 funcExpressed에 재할당.
  
    funcContainer.func = funcDeclared;
    expect(funcContainer.func()).to.equal("this is a function declaration"); // funcDeclared 리턴값 할당

1-2. default parameter에 대해 확인합니다.

•   function defaultParameter(num = 5) {  // 매개변수 안에 값이 없으면 기본값은 5.
      return num;
    }
  
    expect(defaultParameter()).to.equal(5);  // 기본값 5 할당
    expect(defaultParameter(10)).to.equal(10);  // 매개변수로 10을 주었으므로 10이 출력
  
    function pushNum(num, arr = []) {  // num을 배열(arr)로 출력
      arr.push(num);
      return arr;
    }
  
    expect(pushNum(10)).to.deep.equal([10]);
    expect(pushNum(20)).to.deep.equal([20]);
    expect(pushNum(4, [1, 2, 3])).to.deep.equal([1, 2, 3, 4]);

1-3. lexical scope와 closure에 대해 다시 확인합니다.

• let age = 27;
      let name = "jin";
      let height = 179;
  
      function outerFn() {
        let age = 24;
        name = "jimin";
        let height = 178;
  
        function innerFn() {
          age = 26;
          let name = "suga"; //선언된 변수는 그 함수 내에서만 사용할수 있다,
          return height;
        }
  
        innerFn();
  
        expect(age).to.equal(26);
        expect(name).to.equal("jimin");
  
        return innerFn;
      }
  
      const innerFn = outerFn();
  
      expect(age).to.equal(27);
      expect(name).to.equal("jimin");
      expect(innerFn()).to.equal(178);

2. Primitive & Reference

---

2-1. 참조 자료형을 변수에 할당할 경우, 데이터의 주소가 저장됩니다

•  const overTwenty = ["hongsik", "minchul", "hoyong"];
    let allowedToDrink = overTwenty;
  
    overTwenty.push("san");
    expect(allowedToDrink).to.deep.equal([
      "hongsik",
      "minchul",
      "hoyong",
      "san",
    ]);
    overTwenty[1] = "chanyoung";
    expect(allowedToDrink[1]).to.deep.equal("chanyoung");
  
    const ages = [22, 23, 27];
    allowedToDrink = ages;
    expect(allowedToDrink === ages).to.equal(true); //두 변수가 같은 주소를 참조하고 있기 때문.
    expect(allowedToDrink === [22, 23, 27]).to.equal(false); //배열을 복사하지 않고 참조만 하고 있기 때문.
  
    const nums1 = [1, 2, 3];
    const nums2 = [1, 2, 3];
    expect(nums1 === nums2).to.equal(false);
  
    const person = {
      son: {
        // === boy
        age: 9, // 20
      },
    };
  
    const boy = person.son;
    boy.age = 20;
    expect(person.son.age).to.equal(20);
    expect(person.son === boy).to.equal(true);
    expect(person.son === { age: 9 }).to.equal(false);
    expect(person.son === { age: 20 }).to.equal(false);

• 1. [1, 2, 3]; : [1, 2, 3]이라는 데이터가 heap에 저장되지만 변수 할당이 되지 않아 주소는 어디에도 저장되지 않는다.
• 2. const num1 = [1, 2, 3]; : [1, 2, 3]이라는 데이터가 heap에 저장되고, 그 주소가 변수 num1에 저장된다.
• 3. const num2 = [1, 2, 3]; : [1, 2, 3]이라는 데이터가 heap에 저장되고, 그 주소가 변수 num2에 저장된다.
     -> 1), 2), 3)에서 말하는 주소는 전부 다른 주소입니다.

3. Array

---

3-1. Array의 기본을 확인합니다.

• const emptyArr = [];
      expect(typeof emptyArr === "array").to.equal(false);
      expect(emptyArr.length).to.equal(0);
  
      const multiTypeArr = [
        0,
        1,
        "two",
        function () {
          return 3;
        },
        { value1: 4, value2: 5 },
        [6, 7],
      ];
      
      expect(multiTypeArr.length).to.equal(6);  // [0, 1, 'two', ƒ, {…}, Array(2)]
      expect(multiTypeArr[0]).to.equal(0); 
      expect(multiTypeArr[2]).to.equal("two");
      expect(multiTypeArr[3]()).to.equal(3);
      expect(multiTypeArr[4].value1).to.equal(4);
      expect(multiTypeArr[4]["value2"]).to.equal(5); 
      expect(multiTypeArr[5][1]).to.equal(7);

4. Object

---

4-1. Object의 기본을 확인합니다.

• const emptyObj = {};
      expect(typeof emptyObj === "object").to.equal(true);
      expect(emptyObj.length).to.equal(undefined); // Object.keys()를 사용해서 배열로 반환 후 .length로 길이 확인
  
      const megalomaniac = {
        mastermind: "Joker",
        henchwoman: "Harley",
        getMembers: function () {
          return [this.mastermind, this.henchwoman];
        },
        relations: ["Anarky", "Duela Dent", "Lucy"],
        twins: {
          "Jared Leto": "Suicide Squad",
          "Joaquin Phoenix": "Joker",
          "Heath Ledger": "The Dark Knight",
          "Jack Nicholson": "Tim Burton Batman",
        },
      };
  
      expect(megalomaniac.length).to.equal(undefined);
      expect(megalomaniac.mastermind).to.equal("Joker");
      expect(megalomaniac.henchwoman).to.equal("Harley");
      expect(megalomaniac.henchWoman).to.equal(undefined);
      expect(megalomaniac.getMembers()).to.deep.equal(["Joker", "Harley"]);
      expect(megalomaniac.relations[2]).to.equal("Lucy");
      expect(megalomaniac.twins["Heath Ledger"]).to.deep.equal("The Dark Knight");

5. Destructuring

---

5-1. rest/spread 문법을 객체 분해에 적용할 수 있습니다 #3

• 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 문이 뒤에 오면 앞에 할당된 문법은 초기화
      };
  
      const changedDepartment = {
        ...user,
        company: {
          ...user.company,
          department: "Marketing",
        },
      };
  
      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: "Development",
          role: {
            name: "Software Engineer",
          },
        },
        company: {
          name: "Code States",
          department: "Marketing",
          role: {
            name: "Software Engineer",
          },
        },
        age: 35,
      });

⚡참조

---

• this_mdn참조
• Array_mdn참조
• Object.keys().length_mdn참조
• 구조분해할당_mdn참조