9장 유형 변환 및 링크 평가

1. 유형 변환이란 무엇입니까?

– 자바스크립트에서 모든 값에는 유형이 있습니다.

값 유형은 개발자의 의도에 따라 다른 유형으로 변환될 수 있습니다.

– 개발자로부터 값의 유형을 의도적으로 변환만들다 명시적 유형 변환 또는 주조 유형그것은이라고

– 개발자 의도와 상관없이 표현식 평가 중 JavaScript 엔진에 의해 암시되는 자동 유형 변환될 수 있습니다 암시적 유형 변환 또는 일종의 강박그것은이라고

var x=10;
//암묵적 타입 변환
//문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성한다.


var str = x+'';

console.log(typeof str, str); //string 10

//x변수의 값이 변경된 것은 아니다.


console.log(typeof x,x); //number 10

– 명시적 유형 변환이나 암시적 유형 변환 모두 원래 기본 값(위 예에서 변수 x의 값)을 직접 변경하지 않습니다.

원시 점수는 변경할 수 없는 값이며 변경할 수 없습니다.

타입캐스팅이란 기존 프리미티브 값을 사용하여 다른 유형의 새로운 프리미티브 값을 생성합니다.

하는 것이다

– 위의 예에서 x+” 표현식을 평가하기 위해 JavaScript 엔진은 변수 x의 숫자 값을 기반으로 새 문자열 값 ’10’을 생성하고 이를 사용하여 표현식 ’10’+”을 평가합니다.

이때 암시적으로 생성된 문자열 ’10’은 변수 x에 재할당되지 않습니다.

– 즉, 암시적 유형 변환은 기존 변수를 재할당하여 값을 변경하지 않습니다.

표현식을 올바르게 평가하기 위해 JavaScript 엔진은 피연산자의 값을 암시적으로 캐스팅하여 한 번만 사용된 다음 폐기되는 새 유형의 값을 생성합니다.

2. 암시적 유형 변환

– 코드의 컨텍스트를 고려하십시오.암시적으로 JavaScript 엔진 데이터 유형 변환(암시적 유형 변환)할 때가 있습니다.

1) 문자열 타입으로 변환

1+'2' // "12"

– + 연산자는 피연산자 중 적어도 하나가 문자열이기 때문에 문자열 연결 연산자 역할을 합니다.

문자열 연결 연산자의 모든 피연산자는 코드 컨텍스트에서 문자열 유형이어야 합니다.

– JavaScript 엔진은 문자열 연결 연산자의 피연산자 중 문자열이 아닌 피연산자를 암시적으로 문자열 유형으로 변환합니다.

2) 숫자형으로 변환

1-'1' //0
1*'10' // 10
1/'one' //NaN

– 위 예제에서 사용된 연산자는 모두 산술 연산자입니다.

산술 연산자의 역할은 숫자 값을 생성하는 것입니다.

따라서 산술 연산자의 모든 피연산자는 코드 컨텍스트에서 숫자 형식이어야 합니다.

– JavaScript 엔진은 숫자가 아닌 산술 연산자의 피연산자를 암시적으로 숫자 유형으로 변환하여 산술 연산자 표현식을 평가합니다.

이때 피연산자를 수치형으로 변환할 수 없는 경우 산술 연산을 할 수 없기 때문에 식의 결과이다 NaN된다

'1'>0 //true

– 비교 연산자의 역할은 부울 값을 생성하는 것입니다.

오전. > 비교 연산자는 피연산자의 크기 비교따라서 모든 피연산자는 코드 컨텍스트에서 모두 숫자 유형이어야 합니다.

비교 연산자 표현식을 평가하기 위해 JavaScript 엔진은 숫자 유형이 아닌 비교 연산자의 피연산자를 숫자 유형으로 암시적으로 변환합니다.

3) 불리언 타입으로 변환

– if 문 또는 for 문과 같은 제어 문 또는 삼항 조건 연산자의 조건식은 부울 값, 즉 논리적 참/거짓으로 평가되어야 하는 식입니다.

