[블로깅] Javascript Koans

H·2023년 10월 30일
0

경남 ABC Frontend

목록 보기
14/14

04_Scope

  1. typeof function은 function 이다.
    array, object는 object

function () {
      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);
  }

첫번째, age = 26
이유 : 지금 outerFn()내에 있다. 그러므로 age는 outerFn 내의 age 변수가 된다.
위에서 innerFn를 한번 실행시키면서 age = 24 에서 26 으로 변경되었기에 답은 26이 된다.

두번째, name = "jimin"
이유 : 마찬가지로 innerFn()에서 "suga"라는 name을 선언했지만 이것은 innerFn안의 새로운 지역변수이고 outerFn의 name과는 관련이 없다. 고로 답은 "jimin"

세번째, age = 27
전역에서의 age를 묻고 있기 때문에 전역의 age를 찾아야 한다. 전역의 age = 27

네번째, name = "jimin"
왜 전역의 name인 "jin"이 아닌지 한참 봤는데 콘솔로 찍어보니 이해가 된 것 같다.
const innerFn = outerFn();
이 부분에서 outerFn을 한번 실행시키고 (이때 name이 'jimin'으로 재할당 된다.) innerFn을 innerFn 변수에 넣어준다. 고로 name = 'jimin'

다섯번째, innerFn() = 178
위에서 말했듯이 함수 innerFn이 변수 innerFn에 들어있다. 실행시키면 return height
고로 innerFn안에 height이 없기에 outerFn에서 height을 찾고 178을 반환한다.

07_Array

const arr = ["peanut", "butter", "and", "jelly"];
expect(arr.slice(2, 2)).to.deep.equal([]);
expect(arr.slice(2, 20)).to.deep.equal(["and", "jelly"]);
expect(arr.slice(3, 0)).to.deep.equal([]);
expect(arr.slice(3, 100)).to.deep.equal(["jelly"]);
expect(arr.slice(5, 1)).to.deep.equal([]);
  1. 객체의 length를 조회하면 -> undefined
    객체의 length를 조회하려면 Object.keys를 이용해야 한다.

  2. 화살표 함수는 자신의 this가 없다.
    화살표 함수에서의 this는 자신을 감싼 정적 범위(lexical scope)이다.

09_SpreadSyntax

  1. arguments를 통해 비슷하게 함수의 전달인자들을 다룰 수 있다. (spread syntax 도입 이전)
    arguments는 모든 함수의 실행 시 자동으로 생성되는 객체이다.
    <-> rest parameter를 통해 전달된 인자는 배열 형태!
profile
나아가기

0개의 댓글