[2024.04.17] JS Basic Syntax

체리마루·2024년 4월 17일

변수

변수 선언 키워드

  • 식별자(변수명) 작성 규칙
    반드시 문자, 달러, 또는 밑줄로 시작
    대소문자 구분
    예약어 사용 불가 (for, if, function 등)

  • 식별자(변수명) Naming case
    카멜 케이스(camelCase): 변수, 개체, 함수에 사용
    파스칼 케이스(PascalCase): 클래스, 생성자에 사용
    대문자 스네이크 케이스(SNAKE_CASE): 상수(constants)에 사용

  • 변수 선언 키워드 3가지

  1. let

    • 블록 스코프(block scope)를 갖는 지역 변수를 선언
    • 재할당 가능
    • 재선언 불가능
    • ES6에서 추가
  2. const

    • 블록 스코프를 갖는 지역 변수를 선언
    • 재할당 불가능
    • 재선언 불가능
    • ES6에서 추가
  3. var

  • 블록 스코프(block scope)
    if, for, 함수 등의 중괄호({}) 내부를 가리킴
    블록 스코프를 가지는 변수는 블록 바깥에서 접근 불가능

  • 어떤 변수 선언 키워드를 사용해야 할까?
    기본적으로 const 사용 권장
    재할당 필요 시 그때 let으로 변경해서 사용

데이터 타입

  • 원시 자료형 (Primitive type) - Number, String, Boolean, null, undefined
    : 변수에 값이 직접 저장되는 자료형(불변, 값이 복사)
    - 변수에 할당될 때 값이 복사됨. 변수 간에 서로 영향 x
  • 참조 자료형 (Reference type) - Objects(Object, Array, Function)
    : 객체의 주소가 저장되는 자료형(가변, 주소가 복사)
    - 객체를 생성하면 객체의 메모리 주소를 변수에 할당. 변수 간에 서로 영향 o

원시 자료형

  • 원시 자료형 종류
    Number / String / null / undefined / Boolean

  • Number: 정수 또는 실수형 숫자를 표현하는 자료형

  • String: 텍스트 데이터를 표현하는 자료형

  • ** 템플릿 리터럴 (Template literals)
    내장된 표현식을 허용하는 문자열 작성 방식
    Backtick 기호를 이용하며, 여러 줄에 걸쳐 문자열을 정의할 수도 있고 JavaScript의 변수를 문자열 안에 바로 연결할 수 있음
    표현식은 '$'와 중괄호({})로 표기
    ES6+ 부터 지원

  • null: 변수의 값이 없음을 의도적으로 표현할 때 사용

  • undefined: 변수 선언 이후 직접 값을 할당하지 않으면 자동으로 할당됨

  • Boolean(true/false): 조건문 또는 반복문에서 Boolean이 아닌 데이터 타입은 자동 형변환 규칙에 따라 true 또는 false로 변환됨

연산자

  • 할당 연산자
    오른쪽에 있는 피연산자의 평가 결과를 왼쪽 피연산자에 할당하는 연산자
    단축 연산자 지원

  • 증가 & 감소 연산자
    증가 연산자('++'): 피연산자를 증가(1 더함)시키고 연산자의 위치에 따라 증가하기 전이나 후의 값을 반환
    감소 연산자('--'): 피연산자를 감소(1 뺌)시키고 연산자의 위치에 따라 감소하기 전이나 후의 값 반환
    '+=' 또는 '-='와 같이 더 명시적인 표현으로 작성하는 것을 권장

  • 비교 연산자
    피연산자들(숫자, 문자, Boolean 등)을 비교하고 결과 값을 boolean으로 반환하는 연산자

  • 동등 연산자 (==)
    두 피연산자가 같은 값으로 평가되는지 비교 후 boolean 값을 반환
    암묵적 타입 변환 통해 타입을 일치시킨 후 같은 값인지 비교
    두 피연산자가 모두 객체일 경우 메모리의 같은 객체를 바라보는지 판별

  • 일치 연산자 (===)
    두 피연산자의 값과 타입이 모두 같은 경우 true를 반환
    같은 객체를 가리키거나, 같은 타입이면서 같은 값인지를 비교
    엄격한 비교가 이뤄지며 암묵적 타입 변환이 발생하지 않음
    특수한 경우를 제외하고는 동등 연산자가 아닌 일치 연산자 사용 권장

  • 논리 연산자
    and 연산 (&&)
    or 연산 (||)
    not 연산 (!)
    단축 평가 지원함

조건문

  • if: 조건 표현식의 결과값을 boolean 타입으로 변환 후 참/거짓을 판단

  • 삼항 연산자

    condition: 평가할 조건 (true 또는 false로 평가)
    expression1: 조건이 true일 경우 반환할 값 또는 표현식
    expression2: 조건이 false일 경우 반환할 값 또는 표현식

반복문

  • 반복문 종류: while / for / for ... in / for ... of

  • while: 조건문이 참이면 문장을 계속해서 수행

  • for: 특정한 조건이 거짓으로 판별될 때까지 반복


  • for ... in: 객체의 열거 가능한 속성(property)에 대해 반복

  • for ... of: 반복 가능한 객체(배열, 문자열 등)에 대해 반복

  • for ... in VS . for ... of




profile
멋쟁이 토마토 개발자 🍅

0개의 댓글