/refactoring-example

리팩토링 예제 만들어보기 :)

Primary LanguageJavaScript

변수와 상수

  • 변수 명명 규칙 문자와 숫자, $, _ 만 들어갈 수 있음.

let a = 3;

let a; <- 선언(자바스크립트 엔진에 변수의 존재를 알림) a = undefined <- 초기화(메모리 공간 확보) a = 3 <- 할당(메모리에 값 할당)

  • 변화하는 변수를 선언할 땐 let을 사용
  • 변화하지 않는 변수를 선언할 땐 const를 사용

자료형

  • 숫자형
  • 문자형
  • 불린형
  • null
  • undefined
  • object
  • symbol
  • bigint

기본 연산자(연산을 수행하는 기호)

  • 단항, 이항, 피연산자
    • 단항: 피연산자가 1개인 것
    • 이항: 피연산자가 2개인 것
    • 피연산자: 연산을 수행하는 대상
  • 덧셈 연산자 +
  • 뺄셈 연산자 -
  • 곱셈 연산자 *
  • 나눗셈 연산자 /
  • 나머지 연산자 %
  • 거듭제곱 연산자 **
  • 할당 연산자 =
  • 증가·감소 연산자 ++, --

비교 연산자

  • >, >=, <, <=, ==, != 사용

  • 불린형 반환

    • 비교 연산자를 사용하면 불린형이 반환된다.

  • 문자열 비교

    • 사전순으로 문자열을 비교한다.

  • 다른 형을 가진 값 간의 비교

    • 비교하려는 값의 자료형이 다르면 이 값을 숫자형으로 바꿔준다. 
      console.log('2' > 1); // '2'를 2로 바꿈

  • 일치 연산자

    • == 는 동등 연산자, ===는 엄격한 동등 연산자이다.
    • == 는 형변환을 시도하고, ===는 형변환을 시도하지 않는다.

  • null, undefined 비교

    • ==를 사용하면 true
    • ===를 사용하면 false
    • 비교 연산자를 사용할 때 숫자변환 시 null은 0으로 변환
    • 비교 연산자를 사용할 때 숫자변환 시 undefined는 NaNd으로 변환

논리 연산자

  • ||(OR)
    • 인수중 하나라도 true면 true를 반환
    • 전부 false라면 false를 반환
    • truthy값을 반환하거나 전부 falsy이면 마지막 인수 반환
    • 단락 평가 기능을 이용하여 truthy를 만나면 나머지 값들은 평가를 하지 않음
  • &&(AND)
    • 두 인수가 전부 true일때 true를 반환
    • 마지막 truthy값을 반환. falsy가 있다면 그 값을 반환
    • OR보다 우선순위가 높음
  • !(NOT)
    • 우선순위가 가장 높음
    • true면 false 반환
  • "", 0 , undefined, NaN, null은 false이다.

함수

  • 함수 == 주석

함수표현식

  • 함수 선언문

    function a() {}

  • 함수 표현식

    const a = function() {}
    • 함수를 값으로 사용할 수 있다.

  • 콜백 함수

    • 함수의 인수로 함수를 넘길 수 있는데 이 함수를 콜백 함수라고 부른다.
    • 인수로 전달한 그 함수를 나중에 호출(called back)하는 것이 콜백의 개념이다.

  • 함수 표현식 vs 함수 선언문

    • 함수 선언문은 정의되기 전에 미리 쓸 수 있다.
    • 함수 표현식은 실행 흐름이 해당 함수에 도달 했을 때 쓸 수 있다.
    • 함수 선언문은 코드 블럭내에만 위치한다면 블록 내 어디서든 접근 가능
    • 함수 표현식은 변수를 이용하여 어디서든 접근 가능