데이터와 형태

조혜준·2023년 10월 19일
JavaScript 입문 기초

프로그래머스 프론트엔드 미니 데브코스

목록 보기
2/14

변수란?

: 데이터를 처리하기 위해 기억해야 함

  • 데이터를 처리하는 과정에서 처리 흐름마다 값들을 기억해둘 필요가 있음
  • 컴퓨터는 데이터를 기억하기 위해 메모리(컴퓨터의 기억장치)를 활용
  • 메모리
    • 메모리에 데이터를 담아 기억
    • 각각의 위치 주소값이 존재
    • 위치를 찾기 위해서는 메모리의 주소값 사용

메모리 주소값의 별칭, 변수

  • 메모리 주소값을 대신할 식별자를 지정하고, 식별자를 통해 데이터 접근
  • 식별자 == 변수

변수란,
데이터를 담아둔 메모리의 주소를 쉽게 식별하기 위해 붙인 이름

자바스크립트의 변수 syntax

  • 키워드 : let / const / var
  • 변수명
  • 할당 연산자
  • 값

변수 생성 방법과 호이스팅

3가지 단계를 거쳐 생성되는 변수

  1. 선언 단계 : 변수를 변수 객체에 등록
  2. 초기화 단계 : 변수를 메모리에 할당하고, undefined로 초기화
  3. 할당 단계 : undefined로 초기화된 변수에 실제로 값을 할당

→ 변수 생성 3단계는 키워드 별(var, const, let)로 다르게 동작


var 키워드

  • 코드 평가 단계 : 선언과 동시에 초기화 진행
  • 코드 실행 단계 : 값 할당 진행
  • 코드 평가 시점에 초기화가 되어있으므로, 변수의 할당문이 실행되기 전에도 참조가 가능 (호이스팅)
console.log(a);
console.log(b);

var a = 1;
var b = 2;
  • 호이스팅(Hoisting)
    • 모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성
    • 함수 호이스팅, 변수 호이스팅, ...
  • 단점
    • 키워드의 생략 가능
    • 중복 선언 가능
    • 변수 호이스팅
a = 1;   // var 키워드 생략
var a = 2;   // 중복 선언 허용
console.log(window.a);   // 전역변수화

const b = 1;
console.log(window.b);

  • 단점 - 전역변수화
    : 전역변수화 되어 무분별한 변수 접근

    • 스코프 : 코드가 실행되는 과정에서 변수와 같은 식별자를 찾아야하는 코드가 있을 때, 자바스크립트가 갖고있는 규칙

      • 전역 스코프(global), 지역 스코프(local)

    • 의도치 않은 변수값 변경, 코드 예측이 어려워짐


const, let 키워드

  • 코드 평가 단계 : 선언 진행
  • 코드 실행 단계 : 초기화 진행, 값 할당 진행
  • 코드 평가 시점에 선언만 진행되므로, 변수의 할당문이 실행되기 전에 참조가 불가
console.log(a);
const a = 1;
> ReferenceError가 발생!

  • 블록 레벨 스코프 : 코드 블록 내에서 접근 가능한 스코프

    • 변수에 한정적으로 접근이 가능하므로, 예측가능한 범위 내에서 변수 변경이 일어남

  • const 키워드

    • 수정이 불가능한 "상수 변수"를 선언할 때 사용
    • 무조건 값을 할당

  • let 키워드

    • 재할당이 가능한 변수 타입
    • 값을 할당하지 않아도 생성

변수 실습

-> a는 평가단계에서 초기화가 진행되므로 초반에 undefined로 정의되어 있음
-> b는 선언 전에 초기화단계가 진행되지 않았으므로, 선언 전에 참조를 할 경우 레퍼런스 에러가 뜸을 알 수 있음

-> c는 할당문이 없어 초기화단계만 진행되므로 최종적으로 undefined로 할당됨


변수 네이밍 컨벤션

  • Camel Case getNumber
  • Snake Case get_number
  • Pascal Case GetNumber
  • Constant Case GET_NUMBER

