[클라우딩 어플리케이션 엔지니어링 TIL] 240105 - JS 데이터와 형태

Intro..

---

 

본격적인 자바스크립트 학습에 들어갔다.

강의와 함께 모던 자바스크립트 Deep Dive 책을 보며 공부하면 좋을 것 같아서 오랜만에 책을 꺼냈다.

잘 정리해놔야지

 

 

 

오늘 학습한 내용

: 데이터와 형태

---

변수란?

: 메모리의 주소를 쉽게 식별하기 위해 붙인 이름

 

컴퓨터는 CPU로 연산을 처리하고, 데이터를 기억하기 위해 메모리를 사용한다.

메모리는 각각의 주소를 가진 공간에 데이터가 저장된다. 개발자가 직접 메모리 주소로 값을 참조하기는 어려우니 식별자(변수 이름)를 지정해 데이터를 접근할 수 있다.

 

변수 문법

let, const, var 키워드로 변수를 할당한다.

 

var

• 코드 평가단계: 선언과 동시에 변수 초기화 진행
• 코드 실행단계: 값 할당 진행

코드 평가 시점에 변수 초기화가 되어있으므로, 할당문이 실행되기 전에 참조가 가능하다. (호이스팅)

 

✅ 호이스팅

: 선언문이 해당 스코프의 선두로 옮겨진 것처럼 동작하는 특성

 

예시) 변수 a를 선언하기 전에 a를 호출하면 호이스팅 특성 때문에 이미 코드 평가단계에서 변수 초기화를 진행했기 때문에 Error가 나지 않고 초기화된 undefined를 출력한다.

console.log(a) // undefined

var a

 

var의 단점

• 키워드 생략 가능
• 중복 선언 가능
• 변수 호이스팅
• 전역 변수화 -> 무분별한 변수 접근으로 의도치 않은 변수값 변경이 일어날 수 있다.

 

const, let

• 코드 평가단계: 선언만 진행
• 코드 실행단계: 초기화 진행, 값 할당 진행
• 블록레벨 스코프 -> var과 달리 예측 가능한 범위 내에서 변수의 변경이 일어난다.

const: 수정 불가능한 상수 변수, 변수 선언할 때 무조건 값을 할당해야 한다.

let: 재할당이 가능한 변수, 값을 할당하지 않아도 생성할 수 있다.

 

변수 네이밍 컨벤션

• camelCase
• snake_case
• PascalCase
• CONSTANT_CASE

주로 변수명은 camelCase를 사용하고 생성자, 클래스 생성시에 PascalCase를 사용한다.

 

 

 

 

자료형이란?

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

데이터 종류를 데이터 타입, 자료형이라 한다.

 

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

: 원시타입과 객체타입이 존재한다.

 

• 원시 타입
  • String, Number, BigInt, undefined, Null, Boolean, Symbol
  • 값은 변경 불가능한 값이다. (immutable value)
  • "값"으로서 전달된다. (참조 형태 X)
  • 자바스크립트엔 빌트인 객체로 원시 래퍼 객체가 따로 존재한다. 
  • 원시 데이터를 사용할 경우, 해당 래퍼 객체들을 상속받아 사용할 수 있다.

예시) string 데이터 타입을 가진 str 변수가 마치 객체인 것 처럼 str.length 메소드를 사용할 수 있다.

let str = 'hello'
console.log(str.length) // 5

 

• 객체 타입
  • 원시 타입을 제외한 값
  • 일반 객체, 함수, 날짜, 인덱스 컬렉션, 키 컬렉션, ...
  • 참조 방식으로 전달된다. (Pass By Reference)
  • 객체는 속성들을 변경할 수 있는 mutable한 값이다.

 

 

원시타입

• Number
  • 숫자에는 정수, 실수가 존재함
  • 다른 언어에선 int, long, float, double...등이 있지만 자바스크립트에선 하나의 숫자 타입인 Number만 존재한다.
  • 배정밀도 64비트 부동소수점(IEEE 754) 형식 -> 0.1 + 0.2 !== 0.3
  • -(2^53-1) ~ (2^53-1)의 수 → 원시 래퍼객체에서 상수 변수로 제공 (Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER)
  • infinity: 무한대
  • NaN: Not A Number 줄임말 (숫자가 아니다는 뜻)
• BigInt
  • 임의 정밀도로 정수를 나타낼 수 있는 자바스크립트 숫자 원시값
  • BigInt는 Number의 최대값을 넘는 정수도 안전하게 저장하고 연산할 수 있다.
  • 다른 타입과 혼합하여 연산할 수 없다.
• String
  • UTF-16 코드 단위의 시퀀스로 표현
    • 16비트 정수값의 요소로 구성된 집합
    • 각 요소가 string의 한 자리
    • 배열처럼 0번째 index부터 시작한다.
  • 원시값은 불변 === 문자값은 불변
  • "". `` 를 사용

let a = 'test'
console.log(`Hi, this is ${a}`)

 

• Boolean
  • 참 혹은 거짓
• undefined
  • 변수를 선언한 후 값을 할당하지 않은 변수에 할당이 되는 값
  • 개발자가 의도해서 넣을 수 있다.
• null
  • 값이 없다는 것을 의도적으로 표현할 때
  • 이전에 참조되었던 값을 의도적으로 더이상 참조하지 않겠다는 의미

typeof null; // 'object'

// null의 타입은 오브젝트라 일치 연산자로 체크하는 것이 좋음
const foo = null;
foo === null; // true

 

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

 

객체 타입 (Reference Type)

: 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조

원시 타입을 제외한 모든 것이 객체 타입

• mutable: 변경 가능한 값 (원시: immutable)
• 힙 메모리에 저장: 동적으로 변화가능, 메모리 공간 확보 및 저장
• pass-by-reference (참조에 의한 전달)

 

 

동적 타입 언어

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

• 명시적 타입 변환
  • 값.toString()
  • Number(값)
  • Boolean(값)
• 암묵적 타입 변환
  • 값 + "": 문자열 타입으로 변환
  • 값 * 1: 숫자 타입으로 변환
  • !!값: 불리언 타입으로 변환

값이 전달될 때, 개발자 의도와 다르게 암묵적 타입 변환이 일어날 수 있어 타입 추론이 어려워져 불필요한 디버깅 시간이 발생된다.

이를 해결하기 위해, 전달되는 시점마다 typeof나 일치 연산자를 사용해 타입 guard를 구현하거나 타입스크립트를 사용한다.

 

 

 

마무리

---

불금이라 얼른 공부를 끝내고 싶은 마음에 금요일에 강의를 듣고 바로 TIL을 작성하지 않고 미뤄서 다음날에 작성했다.

TIL의 의미가 조금 사라진 것 같아 다시 오늘 하루 배운 것을 당일에 작성할 수 있도록 노력해야겠다.