JavaScript Koans 문제 풀면서 헷갈렸던 개념이나 잘 몰랐던 개념 다시 정리하기.

const

• 재할당 금지

• const로 선언된 배열,객체의 경우 새로운 요소를 추가하거나 삭제할 수 있음

배열
const arr = [];
const toBePushed = 42;
arr.push(toBePushed);
expect(arr[0]).to.equal(42);

// 여전히 재할당은 금지됩니다.
// arr = [1, 2, 3];

객체
const obj = { x: 1 };
expect(obj.x).to.equal(1);

delete obj.x;
expect(obj.x).to.equal(undefined);

// 여전히 재할당은 금지됩니다.
// obj = { x: 123 };

obj.occupation = 'SW Engineer';
expect(obj['occupation']).to.equal('SW Engineer');

scope

• scope는 변수의 값(변수에 담긴 값)을 찾을 때 확인하는 곳.
  반드시 기억하기!!!

함수 선언식(declaration)과 함수 표현식(expression)의 차이

   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';
    }

    funcExpressed = function () { 
      return 'this is a function expression';
    };

    // 자바스크립트 함수 호이스팅(hoisting)에 대해서 검색해 봅니다.

    const funcContainer = { func: funcExpressed };
    expect(funcContainer.func()).to.equal('this is a function expression');

    funcContainer.func = funcDeclared;
    expect(funcContainer.func()).to.equal('this is a function declaration');

clousure 클로저

    function increaseBy(increaseByAmount) {
      return function (numberToIncrease) {
        return numberToIncrease + increaseByAmount;
      };
    }

    const increaseBy3 = increaseBy(3);
    const increaseBy5 = increaseBy(5);

    expect(increaseBy3(10)).to.equal(13);
    expect(increaseBy5(10)).to.equal(15);
    expect(increaseBy(8)(6) + increaseBy(5)(9)).to.equal(28);

lexical scope와 closure

  it('lexical scope와 closure에 대해 다시 확인합니다.', 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 innerFn1 = outerFn();

    expect(age).to.equal(27);
    expect(name).to.equal('jimin'); //그래서 지민
    expect(innerFn1()).to.equal(178);
  });

slice()

  it('Array 메소드 slice를 확인합니다.', function () {
    const arr = ['peanut', 'butter', 'and', 'jelly'];

    expect(arr.slice(1)).to.deep.equal(['butter', 'and', 'jelly']);
    expect(arr.slice(0, 1)).to.deep.equal(['peanut']);
    expect(arr.slice(0, 2)).to.deep.equal(['peanut','butter']);
    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([]);

    // arr.slice는 arr의 값을 복사하여 **새로운 배열을 리턴**합니다.
    // 아래의 코드는 arr 전체를 복사합니다. 자주 사용되니 기억하시기 바랍니다.
    expect(arr.slice(0)).to.deep.equal(['peanut', 'butter', 'and', 'jelly']);
  });

call(pass) by value와 call(pass) by reference의 차이

  it('Array를 함수의 전달인자로 전달할 경우, reference가 전달됩니다.', function () {
    
    const arr = ['zero', 'one', 'two', 'three', 'four', 'five'];

    function passedByReference(refArr) {
      refArr[1] = 'changed in function';
    }
    passedByReference(arr); //주소값 복사
    expect(arr[1]).to.equal('changed in function');

    const assignedArr = arr; //주소값 복사
    assignedArr[5] = 'changed in assignedArr';
    expect(arr[5]).to.equal('changed in assignedArr');

    const copiedArr = arr.slice(); //주소값복사x, 새로운 배열 => 새로운 주소
    copiedArr[3] = 'changed in copiedArr';
    expect(arr[3]).to.equal('three');
  });