[React] JavaScript의 자료형과 JavaScript만의 특성은 무엇일까

지냐킴·2022년 7월 20일
0

React

목록 보기
1/20
post-thumbnail

JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ?

느슨한 타입(loosely typed)의 동적(dynamic) 언어

JS는 기본적으로 느슨한 타입언어이자 동적타입 언어이다. 그래서 JS에서 변수를 선언할 때 필요한 예약어는 var 단 하나 이다. (사실 없이도 변수 선언이 가능하다) 즉,느슨한 타입은 타입 없이 변수를 선언하는 것이다.

var a = "a";  //a는 이제 string 타입
a = 1;        //a는 이제 number 타입
a = true;     //a는 이제 boolean 타입
a = null      //a는 이제 null 타입
a = undefined //a는 이제 undefined 타입

하나의 변수에 모든 타입의 데이터를 넣을 수 있다.

기본형 데이터와 참조형 데이터

6가지 자바스크립트의 기본 타입(Primitive value)
원시형

  • number(숫자)
  • string(문자열)
  • boolean(불린값)
    true or false
  • undefined
    값이 존재하지 않을 때 나타내는 타입
    undefined 타입은 undefined 하나의 값만을 가진다. undefined는 해당 변수가 아직 할당되지 않았음을 의미한다. 자바스크립트에서 변수가 생성되고 할당되지 않았을 때의 기본 값이 undefined이다.
  • null
    null 타입은 null값 하나의 값만을 가진다. null은 비어있음을 나타내는 값이다. 값이 할당되지 않았다는 의미의 undefined와는 다르게 아예 값이 없음(아무것도 없음) 을 의미한다.
  • symbol(ES6에서 추가)
    유일한 값을 나태나는 타입
    이 6가지 기본 타입 값들은 변경이 불가능한 값(immutable value)들이다.

객체형

  • Object
    key와 value를 이룬 객체를 나타내는 타입.

JavaScript 형변환

JS에는 필요에 따라 암시적변환 또는 개발자의 의도에 따라 명시적변환을 실행한다

명시적 형 변환(Explicit Type Conversion)
명시적 변환이란 개발자가 의도를 가지고 데이터 타입을 변환시키는 것

  • A Type to String Type

.string() : 함수 사용

String(123); //”123"
String(123.456); //”123.456"

.toString() : 주어진 값을 문자열로 변환 후 반환

var trans = 100;
trans.toString(); //”100"
trans.toString(2); //”1100100"
trans.toString(8); //”144"
var boolT = true;
var boolF = false;
boolT.toString(); //”true”
boolF.toString(); //”false”

.toFixed() : 인자를 넣으면 인자값만큰 반올림하여 소수점으로 표현, 소수점을 넘치는 값이 인자로 들어오면 '0'으로 길이를 맞춘 문자열을 반환한다.

var trans = 123.456789;
var roundOff = 99.987654;
trans.toFixed(); //”123"
trans.toFixed(0); //”123"
trans.toFixed(2); //”123.46"
trans.toFixed(8); //”123.45678900"
roundOff.toFixed(2); //”99.99"
roundOff.toFixed(0); //”100"
  • A Type to Number

.Number() : 정수와 실수형의 숫자로 변홚나다. 숫자로 반환되지 않는 경우 NaN(not an Number) 반환
.parseInt() : parseInt()는 정수형의 숫자로 변환한다.
.parseFloat() : parseFloat()는 부동 소수점의 숫자로 변환한다

parseFloat(!123); //NaN
parseFloat(123.123456); //123.123456
parseInt(123.123456); //123
parseFloat(123.123456); //123.123456
parseFloat(“ a123.123456); //NaN

단항연산자(unary-operators)로 숫자형 타입 변경
단일 연산자를 이용한 숫자형 변환은 Number와 동일한 동작을 하는 것을 볼 수 있다. 단항 연산자는 자바스크립트 함수를 사용하지 않고 타입변환을 할 수 있는 쉽고 효율적인 방법이다.

+'1000'; // 1000
+'-1000'; // -1000
+'Infinity'; // Infinity
-'1000'; // -1000
+true; // 1
+[]; /// 0
+false; // 0
+null; // 0
+'';// 0
  • A Type to Boolean Type
    Boolean타입으로 변경은 Boolean 또는 부정연산자(!)를 사용하여 Boolean값을 만들어낸다. 부정연산자는 의미그대로 !을 사용하면 Boolean() 반대의 을 리턴한다.
const numb1 = 0;
Boolean(numb1); // false
!!numb1; // false
!numb1; // true

==, ===

  • ==
    뜻은 Equal Operator
    ==는 a == b 라고 할때, a와 b의 값이 같은지를 비교해서, 같으면 true, 다르면 false라고 한다.(값만 같으면 true이다.)

  • ===
    뜻은 Strict Equal Operator
    ===는 Strict, 즉 엄격한 Equal Operator로써, "엄격하게" 같음을 비교할 때 사용하는 연산자이다.
    ===는 a === b 라고 할때, 값과 값의 종류(Data Type) 가 모두 같은지를 비교해서, 같으면 true, 다르면 false라고 한다.

2 == "2" // expected output: true
// 값이 같기 때문에 true 

2 === "2" // expected output: false 
console.log(typeof 2);	// expected output: "number"
console.log(typeof "2");  // expected output: "string"
// date type 이 다르기 때문에 false 

느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점과 보완방법

동적타입 언어는 사전에 버그를 미리 간파하기 어렵다. 실행 도중 변수에 예상치 못한 타입이 들어와 타입에러가 발생할 수 있다. 그리고 동적타입 언어는 런타임 시 확인할 수 밖에 없기 때문에, 코드가 길고 복잡해질 경우 타입 에러를 찾기가 어려워 집니다.

보완방법으론 동적 타입의 언어의 단점을 보완하기 위해 TypeScript가 등장했다. 타입스크립트는 변수를 선언할 때, 해당 변수의 타입을 함께 선언해주어 컴파일 단계에서 타입 오류를 파악할 수 있다.

profile
코린이일기

0개의 댓글