본문 바로가기
자바스크립트 DeepDive

자바스크립트 DeepDive 6장 데이터 타입

새콤하고달콤 2022. 10. 1. 00:17
반응형
  • 데이터 타입은 값의 종류를 말함.
  • 원시 타입과 객체 타입으로 분류할 수 있음.

원시 타입: 숫자 타입, 문자열 타입, 불리언 타입, undefined 타입, null 타입, 심벌 타입

객체 타입: 객체, 함수, 배열 등

6.1. 숫자 타입

  • 자바스크립트는 하나의 숫자 타입만 존재
  • 정수, 실수, 2진수, 8진수, 16진수 리터럴은 모두 메모리에 배정밀도 64비트 부동소수점 형식의 2진수로 저장됨.
    • 단정밀도 : 32비트 (부호 1bit + 지수 8bit + 가수 23bit)
    • 배정밀도 : 64비트 (부호 1bit + 지수 11bit + 가수 52bit)
var integer = 10; // 정수
var double = 10.12 // 실수
var negative = -20; // 음의 정수


Infinity: 양의 무한대
-Infinity: 음의 무한대
NaN: 산술 연산 불가

 

6.2. 문자열 타입

  • 텍스트 데이터를 나타내는 데 사용
var string;
string = '문자열';
string = "문자열";
string = `문자열`;

 

6.3. 템플릿 리터럴

  • 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 편리한 문자열 처리 기능을 제공
  • 작은따옴표(’’) 또는 큰따옴표(””)같은 일반적인 따옴표
  • 문자열은 문자열 연산자 +를 사용해 연결할 수 있음.
var first = 'Ung-mo';
var last = 'Lee';

console.log('My name is ' + first + ' ' + last + '.');
  • 템플릿 리터럴 내에서는 표현식 삽입을 통해 간단히 문자열을 삽입할 수 있음
var first = 'Ung-mo';
var last = 'Lee';

console.log(`My name is ${first} ${last}.`);

 

6.4. 불리언 타입

  • 불리언 타입의 값은 논리적 참, 거짓을 나타내는 true와 false 뿐

6.5. undefined 타입

  • undefined 타입 값은 undefined가 유일
  • var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화됨.

6.6. null 타입

  • null 타입의 값은 null이 유일함.
  • null은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용
  • 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미 → 참조하지 않는 메모리 공간에 대해 가비지 콜렉션을 수행 (dfs 알고리즘)
  • 함수가 유효한 값을 반환할 수 없는 경우 → 명시적으로 null을 반환
<!DOCTYPE html>
<html>
<body>
  <script>
    var element = document.querySelector('.myClass');

    console.log(element); // null. 
  </script>
</body>
</html>

 

  • 39.2.4 Document.prototype/Element.prototype.querySelector 메서드는 인수로 전달한 CSS 선택자를 만족시키는 하나의 요소 노드를 탐색하여 반환함.
  • 인수로 전달한 CSS 선택자를 만족시키는 요소 노드가 여러 개인 경우 첫번째 요소 노드만 반환함.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <ul>
    <li class="fruit">Apple</li>
    <li class="fruit">FineApple</li>
    <li class="fruit">Banana</li>
  </ul>
<script>
   const $elem = document.querySelector('fruit');

   $elem.style.color = 'red';
</script>
</body>
</html>

 

  • 인수로 전달한 CSS 선택자를 만족시키는 요소 노드가 존재하지 않는 경우 null을 반환함.
  • 인수로 전달한 CSS 선택자가 문법에 맞지 않는 경우 DOMException 에러가 발생함.
  • 39.2.4 Document.prototype/Element.prototype.querySelectorAll 메서드는 인수로 전달한 CSS 선택자를 만족시키는 모든 요소 노드를 탐색하여 반환함.
  • 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 NodeList 객체를 반환함.
  • css 선택자 문법을 사용하는 querySelector, querySelectorAll 메서드는 getElementById, getElementsBy*** 메서드보다 다소 느린 것으로 알려져 있다.
  • id 어트리뷰트가 있는 요소 노드를 취득하는 경우는 getElementById 메서드를 사용하고, 그 외의 경우에는 querySelector, querySelectorAll 메서드를 사용하는 것을 권장함.

