JavaScript 문법정리

expect

• 테스트하는 값과 기대값을 비교하기 위해 expect 함수 사용
• 더 공부할 링크다양한 matcher 확인 Expect / Should - Chai
• 대표 예제

it('Matcher .equal 의 사용법을 학습합니다.', function () {
    let expectedValue = 2; // TODO
    // .equal은 두 값이 타입까지 엄격하게 같은지 검사(strict equality, ===)합니다.
    expect(1 + 1).to.equal(expectedValue);
  });

  it('Matcher .equal의 사용법을 학습합니다.', function () {
    let actualValue = (1 + 1).toString();
    expect(actualValue).to.equal('2'); // TODO
  });
});

type

• 비교연산자 '=='는 두 값의 일치 여부를 느슨하게 검사(loose equality)
• ‘===’을 사용해야 함
• 더 공부할 링크

GitHub - denysdovhan/wtfjs: 🤪 A list of funny and tricky JavaScript examples

const

• const'로 선언된 변수에는 재할당(reassignment)이 금지
• 재할당이 가능한 let이 아닌 const를 써야하는 이유:

const로 선언한 변수와 변수명을 보면 해당 변수는 하나의 목적을 위해 만들어졌다는 것이 파악되기 때문에 협업과 유지 보수 편리

it("'const'로 선언된 객체의 경우, 속성을 추가하거나 삭제할 수 있습니다.", function () {
    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는 변수의 값(변수에 담긴 값)을 찾을 때 확인하는 곳

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

• 호이스팅: 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것
• 클로저: 특이하게도 자바스크립트는 함수가 호출되는 환경와 별개로, 기존에 선언되어 있던 환경 - 어휘적 환경 - 을 기준으로 변수를 조회
• 클로저는 내부(inner) 함수가 외부(outer) 함수의 지역 변수에 접근 가능

primitive data type과 reference data type

Object 자료형은 데이터는 heap에 저장되고, 변수에 할당을 할 경우 변수에는 주소가 저장된다.

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)에서 말하는 주소는 전부 다른 주소입니다.

Array

• arr.slice는 arr의 값을 복사하여 새로운 배열을 리턴
• arr 전체 복사 코드

expect(arr.slice(0)).to.deep.equal(['peanut', 'butter', 'and', 'jelly']);
  });

Object

• 화살표 함수에서 this는 자신을 감싼 정적 범위
• 전역 코드에서는 전역 객체를 가리킴
• 더 공부할 링크

this - JavaScript | MDN

SpreadSyntax

• 함수를 호출할 때 스프레드 구문과 배열 이름 — 을 사용하여 배열의 모든 값을 전달
• Spread 구문은 배열을 요소로 "확장"하는 반면 나머지 구문은 여러 요소를 수집하여 단일 요소로 "축소”
• 전달일자의 일부에만 적용한 예시

it('Rest Parameter는 전달인자의 일부에만 적용할 수도 있습니다.', function () {
    // rest parameter는 항상 배열입니다.
    function getAllParams(required1, required2, ...args) {
      return [required1, required2, args];
    }
    expect(getAllParams(123)).to.deep.equal([123, undefined, []]);

    function makePizza(dough, name, ...toppings) {
      const order = `You ordered ${name} pizza with ${dough} dough and ${toppings.length} extra toppings!`;
      return order;
    }
    expect(makePizza('original')).to.equal(`You ordered undefined pizza with original dough and 0 extra toppings!`);
    expect(makePizza('thin', 'pepperoni')).to.equal(`You ordered pepperoni pizza with thin dough and 0 extra toppings!`);
    expect(makePizza('napoli', 'meat', 'extra cheese', 'onion', 'bacon')).to.equal(`You ordered meat pizza with napoli dough and 3 extra toppings!`);
  });

Destructing Assignment(구조분해할당)

• 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식
• rest/spread 문법을 객체 분해에 적용 예시

it('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
    }

    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: 'Marketing',
        role: {
          name: 'Software Engineer'
        }
      },
      age: 35
    })
  })
})

*npm run submit을 위한 vscode 단축키(맥북): control + `