JavaScript 엔진은 조건식 평가 결과를 부울 유형으로 암시적으로 변환합니다.

if('') console.log('1');
if(true) console.log('2');
if(0) console.log('3');
if('str') console.log('4');
if(null) console.log('5');

// 2 4

– 이 시점에서 JavaScript 엔진은 부울 유형이 아닌 값을 반환합니다.

부울 값(참으로 평가되는 값) 또는 거짓 값(거짓으로 평가되는 값)즉, 다음과 같이 부울 값으로 평가되어야 하는 컨텍스트에서 제어문의 조건식은 진리값입니다.

진실잘못된 값입니다 잘못된~처럼 암시적 형식 변환이 발생합니다.

– 다음 값은 False로 평가잘못된 값입니다.

잘못된
정의되지 않음
영
0, -0
NaN
”(빈 문자열)

3. 명시적 형 변환

– 개발자의 의도대로 형식을 명시적으로 변경하는 방법에는 여러 가지가 있습니다.

두 가지 방법이 있습니다: new 연산자 없이 기본 제공 표준 생성자 함수(String, Number, Boolean) 호출, 기본 제공 방법 사용, 앞에서 설명한 암시적 형식 변환 사용.

1) 문자열 타입으로 변환

– 문자열이 아닌 값을 문자열로 변환하는 방법은 다음과 같습니다.

new 연산자 없이 String 생성자 함수를 호출하는 방법은 다음과 같습니다.
Object.prototype.toString 메서드 사용
문자열 연결 연산자를 사용하는 방법

//1. String 생성자 함수를 new 연산자 없이 호출하는 방법
// 숫자 타입 => 문자열 타입
String(1); // "1"
String(NaN); //"NaN"
String(Infinity); // "Infinity"

//불리언 타입 => 문자열 타입
String(true); //"true"
String(false); //"false"

//2.Object.prototype.toString 메서드를 사용하는 방법
// 숫자 타입 => 문자열 타입
(1).toString(); // "1"
(NaN).toString(); //"NaN"
(Infinity).toString(); //"Infinity"
//불리언 타입 => 문자열 타입
(true).toString(); //"true"
(false).toString(); //"false"

//3. 문자열 연결 연산자를 이용하는 방법
// 숫자 타입 => 문자열 타입
1+''; //"1"
NaN+''; //"NaN"
Infinity+''; //"Infinity"
// 불리언 타입 => 문자열 타입
true+''; //"true"
false+''; //"false"

2) 숫자형으로 변환

– 숫자형이 아닌 값 숫자 유형으로 변환방법은 다음과 같습니다.

new 연산자 없이 Number 생성자 함수를 호출하는 방법은 다음과 같습니다.
parseInt 및 parseFloat 함수 사용 방법(문자열만 숫자형으로 변환 가능)
+ 단항 산술 연산자 사용법
* 산술 연산자 사용법

3) 불리언 타입으로 변환

– Non-Boolean 타입의 값을 Boolean 타입으로 변환하는 방법은 다음과 같습니다.

new 연산자 없이 부울 생성자 함수를 호출하는 방법
!
부정 논리 연산자를 두 번 사용하는 방법

4. 요약 평가

1) 논리 연산자를 사용한 링크 평가

– 논리합(||) 또는 논리곱(&&) 연산자. 식 평가 결과는 부울 값일 수 없습니다.

분리(||) 또는 논리적 연결 연산자 표현식(&&)은 항상 두 피연산자 중 하나로 평가됩니다.

오전.

'Cat' && 'Dog' // "Dog"

– 논리적 곱 연산자(&&). 두 피연산자가 모두 참입니다.

평가 시 true 반환논리 연산자는 평가는 왼쪽에서 오른쪽으로하다.

– 첫 번째 피연산자 ‘고양이‘는 그러므로 진리값이다.

사실로 평가하다.

그러나 여기까지는 위 식을 평가할 수 없습니다.

위 식은 두 번째 피연산자가 평가될 때까지 평가할 수 없습니다.