6.7. 심벌 타입

  • 심벌은 ES6에서 추가된 7번째 타입, 변경 불가능한 원시 타입의 값. 심벌 값은 다른 값과 중복되지 않는 유일무이한 값.
var key = Symbol('key');
console.log(typeof key); // symbol

// 객체 생성
var obj = {};

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

6.8. 객체 타입

  • 자바스크립트 타입은 크게 원시 타입과 객체 타입으로 분류
  • 자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든 것이 객체라는 것

6.9. 데이터 타입의 필요성

  • 메모리에 값을 저장하려면 먼저 확보해야 할 메모리 공간의 크기를 결정해야 함.
  • 몇 바이트의 메모리 공간을 사용해야 낭비와 손실 없이 값을 저장할 수 있는지 알아야 함.
  • 자바스크립트 엔진은 데이터 타입, 값의 종류에 따라 정해진 크기의 메모리 공간을 확보함.
var score = 'str';

// 숫자 값 100을 저장하기 위해 메모리 공간을 확보
// 자바스크립트 엔진은 리터럴 100을 숫자 타입의 값으로 해석하고 8바이트를 할당.
// 100을 2진수로 저장함.

 

6.10. 동적 타이핑

  • 정적 타입 언어는 변수의 타입을 변경할 수 없으며, 변수에 선언한 타입에 맞는 값만 할당할 수 있음.
  • 컴파일 시점에 타입 체크(선언한 데이터 타입에 맞는 값을 할당했는지 검사하는 처리)
// c 변수에는 1바이트 정수 타입의 값(-128 ~ 127)만 할당할 수 있음.
char c;

// num 변수에는 4바이트 정수 타입의 값만 할당할 수 있음.
int num;
  • typeof 연산자는 변수의 데이터 타입을 반환하는 것이 아니라 변수에 할당된 값의 데이터 타입을 반환함.
  • 자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정됨. → 동적 타이핑
  • 동적 타입 언어는 자바스크립트, 파이썬, PHP, 루비, 리스프, 펄 등이 있음.
var foo;
console.log(typeof foo); // undefined

foo = 3;
console.log(typeof foo);// number 

foo = 'Hello'; // striong
console.log(typeof foo);

foo = true; // boolean
console.log(typeof foo); 

foo = null; // object
console.log(typeof foo);

foo = Symbol(); // symbol
console.log(typeof foo);

foo = {}; // object
console.log(typeof foo);

foo = []; // object
console.log(typeof foo); 

foo = function () {] // function
console.log(typeof foo);

 

6.10.2 동적 타입 언어와 변수

  • 변수에 어떤 데이터 타입의 값이라도 자유롭게 할당할 수 있음.
  • 유연성은 높지만 신뢰성이 떨어진다는 단점이 있음.
  • 변수는 꼭 필요한 경우에 한해 제한적으로 사용함.
  • 변수의 유효 범위(스코프)는 최대한 좁게 만들어 변수의 부작용을 억제해야 함. 
  • 전역변수 사용하지 않기
  • 변수보다는 상수 사용하기
  • 변수의 목적이나 의미를 파악할 수 있도록 네이밍하기
반응형

'자바스크립트 DeepDive' 카테고리의 다른 글

자바스크립트 DeepDive 9장 타입 변환과 단축 평가  (1) 2022.10.08
자바스크립트 DeepDive 8장 제어문  (1) 2022.10.06
자바스크립트 DeepDive 7장 연산자  (0) 2022.10.01
자바스크립트 DeepDive 5장 표현식과 문  (0) 2022.09.27
자바스크립트 DeepDive 4장 변수  (0) 2022.09.25

'자바스크립트 DeepDive' Related Articles

티스토리툴바