자료형이란?

컴퓨터는 어떻게 알고 데이터를 처리할까?

  • 우리는 컴퓨터에게 데이터의 종류를 지정하고 알려주어, 데이터 종류에 맞게 적합한 로직처리를 할 수 있게 해주어야 함

  • 여기서 말하는 데이터의 종류를 데이터 타입, 자료형이라고 함

  • 언어별로 지원하는 데이터의 타입은 모두 다름
    - C언어 : 문자, 정수, 실수, ...
    - Java: 문자, 정수, 실수, 논리, ...
    - Python : 문자, 정수, 실수, ...


자바스크립트의 데이터 타입

-> 자바스크립트는 크게 2가지 타입(원시, 객체)을 제공

  1. 원시 타입
  • 자바스크립트는 String, Number, BigInt, Undefined, Null, Boolean, Symbol 7가지의 원시 타입을 제공
  • 특징
    • 값은 변경 불가능(immutable value)한 값.
    • "값"으로써 전달됨 (참조 형태로 전달되는 것이 아님)
  • 자바스크립트에는 원시 레퍼 객체가 따로 존재. 원시 데이터를 사용할 경우, 해당 레퍼 객체들을 상속받아 사용 가능 (원시 래퍼 객체와 원시 타입을 헷갈리면 안됨)
  1. 객체 타입
  • 원시 타입의 값을 제외한 자바스크립트에서 모든 것은 객체
  • 객체는 여러 형태로 분류할 수 있음 (일반 객체와 함수, 날짜, 인덱스 컬레션, 키 컬렉션, ...)
  • 특징
    • 객체는 참조방식으로 전달됨 (= Pass by reference) 객체의 메모리 주소값으로 전달된다고 생각하면 될듯.
    • 참조방식으로 전달할 경우 데이터가 의도치않게 변경될 가능성이 있기 때문에 복사본으로 전달해야 함
      (Fyi; deep copy, shallow copy)
      객체는 속성들을 변경할 수 있는 mutable한 값

원시타입 - Number Type, BigInt Type

Number Type

  • 숫자에는 정수, 실수가 존재
    다른언어 : int, long, float, double 등..
    자바스크립트에는 하나의 숫자 타입만 존재 = Number
  • 자바스크립트는 모든 숫자를 실수로 처리 (정수타입 없음)

Number Type-배정밀도 64비트 부동소수점

  • 자바스크립트의 숫자표현 : 배정밀도 64비트 부동소수점
  • IEEE 754 : 전자기술자 협회의 부동소수점 표현방식 표준
  • 실수를 연산할 때, 근사값으로 처리 : 0.1 + 0.2는 0.3이 아님
  • -(2^53 - 1)부터 2^53 - 1의 수
    • 원시 래퍼객체에서 상수변수로 제공
    • Number.MAX_SAFE_INTEGER
      Number.MIN_SAFE_INTEGER
  • 숫자형에는 우리가 아는 숫자 이외에 Infinty, NaN이라는 값도 존재
    • Infinity : 무한대를 나타내는 숫자(-Infinity)
    • NaN : Not A Number의 줄임말. 숫자가 아님을 나타냄

BigInt Type

  • 임의 정밀도로 정수를 나타낼 수 있는 JavaScript 숫자 원시 값
  • BigInt를 Number의 최대값을 넘는 정수도 안전하게 저장하고 연산할 수 있음
  • 다른 타입과 혼합하여 연산할 수 없음

원시타입 - StrType, Boolean Type

String Type

  • 텍스트 데이터를 나타낼 때 사용

  • UTF-16 코드 단위의 시퀀스로 표현 (UTF-16 : 유니코드 문자 인코딩 방식 중 하나)

    • 16bit 정수값의 요소로 구성된 집합
    • 각 요소가 string의 한 자리
    • 0번째 index부터 시작

  • 원시값은 불변 == 문자값은 불변