즉, 두 번째 피연산자는 위 논리 AND 연산자의 식을 평가한 결과를 결정합니다.

이 경우 논리 연산자는 논리 연산의 결과를 결정하는 두 번째 피연산자즉 문자열 ‘dog’는 있는 그대로 돌려 주다하다.

– 논리합 연산자(||)는 논리곱 연산자(&&)와 동일하게 작동합니다.

'Cat' || 'Dog' //'Cat'

– 첫 번째 피연산자 ‘고양이‘는 그러므로 진리값이다.

사실로 평가해. 이 시점에서 위 식은 두 번째 피연산자를 평가하지 않고 평가할 수 있습니다.

이 경우 논리 연산자는 논리 연산의 결과를 결정하는 첫 번째 피연산자그래서 문자열 ‘Cat’ 그대로 반환하다.

– 로그(&&) 및 논리합(||) 연산자는 다음과 같습니다.

논리 연산의 결과를 결정하는 피연산자는 유형 변환 없이 변경되지 않은 상태로 반환됩니다.

그만큼 약식 평가말하다 약식 평가~이다 발현 평가 중 평가 결과가 확인되면 나머지 평가 과정은 생략한다.

말한다 대부분의 프로그래밍 언어는 바로 가기 평가를 통해 논리 연산을 수행합니다.

– 약식평가는 다음과 같은 규칙을 따른다.

약식 평가식	평가 결과
참 \|\| 아무것	진실
틀렸어 \|\| 아무것	아무것
사실 && 모든 것	아무것
잘못된 && 모든 것	잘못된

// 논리합 (||) 연산자
'Cat' || 'Dog' // 'Cat'
false ||'Dog' //'Dog'
'Cat' || false // 'Cat'

// 논리곱(&&) 연산자
'Cat' && 'Dog' //'Dog'
false && 'Dog' //false
'Cat' && false //false

– 속기 평가는 if 문을 대체합니다.

할수있다.

어느 조건이 참이면 당신이 뭔가를해야한다면 논리적 곱(&&) if 문을 연산자 식으로 바꿀 수 있습니다.

var done =true;
var message="";

//주어진 조건이 true 일 때
if(done) message="완료";

//if 문은 단축 평가로 대체 가능하다.


// done이 true라면 message에 '완료'를 할당
message=done&&'완료';
console.log(message); //완료

– 조건이 거짓이면 당신이 뭔가를해야한다면 논리 OR 연산자(||). if 문을 식으로 바꿀 수 있습니다.

var message="";

//주어진 조건이 false 일 때
if(done) message="미완료";

//if 문은 단축 평가로 대체 가능하다.


// done이 false라면 message에 '미완료'를 할당
message=done||'미완료';
console.log(message); //미완료

– 참고 삼항 조건 연산자는 if…else 문을 대체합니다.

할수있다.

개체를 가리키는 변수가 null 또는 정의되지 않았는지 확인하고 속성을 참조할 때

– 개체는 키와 값으로 구성된 속성 집합입니다.

오전. 객체를 가리킬 것으로 예상되는 경우 변수 값이 null이거나 정의되지 않고 개체가 아닌 경우 개체의 속성을 참조할 때 형식 오류가 발생합니다.

하다.

var elem = null;
var value = elem.value; //TypeError : Cannot read property 'value' of null

– 이 경우 단축된 평가는 오류를 생성하지 않습니다.

var elem = null;
// elem이 null이나 undefined와 같은 Falsy 값이면 elem으로 평가되고
// elem이 Truthy 값이면 elem.value로 평가된다.


var value = elem && elem.value; // null

함수 매개변수의 기본값을 설정할 때

– 함수가 호출될 때 인수가 전달되지 않으면 매개변수가 정의되지 않은 상태로 할당됩니다.

이 경우 짧은 평가를 통해 매개변수의 기본값을 설정하면 정의되지 않음으로 인해 발생할 수 있는 오류를 방지할 수 있습니다.

