15일차 2023-10-30 월요일 TLI

TYPE

비교연산자 ‘==’는 두 값의 일치 여부를 느슨하게 검사한다.

let actualValue = 1 + 1;
    let expectedValue = FILL_ME_IN;
    expect(actualValue == '2').to.be.true;

비교연산자 ‘===’는 두 값의 일치 여부를 엄격하게 검사한다.

>> 최대한 같은 타입끼리 연산을 하고, 엄격한 동치 연산( ’===’ )을 사용하고, 조건문에 비교연산을 명시하는 것이 좋다.

const

const로 선언된 변수에는 재할당이 금지된다.

const constNum = 0;
    // constNum = 0;
    expect(constNum).to.equal(0);

const로 선언된 배열의 경우 새로운 요소를 추가하거나 삭제할 수 있다.

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

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

const로 선언된 객체의 경우, 속성을 추가하거나 삭제할 수 있다.

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

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

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

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

scope

변수의 값(변수에 담긴 값)을 찾을 때 확인하는 곳을 말한다.

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

JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트의 선언문을 해당 범위의 맨 위로 이동시키는 과정이다.

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

lexical scope

함수를 어디서 선언하였는지에 따라 상위 스코프를 정한다. 함수의 선언에 따라 결정된다.

default parameter

기본값 함수 매개변수 (default function parameter)를 사용하면 값이 전달되지 않거나 undefined인 경우 명명된 매개변수를 기본값으로 초기화할 수 있다.

클로저(closure)

클로저 - JavaScript | MDN

내부 함수가 외부 함수의 지역 변수에 접근할 수 있다.

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

화살표 함수

function () {
    const add = function (x, y) {
      return x + y;
    };

function () {
    // function 키워드를 생략하고 화살표 => 를 붙입니다
    const add = (x, y) => {
      return x + y;
    };
// 리턴을 생략할 수 있습니다
    const subtract = (x, y) => x - y;
    expect(subtract(10, 20)).to.eql(-10);

    // 필요에 따라 소괄호를 붙일 수도 있습니다
    const multiply = (x, y) => x * y;
    expect(multiply(10, 20)).to.eql(200);

    // 파라미터가 하나일 경우 소괄호 생략이 가능합니다
    const divideBy10 = (x) => x / 10;
    expect(divideBy10(100)).to.eql(10);
  });

원시 자료형과 참조 자료형, 배열, 깊은복사 얕은복사

블로깅

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

Array를 함수의 전달인자로 전달할 경우, reference가 전달

object

method는 '어떤 객체의 속성으로 정의된 함수'

this

this - JavaScript | MDN

function () {
    const currentYear = new Date().getFullYear();
    const megalomaniac = {
      mastermind: 'James Wood',
      henchman: 'Adam West',
      birthYear: 1970,
      calculateAge: function (currentYear) {
        return currentYear - this.birthYear;
      },
      changeBirthYear: function (newYear) {
        this.birthYear = newYear;
      },
    };

expect(currentYear).to.equal(2023);
    expect(megalomaniac.calculateAge(currentYear)).to.equal(53);

    megalomaniac.birthYear = 2000;
    expect(megalomaniac.calculateAge(currentYear)).to.equal(23);

    megalomaniac.changeBirthYear(2010);
    expect(megalomaniac.calculateAge(currentYear)).to.equal(13);