Section1 / Unit9 : JavaScript Koans

과제를 풀면서 몰랐던 부분 오답노트를 작성해보자

 

02_Types-part1.js

expect(123 - '1').to.equal(122);
expect(1 + true).to.equal(2);

답을보고 당황스러웠다 왜 숫자 123 에서 문자열 1 을 뺐는데 122가 나왔지?

왜 숫자 1 에 true를 더했는데 2가 나왔지????????????

• +연산을 제외하고 문자열을 숫자로 취급
• 연산에서의 true값은  1, false 값은 0

04_Scope.js

expect(typeof funcDeclared).to.equal('function'); //호이스팅O
expect(typeof funcExpressed).to.equal('string');  //호이스팅X

• 호이스팅은 변수 및 함수 선언이 코드 내에서 선언된 위치에 관계없이 해당 범위의 맨 위로 이동되는 JavaScript의 동작
• 이는 코드에서 실제로 선언되기 전에 변수나 함수를 사용할 수 있음
• 초기화나 할당이 아니라 변수 및 함수 선언만 호이스팅된다

ex/

console.log(exam); //undefined

var exam = 'this is example';

 

foo(); // "Hello, world!"

function foo() { console.log("Hello, world!"); }

it('lexical scope와 closure에 대해 다시 확인합니다.', function () {
    let age = 27; //global scope
    let name = 'jin';
    let height = 179;

    function outerFn() { //이런 경우에만 클로저 경우가 생긴다고 간단히 이해
      let age = 24;
      name = 'jimin'; //name 재할당
      let height = 178;

      function innerFn() {
        age = 26;
        let name = 'suga'; //사실상 쓸모없음
        return height;
      }

      innerFn();

      expect(age).to.equal(26);
      expect(name).to.equal('jimin'); //?? //바깥 name 으로 재할당

      return innerFn;
    }

    const innerFn = outerFn();

    expect(age).to.equal(27);  //여기서부터 모르겠다
    expect(name).to.equal('jimin'); //125와 비슷한 상황
    expect(innerFn()).to.equal(178); //??? //119번에 리턴값
  });

• 전역 범위에서 age, name, height 선언
• innerFn(); 과정에서 age : 24 -> 26으로 바뀜
• outerFn()에서 나이를 재할당한 내역이 없으니 27
• outerFn()에서 이름을 재할당한 내역이 있으니 jimin
• innerFn() 안에 return height;는 outerFn안에 178을 리턴

06_Types-part2.js

it('원시 자료형을 변수에 할당할 경우, 값 자체의 복사가 일어납니다.', function () {
    let overTwenty = true;
    let allowedToDrink = overTwenty;

    overTwenty = false;
    expect(overTwenty).to.equal(false);
    expect(allowedToDrink).to.equal(true); //??? 

    let variable = 'variable';
    let variableCopy = 'variableCopy';
    variableCopy = variable;
    variable = variableCopy;
    expect(variable).to.equal(variableCopy);  //??? 
  });

• overTwenty 값이 true로 할당 되었고 allowedToDrink값이 복사했다
  (원시 자료형으로서 값 자체가 복사)
  그 이후에 재할당 한 적이 없으니 값은 true
• 위에 내용과 비슷

07_Array.js

it('Array의 기본을 확인합니다.', function () {
    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[3]()).to.equal(3);  //???값이 나오네
    
  });

이거는 나의 부주의 였던 것 같다. multiTypeArr[3]() 여기서 ()를 못 봤다

• 함수를 호출했기 때문에 그 안에 있는 리턴값 3이 출력됐다

08_Object.js

it('Object의 기본을 확인합니다.', function () {
    const emptyObj = {};
    expect(typeof emptyObj === 'object').to.equal(true);
    expect(emptyObj.length).to.equal(undefined);

    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.henchWoman).to.equal(undefined);  //??? 
  });

• .length로 객체 길이를 찾지 않는다.
  찾으려면 Object.keys().length를 써야함
• 어이없게도 w가 대문자여서 undefined였다 

09_SpreadSyntax.js

it('Rest Parameter는 함수의 전달인자를 배열로 다룰 수 있게 합니다.', function () {
    // 자바스크립트는 (named parameter를 지원하지 않기 때문에) 함수 호출 시 전달인자의 순서가 중요합니다.

    // rest parameter는 spread syntax를 통해 간단하게 구현됩니다.
    function getAllParamsByRestParameter(...args) {
      return args;  //spread
    }

    // arguments를 통해 '비슷하게' 함수의 전달인자들을 다룰 수 있습니다. (spread syntax 도입 이전)
    // arguments는 모든 함수의 실행 시 자동으로 생성되는 '객체'입니다.
    function getAllParamsByArgumentsObj() {
      return arguments; //배열로 리턴이 안 된다
    }

    const restParams = getAllParamsByRestParameter('first', 'second', 'third');
    const argumentsObj = getAllParamsByArgumentsObj('first', 'second', 'third');

    expect(restParams).to.deep.equal(['first', 'second', 'third']);
    expect(Object.keys(argumentsObj)).to.deep.equal(['0', '1', '2']); //??? //키의 값을 정해주지 않아서 //단순 배열
    expect(Object.values(argumentsObj)).to.deep.equal(['first', 'second', 'third']); //배열을 객체로 변환 //값, 키를 알 수 있음

  });

• Object.keys() 사용 시 키의 값이 정해지지 않아서 ['0', '1', '2']로 출력

10_Destructuring.js

it('객체의 단축(shorthand) 문법을 익힙니다', () => {
    const name = '김코딩'
    const age = 28

    const person = {
      name,  //name : name
      age,
      level: 'Junior',
    }
    expect(person).to.eql({name : '김코딩', age : 28, level : 'Junior'}) //??? 
  })

• name,age는 변수라고 선언되어 있음
• person이랑는 객체 안에서 name, age는 값을 상위 스코프에서 가지고 왔고 level은 새로 선언, 할당되었음