//단축 평가를 사용한 매개변수의 기본값 설정
function getStringLength(str){
    str = str || '';
    return str.length;
}

getStringLength();// 0
getStringLength('hi'); // 2

//ES6의 매개변수의 기본값 설정
function getStringLength(str=""){
    return str.length;
}

getStringLength(); //0
getStringLength('hi'); // 2

2) 선택적 연결 연산자

– ES11에 도입됨 선택적 연결 연산자 ?.~이다 왼쪽 피연산자가 null이거나 정의되지 않은 경우 undefined를 반환합니다.

하다, 그렇지 않으면 올바른 속성 참조가 계속됩니다.

var elem=null;

//elem이 null 또는 undefined이면 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.


var value = elem?.value;
console.log(value); //unedfined

– 선택적 연결 연산자 ? 개체를 가리킬 것으로 예상됩니다.

변수가 null 또는 정의되지 않았는지 확인하다 속성을 참조할 때 유용합니다.

선택적 연결 연산자를 도입하기 전에 ?. 논리 연산자 &&를 사용한 이전의 짧은 평가의해 변수가 null인지 정의되지 않았는지 확인했습니다.

var elem=null;

//elem이 Falsy 값이면 elem으로 평가되고, elem이 Truthy 값이면 elem.value로 평가된다.


var value = elem&&elem.value;
console.log(value); //null

– 논리 연산자 &&는 왼쪽 피연산자가 false로 평가되는 거짓 값(false, undefined, null, 0, -0, NaN, ‘ ‘)인 경우 변경되지 않은 왼쪽 피연산자를 반환합니다.

왼쪽 피연산자가 false 값인 0 또는 ‘ ‘인 경우에도 마찬가지입니다.

그러나 0 또는 ‘ ‘는 개체로 평가되는 경우가 있습니다.

var str="";

//문자열의 길이를 참조한다.

 
var length = str && str.length;

//문자열의 길이를 참조하지 못한다.


console.log(length); // ''

– 다만 선택적 연결 연산자 ?.에서는 왼쪽 피연산자가 거짓 값(false, undefined, null, 0, -0, NaN, ‘ ‘)이더라도 null 또는 undefined가 아니면 false로 평가되며, 오른쪽 속성 참조가 계속됩니다.

3) 제로 합체 연산자

– ES11에서 도입된 null 병합 연산자 ?? 왼쪽 피연산자가 null이거나 정의되지 않은 경우 오른쪽 피연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환합니다.

널 병합 연산자 ?? 변수의 기본값을 설정하는 데 유용합니다.

        // 좌항의 피연산자가 null 또는 undefined이면 우항의 피연산자를 반환하고 , 
        // 그렇지 않으면 좌항의 피연산자를 반환한다.


        var foo = null ?? 'default string';
        console.log(foo); // 'default string'

– 널 병합 연산자 ?? 변수의 기본값을 설정하는 데 유용합니다.

널 병합 연산자 도입 전 ?? 변수는 논리 연산자 || 기본값으로 설정합니다.

논리 연산자 ||를 사용한 약식 평가의 경우 왼쪽 피연산자가 false로 평가되는 거짓 값(false, undefined, null, 0 , -0, NaN, ‘ ‘)인 경우 오른쪽 피연산자를 반환합니다.

잘못된 값 0 또는 ‘ ‘가 기본값으로 유효한 경우 예기치 않은 동작이 발생할 수 있습니다.

        //Falsy 값인 0이나 ''도 기본값으로서 유효하다면 예기치 않은 동작이 발생할 수 있다.


        var foo = '' || 'default string';
        console.log(foo); // 'default string'

– 제로 합체 연산자 ?? 그러나 왼쪽 피연산자가 false로 평가되더라도 null이 아니거나 정의되지 않은 경우 왼쪽 피연산자를 있는 그대로 반환합니다.

        // 좌항의 피연산자가 Falsy 값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 그대로 반환한다.


        var foo = ''??'defualt string';
        console.log(foo); // ''

Related Posts: