TIL 14일차 - [JavaScript] 주요 문법

• spread/rest 문법을 사용할 수 있다.

  o
  spread 문법은 배열이나 객체를 풀어서 인자로 전달하거나 각 요소로 넣을 때 사용한다. (퍼트리기)
  rest 문법은 매개변수를 배열의 형태로 모아 받아서 사용할 수 있다. 매개변수의 개수가 가변적일 때 용이하다. (모아주기)

• 구조 분해 할당을 사용할 수 있다.

  o
  구조 분해 할당은 변수에 여러 개의 값을 한번에 할당하는 방법 중 하나다.
  구조분해할당을 사용하면 배열이나 객체의 값들을 변수에 각각 할당할 수 있다.
  할당 받을 변수를 왼쪽에 분해할 대상을 왼쪽에 작성한다.
  .이나 []를 이용하여 조회하지 않아도 되어 간결하다.

• 화살표 함수로 함수를 정의할 수 있다.

  o
  함수 표현식에서 function 키워드를 삭제하고 화살표 (=>)를 추가하여 표현한 함수 정의 방법 중 하나.
  화살표 함수를 사용할 때, 생략할 수 있는 2가지 경우가 있다.

  1) 매개변수가 한 개일 경우, 소괄호 ()를 생략할 수 있다.
  단 매개변수가 없거나 두 개 이상인 경우에는 생략 불가.

  2) 함수 코드 블록 내부가 하나의 문({})으로 되어 있을 때, 중괄호 {} 생략 가능.
  이때, 코트 블록 내부의 문({})이 값으로 평가될 수 있다면
  (=하나 밖에 없어서 하나의 값만 낼 수 있다고), return 생략 가능.

+) 2023.05.03 복습 후, 추가하는 내용

코드 블록 내부에 작성된 문(statement)은 자바스크립트에서 실행 가능한 코드의 단위다.
문은 자바스크립트 엔진에 의해 실행되며, 값을 생성하지 않는 경우가 대부분이다.
중괄호({})로 묶인 부분은 코드 블록이며,
이 블록 내부에는 선언문(const)과 조건문(if) 등이 포함되어 있다.
이러한 문은 자바스크립트 엔진에 의해 실행되며, 값을 반환하지 않는다.

그러나 표현식(expression)은 값을 생성하고 반환하기 때문에 값으로 평가된다.

따라서 코드 블록 내부에 표현식이 작성되면,
해당 표현식이 평가되어 생성된 값이 코드 블록의 반환 값으로 사용될 수 있다.
이렇게 코드 블록 내부의 표현식이 반환 값을 생성하는 경우를 "암시적 반환"이라고 한다.

이러한 암시적 반환을 사용하면, 코드를 더 간결하게 만들 수 있다.

• JavaScript의 주요 개념인 아래의 내용에 대해 설명할 수 있다.

  • JavaScript의 타입

    o
    숫자, 문자, 참/거짓, undefined, null, symbol, object가 있다.

  • 변수 선언 키워드 let과 const

    o
    재할당이 가능한 let과 재할당이 불가능한 const.
    둘 다 재선언은 불가하다.

  • 화살표 함수

    o (위에서 설명함)

  • 스코프

    o
    변수가 어디까지 영향을 미칠 수 있는지에 대한 변수의 유효범위

  • 배열

    o
    하나의 변수에 여러 값을 담을 수 있는 순서가 있는 참조 자료형
    다만, 객체와 달리 index에 어떠한 정보를 가지고 있는지에 대해 직관적으로 확인하기 어렵다.

  • 객체

    o
    하나의 변수에 여러 값을 담을 수 있는 순서가 없는 참조 자료형
    키와 값이 한 쌍을 이루어 있어 값이 어떤 정보에 관한 것인지 직관적으로 확인할 수 있다.

  • spread

    o (위에서 설명함)

  • 구조분해할당

    o (위에서 설명함)