String Type - 표기법

  • 따옴표나 쌍따옴표, 백팃(backtick)으로 감싸서 문자열임을 표현
  • 템플릿 리터러 표기법(``)
    • 백팃의 표현은 ES6이후부터 사용 가능
    • 문자열 처리 기능 제공 (줄바꿈 허용, 표현식 삽입 가능)
    • String interpolation
      My name is ${ 표현식 }

Boolean Type

  • 논리적 데이터 유형
  • 참 혹은 거짓의 값만 가질 수 있음
  • e.g.
    • 상태값) input tag의 checkbox타입의 checked 상태
    • flag 값) 특정 UI의 노출여부를 보여주는 변수의 상태 isShow

원시타입 - undefined와 null Type, Symbol Type

Undefined Type

  • 변수를 선언한 후 값을 할당하지 않은 변수에 할당이 되는 값
    • 변수 초기화 단계에서의 Undefined는 개발자가 의도해서 넣은 값이 아님
  • 개발자가 의도해서 넣을 수도 있음
    -> foo의 경우 의도해서 넣은 것이 아니지만, bar의 경우 의도함

Null Type

  • 값이 없다는 것을 의도적으로 표현할 때 null을 사용

  • 이전에 참조되어있던 값을 의도적으로 더이상 참조하지 않겠다는 뜻으로도 사용

  • null 타입 체크는 일치연산자(===) 사용

    • null의 type은 'object'라고 나오는데, 이는 자바스크립트 스펙 내의 버그
    • null의 타입체크는 일치연산자를 활용

Symbol Type

  • ES6에 추가된 타입
  • 중복되지 않는 유니크한 값
    • 객체의 key로 사용될 수 있음
    • 클래스나 객체형식의 내부에서만 접근할 수 있도록 전용 객체 속성의 키로 사용
  • Symbol 함수를 호출하여 생성

Reference type

객체 타입

  • 객체 타입, Object type, Reference type
  • 객체 타입 : 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조
    • 객체 : 데이터(속성), 데이터에 관련한 동작(method)을 포함하는 개념적인 존재
  • 원시 타입의 값을 제외한 자바스크립트에서의 모든 것은 객체

객체 타입 - mutable

  • 변경 가능한 값(mutable) : 객체의 속성을 변경, 추가, 삭제 가능
    • 원시값 : immutable한 값
  • 힙 메모리에 저장
    • 동적으로 변화 가능하므로, 메모리 공간 확보 및 저장
  • Pass-by-reference
    • 참조 타입이므로, 참조값으로 처리

여러 형태의 객체 타입

  • 일반 객체와 함수
  • 날짜
  • 인덱스 컬렉션
  • 키 컬렉션
  • ...

동작 타입 언어

동적 타입 언어?

  • 자바스크립트는 동적 타입 언어
  • 의도적으로 타입을 변환할 수도 있지만, 의도와는 상관없이 변경되기도 함

명시적 타입 변환

  • 원시 래퍼 객체를 활용하여 개발자가 의도적으로 타입을 변경할 수 있음
    • 값.toString() 문자열 타입으로 변환
    • Number(값) 숫자 타입으로 변환
    • Boolean(값) 불리언 타입으로 변환

암묵적 타입 변환
  • 개발자가 의도하지 않았지만, 타입이 변경될 때가 있음
    • 값 + "" 문자열 타입으로 변환
    • 값 * 1 숫자 타입으로 변환
    • ! !값 불리언 타입으로 변환
  • 값이 전달될 때, 참조되어있던 변수 값 타입이 개발자의 의도와 다르게 암묵적 타입변환으로 변경될 가능성이 있음
    • 타입 추론이 어려워져, 불필요한 디버깅 시간 발생
  • 이를 해결하기 위해
    • 전달되는 시점마다 typeof나 일치연산자를 사용하여 타입 guard 구현
    • 자바스크립트 superSet 타입스크립트 사용
profile
조혜준
안녕하세요
이전 포스트

Javascript 입문

다음 포스트

데이터 처리 : 기본

0개의 댓글