JavaScript/모던 자바스크립트 딥다이브

[모던 JS 딥다이브] 6장 데이터타입

dbfl9911 2023. 11. 25. 17:24
반응형

https://github.com/kimyurie/study_modernJSdeepDive/tree/master/06_%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%83%80%EC%9E%85

아래 정리한 문서는 티스토리에서 일부 지원되지 않는 마크다운 기능이 있어 서식이 정확하지 않습니다ㅜㅜ
정확한 정리 문서는 위에 깃허브 링크를 참고해주세요!

6. 데이터 타입

값의 종류로 원시 타입과 객체 타입으로 나뉜다

  • 원시 타입 : 숫자 타입, 문자열 타입, 불리언 타입, undefined 타입, null 타입, 심벌 타입
  • 객체 타입 : 객체, 함수, 배열 등

6.1 숫자 타입

하나의 숫자 타입만 존재 → 정수(소수점x)와 실수(소수점o) 구분 없이 모든 수를 실수로 처리

// 숫자 타입은 모두 실수로 처리
console.log(1 === 1.0); // true
console.log(4 / 2); // 2
console.log(3 / 2); // 1.5
  • Infinity, -Infinity : 양의 무한대 / 음의 무한대
  • NaN : 산술 연산 불가
  • console.log(10 / 0); // Infinity console.log(10 / -0); // -Infinity console.log(1 * 'String'); // NaN

6.2 문자열 타입

작은 따옴표, 큰 따옴표, 백틱(``)으로 텍스트 감싸며 보통 작은 따옴표 사용

  • 원시타입으로 변경 불가능한 값 → 문자열이 생성되면 그 문자열을 변경할 수 없다는 것 의미 (ㄴ 11장 문자열과 불변성에서 나옴)

6.3 탬플릿 리터럴

`` 사용

  • 일반 문자열은 줄바꿈 허용 안되지만(\사용해야 가능) 템플릿 리터럴은 줄바꿈 허용
  • 표현식을 삽입하려면 ${ }으로 표현식을 감쌈 → 아래 코드 예시와 같이 표현식 평가 결과가 문자열이 아니더라도 문자열로 타입 강제 변환되어 삽입
  • console.log(`1 + 2 = ${1 + 2}`); // 1 + 2 = 3

6.4 불리언 타입

true, false으로 조건문에서 자주 사용

6.5 undefined 타입

  • var로 선언한 변수는 undefined로 암묵적으로 초기화된다.
  • 변수를 선언한 이후 값을 할당하지 않으면 undefined가 반환
  • var foo; console.log(foo); // undefined
  • 의도적으로 undefined를 변수에 할당하는 것은 권장 ❌ → 변수에 값이 없다라는 것 나타낼 때는 null 사용
  • [ 🗒️선언과 정의 ] js에서 변수는 '선언한다', 함수는 '정의한다'고 표현

6.6 null 타입

변수에 값이 없다는 것을 의도적으로 명시할 때 사용

  • 변수에 null 할당 → 이전에 참조하던 값 더이상 참조 x (이전에 할당되어 있던 값에 대한 참조를 제거)
  • → js 엔진 누구도 참조하지 않는 메모리 공간에 대해 가비지 콜렉터를 수행
  • 함수가 유효한 값을 반환할 수 없는 경우, 명시적으로 null 반환
  • var foo = 'Lee'; // 이전 참조 제거 // 유용하지는 않음 → 변수 스코프 좁게 만들어 변수 자체를 빨리 소멸시키는 방법이 나음 foo = null;
  • 아래 코드처럼 함수가 유효한 값 반환할 수 없는 경우도 null 반환
  • <!DOCTYPE html> <html> <body> <script> var element = document.querySelector(".myObj"); // HTML 문서에 myObj 클래스를 갖는 요소가 없다면 null을 반환 console.log(element); // null </script> </body> </html>

6.7 심벌타입

주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용 (ㄴ33장에 나옴)

  • Symbol 함수를 호출해 생성 → 생성된 심벌값은 외부에 노출되지 않으며 다른 값과 절대 중복되지 않는 유일무이한 값이다
  • var key = Symbol('key'); // 심벌값 생성 console.log(typeof key); // symbol

var obj = {};

obj[key] = 'value'; // 이름이 충돌할 위험이 없는 유일무이한 값인 심벌을 프로퍼티 키로 사용
console.log(obj[key]); // value

```

6.8 객체타입

  • 자바스크립트를 이루고 있는 거의 모든 것이 객체(ㄴ11장에 나옴)

6.9 데이터 타입의 필요성

  • 1️⃣ 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해
  • 2️⃣ 값을 참조할 때 한번에 읽어들여야 할 메모리 공간의 크기를 결정하기 위해
  • 3️⃣ 메모리에서 읽어들인 2진수를 어떻게 해석할지 결정하기 위해

6.10 동적 타이핑

자바스크립트 변수는 선언이 아닌 할당에 의해 타입이 결정되며 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있음

자바스크립트 → 동적 타입 언어

동적 타입 언어의 단점

  • 변수 값은 언제든지 변경될 수 있기 때문에 복잡한 프로그램에서는 변화하는 변수 값 추적 어려움
  • 값의 변경에 의해 타입도 언제든지 변경될 수 있기 때문에 값을 확인하기 전까지 타입을 확실할 수 없음
  • js는 개발자 의도와 상관 없이 js 엔진에 의해 암묵적으로 타입이 자동 변환되기도 함 → 오류 발생
  • ➡️ 동적 타입 언어는 유연성은 높지만 신뢰성은 떨어진다

[ 📓 변수 사용시 주의 사항 ]

  • 변수는 꼭 필요할 경우에 한해 제한적으로 사용해라. -> 변수의 개수가 많으면 많을수록 오류가 발생할 확률도 높아짐
  • 변수의 유효범위(스코프, scope)는 최대한 좁게 만들어 변수의 부작용을 억제해라. -> 스코프가 넓으면 넓을수록 변수로 인해 오류가 발생할 확률이 높아진다.
  • 전역 변수는 최대한 사용을 피해라. -> 전역 변수는 프로그램의 복잡성을 증가시키고, 처리 흐름을 추적하기 어렵게 만들고, 오류가 발생할 경우 원인을 특정하기 어렵게 만든다.
  • 변수보다 상수를 사용해 값의 변경을 억제해라.
  • 변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍해라. -> 의도가 명확한 네이밍은 코드를 이해하기 쉽게 만들고, 이는 협업과 생산성 향상에 도움을 준다.
    ```
  • 가독성이 좋은 코드가 좋은 코드다
반응형