• 다음 내용에 대해서 알아본다.

  • Strict Mode

    엄격 모드는 자바스크립트의 한 종류의 실행 모드.
    Strict Mode를 활성화하면 일부 예전 버전의 자바스크립트에서는 묵인되던 에러들을 강제로 발생시켜,
    더욱 엄격한 문법 검사와 런타임 에러 처리를 수행한다.

    Strict Mode를 활성화하려면, 'use strict';라는 문자열을 스크립트의 맨 처음에 추가한다.
    콘솔창 소스 영역에서 에러가 발생한 부분을 확인할 수 있다.

    Strict Mode가 적용되면 다음과 같은 효과가 있다.

    • 암묵적인 전역 변수의 생성 방지

    • 변수, 함수, 매개변수 등의 이름 충돌 방지

    • delete 연산자를 사용한 변수, 함수, 매개변수 등의 삭제 방지

    • 중복된 속성 이름을 갖는 객체의 생성 방지

    • 함수의 this 값이 undefined가 되는 것 방지

    • 함수 매개변수 값이 변경되더라도 arguments 객체 값이 변경되지 않는 것 방지

    • with 문 사용 금지

      Strict Mode는 기존에 작성한 코드를 변경하지 않고 실행 환경만 변경하기 때문에,
      기존의 코드와의 호환성을 고려하지 않아도 됨.
      따라서 새로운 코드를 작성할 때는 항상 Strict Mode를 활성화하는 것이 좋다.

  • 즉시 실행 함수 표현식(IIFE,Immediately Invoked Function Expression)

    함수를 선언하고 바로 실행하는 함수 표현식.
    IIFE는 일회성 코드를 만들 때 사용되며,
    전역 스코프를 오염시키지 않고 모듈화를 구현하는 등의 용도로도 자주 사용됨.

    (function() {
    // code goes here
    })();

    함수는 (function() { ... }) 부분에 선언되어 있으며, 함수 이름이 없는 익명 함수로 선언되어 있다.
    함수를 실행하려면 괄호 ()로 묶어서 호출하면 된다.
    이렇게 하면 함수가 선언되자마자 즉시 실행된다.

    IIFE를 사용하면 전역 스코프를 오염시키지 않고, 지역 스코프를 만들 수 있다.
    또한 IIFE 내에서 선언된 변수는 IIFE 외부에서 접근할 수 없기 때문에,
    변수 이름 충돌 문제를 방지할 수 있다.

  • 변수 호이스팅(Variable Hoisting)과 TDZ(Temporal Dead Zone)

    1) 변수 호이스팅은 자바스크립트에서 변수 선언문이 해당 스코프의 최상단으로 끌어올려지는 현상.
    즉, 변수를 선언하기 이전에 해당 변수를 참조하더라도, 에러가 발생하지 않고 undefined 값을 갖게 됨.

    console.log(x); // undefined
    var x = 10;

    이는
    var x
    console.log(x); // undefined 로 인식

    x 변수는 선언되기 이전에 참조되고 있다. 보통의 경우라면,
    uncaught ReferenceError: x is not defined가 발생함.
    하지만 자바스크립트에서는 var 키워드로 선언된 변수는
    해당 스코프의 최상단으로 끌어 올리기 때문에,
    코드의 실행 결과는 에러가 아닌 undefined가 출력됨.
    따라서 변수 선언문은 해당 변수를 사용하기 이전에 선언하는 것이 좋다.
    이러한 이유로 var 키워드는
    ES6에서 let과 const의 등장 이후 사용하는 것을 권장하지 않는다.

    2) TDZ(Temporal Dead Zone)는
    let 또는 const 키워드를 사용하여 선언한 변수가
    실제로 선언되기 이전에 접근하려고 할 때 발생하는 현상.
    let 또는 const 키워드로 변수를 선언하면,
    해당 변수는 블록 스코프에서 선언된 것으로 취급된다.

    즉, 변수가 선언된 블록 이전에는 존재하지 않는 것으로 간주된다.
    따라서 블록 내에서 해당 변수를 참조하려고 할 때,
    변수가 선언되기 이전에 접근하게 되면 TDZ에 걸리게 된다.

    console.log(x); // ReferenceError: x is not defined
    let x = 10;

    let 키워드를 사용하여 x 변수를 선언하고 있지만
    console.log() 함수가 x 변수를 참조하려고 할 때,
    x 변수가 실제로 선언되기 이전에 접근하고 있으므로 TDZ에 걸리게 된다.
    따라서 위 코드는 ReferenceError가 발생한다.

    TDZ는 변수가 선언된 블록 내에서만 적용되기 때문에,
    전역 스코프에서는 발생하지 않는다.
    또한 var 키워드로 선언한 변수는 TDZ가 발생하지 않으며,
    선언되기 이전에 접근해도 undefined 값을 갖는다. 그러나 권장하지 않는다.

    따라서 TDZ에 대해서는 주의하여 사용해야 하며,
    변수 선언과 초기화를 분리하여 사용하면 TDZ를 회피할 수 있다.

• Mocha, Chai, 이 두 가지 프레임워크에 대해 알아본다.

  Mocha는 Node.js와 브라우저에서 사용할 수 있는 JavaScript 테스트 프레임워크.

  1) Mocha는
  BDD(Behavior-Driven Development) 스타일과
  TDD(Test-Driven Development) 스타일의 테스트를 모두 지원하며,
  테스트 스위트, 테스트 케이스, 테스트 모의 객체 등을 제공한다.
  또한 다양한 플러그인과 언어로 작성된 어서션 라이브러리를 지원하며, 비동기 코드를 테스트하는 기능도 지원한다.

  2) Chai는
  Node.js와 브라우저에서 사용할 수 있는 어서션(assertion) 라이브러리.
  Chai는 다양한 스타일의 어서션을 지원하며, BDD 스타일과 TDD 스타일의 어서션을 모두 사용할 수 있다. Chai는 expect, should, assert 세 가지 스타일의 어서션을 지원하며,
  각각의 스타일은 서로 다른 문법을 사용한다.
  또한 Chai는 다양한 데이터 타입과 비동기 코드를 다루는 어서션도 제공한다.

  Mocha와 Chai는 각각의 역할이 다르기 때문에, 함께 사용되는 경우가 많다.
  Mocha는 테스트 스위트와 테스트 케이스를 정의하고,
  Chai는 각각의 테스트 케이스에서 기대되는 동작을 정의하는데 사용된다.
  이러한 조합으로 인해 JavaScript 기반의 프로젝트에서 테스트 코드를 작성하고 관리하는 작업이 용이하다.

• 과제 / 페어활동 : JavaScript Koans (Mocha, Chai 기반)

  Koans는 불교 언어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민함을 의미한다.
  그게 왜 정답인지 깊게 고민해 보는 시간을 갖지 않는다면, 또 다른 문제를 해결하지 못한다.
  이는 페어와 함께 깊게 고민하고, 정답을 설명할 수 있도록 연습하는 것을 의도한 듯하다.

소감

🔡➡️💻➡️🤓👍

Koans 문제 중에는 학습하지 않은 개념도 포함되어 있었다.
그래서 조금 헤매기도 했다.
30분 이상을 고민해보고 붙잡고 있었던 문제도 있었고,
다음날로 넘어가 다시 고민해보게 만든 문제도 있었다.
GPT에게도 물어보고, 현업에 있는 동생에게도 물어보며 해결했다.
그리고 다시 나의 언어로 이해해보려고 했다.
다소 시간은 걸리는 문제들이었지만, 정말 큰 도움이 되었던 문제들이었다.👍