고인물을 지양하는 블로그

[JavaScript] 기본문법_(Type과 Type Casting)_1 본문

카테고리 없음

[JavaScript] 기본문법_(Type과 Type Casting)_1

yunjaeGong 2021. 8. 22. 16:04

via MEME

 

  자바스크립트는 Loosely Typed(자료형 선언 없이 할당 가능) 언어이다.

자바스크립트의 타입은 Primitive Value, Object 타입으로 나누어지고, 오늘은 Primitive Value 타입과 묵시적 형변환이 주 내용이다.

 

Primitive Value

Primitive Value는 Immutable (변경 불가) 타입이다. 자바처럼 String 타입도 Immutable이다.

독특한 것은 Undefined, Null이 따로 타입으로 분리돼 있다는 것인데, 이 점이 비교 연산 등에서 주의를 필요로 한다.

 

Null 과 Undefined 는 각각  null, undefined 값만을 위해 존재한다.

 

자바스크립트의 Type Casting/Coercion

형변환은 기본적으로 필요한 곳에서 이루어진다. 형변환은 명시적 Explicit (Type Casting)일수도, 묵시적 Implicit (Coercion) 일수도 있다.

 

타입 캐스팅/명시적 형변환은 Number(value) 와 같이 프로그래머가 적절한 코드를 작성하여 타입간 변화를 명시 하는 경우를 뜻한다. 묵시적 형변환(Coercion)은 + == - .. 등 연산자 사용으로 인해 자동적으로 일어나는 형변환이다.

 

타입 변환(Coercion)은 Loosely Typed 언어들과 특히 밀접한 관계가 있는데, 타입이 내부적으로 관리되기 때문에 특히 주의가 필요하다.

1 + 2 + 3; // 6  
1 + 2 + "3"; // 33  
"1" + 2 + 3; // 123 

null == undefined // true
null == 0 // false
0 == "0" // true

JavaScript에서 Primitive Type의 형변환은 아래와 같이 세 가지로 나뉜다.

  • String으로 형변환
  • Boolean로 형변환
  • Number로 형변환
  •  

String으로 형변환

String 타입으로의 명시적 형변환은 String(value) 함수를 사용하면 된다.

묵시적 형변환은 + 연산자를 사용할 때 피연산자에 String이 있을 때 일어난다.

 

String(123)  // "123"
String(1.23)  // "1.23"
String(true)  // "true"
String(undefined)  // "undefined"
String(null)  // "null"

String으로 형변환은 출력하고 싶은 값을 출력 함수에 변수, 상수값을 전달하듯, 대부분 예측 가능한 방식으로 일어난다.

 

Boolean으로 형변환

묵시적 Boolean형 변환은 논리 연산을 수행할 때 발생한다. 위와 마찬가지로 Boolean(value)를 호출하면 명시적으로 형 변환을 할 수 있다.

Boolean형에는 true와 false밖에 없기 때문에 프로그래머 통념처럼 ''""``nullBigInt(0)falseundefined 를 제외하고는 모두 true로 변환된다.

 

주의할 점으로는 

Boolean("0") // true
Boolean(" ") // true

비어있지 않은( "", '', ``) 이 아닌 문자열은 모두 true라는 점만 기억하면 될 것 같다.

 

Number로 형변환

Number타입으로의 명시적 형변환은 Number(value) 함수를 사용하면 된다.

 

특히 숫자형 값를 사용해 무언가를 하려고 하는데, 아래의 예시처럼 값을 문자 기반 폼(form)을 통해 입력받는 경우엔, 명시적 형 변환이 필수다.

<body>

<form>
	<label for="name">숫자:</label>
	<input type="number" class="number">
</form>
<button onclick="asdf()">Submit</button>

<script>
    function asdf() {
        const name = document.querySelector(".number").value; // String 타입
        alert(typeof(name)); // string
    }
</script>

</body>

결과

 

형 변환 테이블

https://ko.javascript.info/type-conversions#ref-4530

 

묵시적 변환 시점은 비교, 비트 산술 단항(+) 연산 주변에서 일어나고, 의도치 않은 묵시적 형 변환에 주의할 필요가 있다. 

 

// 명시적 형 변환
alert(Number("123z"));  // NaN ("z"를 숫자로 변환하는 데 실패함)
alert(Number("   123  "));  // "123"

// operand + operand 에서 한 쪽이 String 타입인 경우
alert("1" + 1); // 11
alert(1 + "1"); // 11
alert(10 + "1"); // 101
alert(1 + 2 + "1"); // 31
alert(1 + "2" + 1); // 121

// 기타 수학 연산자의 경우
alert("11" - 1)  // 11
alert( "6" / "2" ); // 3, 문자열이 숫자형으로 자동변환된 후 연산이 수행

// 비교연산자
alert(null == undefined)  // true
alert(null === undefined)  // false 형변환 x, 서로 다른 타입
alert("hello" > 3)  // false "hello"가 NaN으로 변환
alert(NaN > 3)  // false
alert(NaN > -1)  // false
NaN > -1  // undefined

// 단항 연산자
alert(+"123)  // 123

 

 

JavaScript data types and data structures - JavaScript | MDN (mozilla.org)

자바스크립트 기본 (javascript.info)

자바스크립트의 느슨한 타입(Loose Typing) 이해하기 | bestalign's dev blog

 

Comments