자바스크립트 자료형

김주형·2022년 7월 20일
0

느슨한 타입의 동적 언어

->JavaScript는 느슨한 타입의 동적언어이다.
->어떤 특정 타입과 연결되지 않으며,모든 타입의 값으로 할당 (및 재할당) 가능하다.

JavaScript의 타입

원시값(언어의 최고 로우레벨 , 불변 데이터)

1.Boolean 타입 -> true , false

2.Null 타입 -> null

3.Undefined 타입 -> 값을 할당하지 않은 변수

4.Number 타입

4-1)Number 타입
->-(2^56 -1) 부터 2^53 -1 까지의 수

->부동소수점 숫자 외에도 +Infinity, -Infinity , NaN 포함한다.

-> +Infinity , -Infinity 범위 내에서 가능한 가장 크거나 작은 수를 확인하려면 Number.MAX_VALUE , Number.MIN_VALUE 상수를 사용한다.

->ECMAScript 2015부터는 Number.isSafeInteger()와 Number.MAX_SAFE_INTEGER 및 Number.MIN_SAFE_INTEGER를 사용하여 숫자가 배정밀도 부동 소수점 숫자 범위 안에 있는지 확인할 수도 있습니다. 이 범위를 넘어서면 정수는 더 이상 안전하지 않으며 그 값의 배정밀도 부동 소수점 근사값이 된다.

->Number 타입의 값 중 두 가지 방식으로 표현할 수 있는 유일한 값으로 0이 있습니다. 0은 -0과 +0 둘 다로 표현할 수 있습니다. (0은 +0의 별칭입니다)

-> console.log(+0 === -0) // true

-> 0으로 나눌 경우 둘의 차이를 볼 수 있다. (+0 , -0의 차이)

42 / +0
Infinity
42 / -0
-Infinity

4-2)BigInt
->임의 정밀도로 정수를 나타낼 수 있는 JavaScript 숫자 원시 값

->Number의 안전 한계를 넘어서는 큰 정수도 안전하게 저장하고 연산

->즉 Number.MAX_SAFE_INTEGER(Number의 안전 한계)를 넘는 숫자에 대해 계산이 가능해진다.

> const x = 2n ** 53n;
9007199254740992n
> const y = x + 1n;
9007199254740993n

->BigInt는 if, ||, &&, Boolean, !처럼 불리언 변환이 발생하는 곳에서는 Number처럼 동작한다.

->BigInt는 Number와 혼합해 연산할 수 없으며, 이때 TypeError가 발생한다.

5.String 타입
->텍스트 데이터 , 다른 언어와 달리 불변하다.(생성 이후 변경 불가능)

->String.substr() 과 같은 내장 함수로 각각의 부분 문자열 선택 가능

->문자열은 텍스트 데이터에만 사용해야한다.

6.Symbol 타입
->고유하고 변경 불가능한 원시값 key로 사용할 수 있다.

객체(속성의 컬렉션)

식별자 -> 코드 내의 변수,함수,혹은 속성을 식별하는 문자열 (key 값등..)

속성의 컬렉션으로 볼 수 있다. 객체 리터럴 구문을 사용해 제한적으로 속성을 초기화 하거나 속성을 추가 , 제거 할 수 있다. 속성 값으로는 다른 객체를 포함해 모든 타입을 사용할 수 있기 때문에 복잡한 자료구조 구축이 가능하다. 속성은 '키'값으로 식별 , 키 값으로는 문자열 값 , 심볼 등 사용한다.

JavaScript 형변환(Type Casting)

자바스크립트는 타입이 매우 유연한 언어이다. 그래서 자바스크립트 엔진이 필요에 따라 암시적변환을 혹은 개발자의 의도에 따라 명시적 변환을 실행한다.

암시적 형 변환(Implicit type conversion)

자바스크립트 엔진이 필요에 따라 자동으로 데이터 타입을 변환시키는 것

1)산술연산자

+(더하기)연산자는 문자형 > 숫자형 이기 때문에 숫자형이 문자형으로 변환된다.

100 + '점' // 100점 

다른 연산자(- * / %)는 숫자형 > 문자형이기 때문에 더하기와 같은 문자형으로의 변환이 일어나지 않는다.

string * number // number
number * number // number
string * boolean //number
number * boolean //number

명시적 형 변환(Explicit Type Conversion)

->개발자가 의도를 가지고 데이터 타입을 변환시키는 것
->Object(), Number(), toString(), Boolean()

Number()
-> falsy values -> (null,false,'빈문자열')에 대해서는 0으로 표현한다.
-> truthy values -> 1을 반환한다.
-> array -> 0을 반환한다.
-> 소수점까지 숫자타입으로 가져올 수 있다.

parseInt()
->정수형의 숫자로 변환한다.
->문자열로 된 부분에서 정수만 뽑아서 변환해주는 특징이 있다.

parseFloat()
->부동 소수점의 숫자로 변환한다.

String()
->문자 타입으로 변형

toString()
->문자열로 변환 후 반환한다.
->인자로 기수를 선택할 수 있다. , defatult는 10진수

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

toFixed()
->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" -> 99.9에서 반올림

Boolean()
->불린형 타입으로 바꾸는 것

동치비교

== vs ===

==

-> 엄격하지 않은 동치 비교
-> 두 피연산자의 값의 타입이 다를 경우 자동으로 일부 피연산자의 타입을 변환 후 값을 비교한다.
-> 타입을 비교하지 않는다.

10 == 10    // true

10 == '10'  // true

true == 1   // true

true == '1' // true

true == 'true' // false

null == undefined // true

true == 'true' // false

불리언 값을 1로 변환하면 , 1 == 'true'가 되는데 문자열 'true'는 숫자로 변경이 불가능하다. 즉 1 == 'true'로 비교되며,false를 반환한다.

===

->타입을 변환하지 않으므로 엄격한 방식이다.
->즉 타입이 다르면 false를 반환한다.

10 === 10   // true

10 === '10' // false

true === 1  // false

true === 'true' // false

null === undefined // false

NaN === NaN // false

->NaN 값은 자기 자신을 포함하여 어떠한 값과도 일치하지 않는다.
->문자열은 인코딩 방식이 다를 수 있기 때문에 localeCompare 메서드를 사용하는 것이 좋다.

느슨한 타입의 동적 언어의 문제점과 보완점

1.실행 도중에 변수에 예상치 못한 타입이 들어와 타입에러가 발생할 수 있다.

2.동적타입 언어는 런타임 시 확인할 수 밖에 없기 때문에 코드가 길고 복잡해질 경우 타입 에러를 찾기 어려워진다.

3.보완점으로 TypeScript , Flow 등을 사용할 수 있다.

undefined와 null의 차이점

undefined
->변수를 선언하고 값을 할당하지 않은 상태 (자료형이 없는 상태)
->원시값으로 선언한 후에 값을 할당하지 않은 변수나 값이 주어지지 않은 인수에 자동으로 할당된다.
->전역 객체의 속성 중 하나로, 전역 스코프에서의 변수이기도 하다.
->undefined 변수의 초기 값은 undefined 원시 값이다.

변수가 undefined를 반환하는 경우
1.값을 할당하지 않은 변수
2.메서드와 선언에서 변수가 할당받지 않은 경우
3.함수가 값을 return 하지 않았을 때

null
->변수를 선언하고 빈값을 할당한 상태
->원시값 중 하나로 어떤 값이 의도적으로 비어있음을 표현한다.
->해당 변수가 어떠한 객체도 가리키고 있지 않다는 것을 의미한다.

<출처>
https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures

profile
프론트엔드 개발 지망생입니다.

0개의 댓글