정보실

웹학교

정보실

javascript 제 7 장 JavaScript에서의 타입, 변환 및 비교

본문

JavaScript의 기본 유형 


이 책의 시작 부분에서 우리는 문자열과 숫자와 같은 JavaScript의 기본 단위 중 일부를 보았습니다.


var greet = "Hello";
var year = 89;


문자열과 숫자는 언어의 소위 "유형"의 일부이며 "기본형"이라고도 합니다 (자체 유형 인 Object 제외). 다시 한 번 전체 목록은 다음과 같습니다.


  • String
  • Number
  • Boolean
  • Null
  • Undefined
  • Object
  • Symbol

부울은 true 또는 false 일 수 있는 값을 나타냅니다. 반면에 null은 의도적으로 값이 없는 것입니다. 때로는 나중에 채워질 푯말을 표시하기 위해 null이 변수에 할당됩니다.


var maybe = null;


빈 값을 말하면 undefined 변수도 변수에 아직 아무것도 첨부되어 있지 않습니다.


var name;
console.log(name) // undefined


null과 undefined는 매우 비슷해 보이므로 대부분의 개발자는 어느 것을 사용해야 할지 확실하지 않습니다. 그러나 그들은 두 개의 별개의 실체입니다. undefined는 JavaScript의 모든 곳에서, 즉 엔진이 코드를 실행할 때 항상 undefined 값으로 시작됩니다.


JavaScript 엔티티의 유형을 찾으려면 typeof 연산자를 사용할 수 있습니다. 문자열로 시도해 봅시다 :


typeof "alex" // "string"


number와 함께 :


typeof 9 // "number"


부울과 함께 :


typeof false // "boolean"


undefined 경우 :


typeof undefined // "undefined"


그리고 null :


typeof null // "object"


그것은 우리에게 놀라운 결과를 제공합니다! null은 객체처럼 보이지만 실제로는 언어가 태어난 이후로 JavaScript에 있는 역사적인 버그입니다. 자바 스크립트는 이런 이유로 항상 나쁜 평판을 받았습니다. 그리고 그것은 시작에 불과합니다. 한 유형과 다른 유형으로 변환하는 이상한 규칙이 있습니다. 약간의 맥락을 알려 드리겠습니다. 파이썬으로 예제를 만들어 봅시다. 파이썬에서 다음 명령 :


'hello' + 89


명확한 오류를 제공합니다.


TypeError: can only concatenate str (not "int") to str

자바 스크립트에서는 하늘 만 한계입니다. 다음 코드 :


'hello' + 89


실제로 다음을 제공합니다.


"hello89"


배열을 문자열에 추가하려고 하면 상황이 더욱 이상해집니다. 다음 코드 :


"hello" + []


제공합니다 :


"hello"


그리고


"hello" + [89]


놀랍게도 결과는 다음과 같습니다.


"hello89"


이 전환 뒤에 어떤 논리가있는 것 같습니다. 더 복잡한 어레이에서도 작동합니다. 다음 코드 :


"hello" + [89, 150.156, "mike"]


결과는


"hello89,150.156,mike"


이 두 줄의 JavaScript로 Java 개발자를 도망 칠 수 있습니다. 그러나 JavaScript에서 이 동작은 의도적으로 100 %입니다. 따라서 JavaScript에서 암시적 변환의 가장 눈에 띄는 사례를 탐색할 가치가 있으며 유형 강제라고도 합니다.


숫자가 문자열이 될 때 


대부분의 프로그래밍 언어에는 유형 캐스팅이라는 개념이 있습니다. 엔티티를 다른 유형으로 변환하려면 변환을 명확하게 만들어야 합니다. JavaScript에서도 가능합니다. 다음 예를 고려하십시오.


var greet = "Hello";
var year = 89;


명시적으로 변환하려면 toString()을 사용하여 코드에서 의도를 알릴 수 있습니다.


var greet = "Hello";
var year = 89;
var yearString = year.toString();


또는 문자열 :


var greet = "Hello";
var year = 89;
var yearString = String(year);


문자열은 일부 기본 유형 (문자열, 숫자, 부울 및 객체)을 반영하는 소위 내장 JavaScript 객체의 일부입니다. 이러한 내장 기능을 사용하여 유형을 변환 할 수 있습니다. 변환 후 두 변수를 연결할 수 있습니다.


greet + yearString;


이 명시적 변환 외에도 JavaScript에는 JavaScript 엔진이 친절하게 제공하는 암시적 변환이라는 미묘한 메커니즘이 있습니다. 이 언어는 우리가 보듯이 숫자와 문자열을 추가하는 것을 막지 않습니다.


"hello" + 89 // "hello89"


전환의 이유는 무엇입니까? JavaScript에서 더하기 연산자 +는 두 피연산자 중 하나 이상이 문자열인 경우 문자열로 변환합니다! 그리고 이 규칙이 ECMAScript 사양에 구체적으로 설정되어 있다는 사실은 더욱 놀라운 사실입니다. 11.6.1 절은 여러분을 위해 여기에 요약 할 추가 연산자의 동작을 정의합니다 :


The addition operator (+)

If x is String or y is String then return ToString(x) followed by ToString(y)


이 트릭은 숫자에서만 작동합니까? 실제로는 아닙니다. 배열과 객체는 같은 운명에 처해 있습니다.


"hello" + [89, 150.156, "mike"] 
// "hello89,150.156,mike"


그리고 어떻습니까 :


"hello" + { name: "caty" }


솔루션을 찾으려면 객체를 문자열로 변환하여 빠른 테스트를 수행 할 수 있습니다.


String({ name: "caty" })


이것은 다음을 제공합니다.


"[object Object]"


그래서 나는 느낌이 있습니다.


'hello' + { name: "caty" }


결과는


"hello[object Object]"


곱셈, 나눗셈, 뺄셈은 어떻게 됩니까?


나는 number가 아니다! 


덧셈 연산자가 피연산자 중 하나 이상이 문자열 일 때 문자열로 변환하는 방법을 보았습니다. 그러나 다른 산술 연산자는 어떻게 됩니까? 숫자가 아닌 유형에 대해 (+ 제외) 중 하나를 사용하면 NaN이라는 특수한 종류의 JavaScript 객체가 생성됩니다.


89 ** "alex" // NaN


NaN은 "number가 아님"을 나타내며 다음 코드와 같이 실패한 산술 연산을 나타냅니다.


var obj = { name: "Caty" } % 508897


이것은 다음을 제공합니다.


console.log(obj) // NaN


NaN과 함께 typeof에 주의하십시오. 이 코드는 좋아 보입니다 :


typeof 9 / "alex" // NaN


그러나 다음은 어떻습니까?


var strange = 9 / "alex"
typeof strange // "number"


변수에 할당되면 NaN이 number가 됩니다. 이것은 새로운 질문을 열어줍니다. 일부 변수가 NaN인지 여부를 어떻게 확인할 수 있습니까? Number.isNaN() 메소드가 있습니다 :


var strange = 9 / "alex"
Number.isNaN(strange) // true


이제 산술적으로 대응하는 JavaScript 비교 연산자에 주목해 보세요.


같거나 같지 않습니까? 


JavaScript에는 두 가지 주요 비교 연산자 제품군이 있습니다. 먼저 우리는 "약한 비교"라고 부르는 것을 가지고 있습니다. 그것은 추상 비교 연산자입니다 (double equal) : ==. 그런 다음 트리플 등식에서 확인할 수 있는 "강력한 비교"가 있습니다. === 엄격한 비교 연산자라고도 합니다. 몇 가지 예를 봅시다. 두 문자열을 두 연산자와 비교하면 일관된 결과를 얻을 수 있습니다.


"hello" == "hello" // true
"hello" === "hello" // true


모든 게 좋아 보입니다. 이제 숫자와 문자열의 두 가지 유형을 비교해 봅시다. 먼저 "강력한 비교"로 :


"1" === 1 // false


맞는 말입니다! 문자열 "1"은 숫자 1과 다릅니다. 그러나 "약한 비교"는 어떻게 됩니까?


"1" == 1 // true


참된! JavaScript는 두 값이 같다고 말합니다. 이제 말이 되지 않습니다. 이 동작이 앞에서 본 암시적 변환과 관련이 없는 한. 동일한 규칙이 적용되면 어떻게 됩니까? 빙고. ECMAScript 스펙이 다시 발생합니다. 추상 비교 연산자는 유형을 비교하기 전에 유형 간 자동 변환을 수행합니다. 이것은 추상입니다 :


Abstract Equality Comparison Algorithm

The comparison x == y is performed as follows: if x is String and y is Number return the result of the comparison ToNumber(x) == y


스펙은 첫 번째 피연산자가 문자열이고 두 번째 피연산자가 숫자이면 첫 번째 피연산자를 숫자로 변환합니다.  JavaScript 사양에는 이러한 이상한 규칙이 포함되어 있으므로 더 깊이 파고 드는 것이 좋습니다. 반대의 이유가 없다면 JavaScript 코드에서 추상 비교 연산자를 사용하지 마십시오. 나중에 스스로에게 감사 할 것입니다. "강한 비교"는 어떻습니까? Strict Equality Comparison의 사양에 따르면 값을 트리플 ===과 비교하기 전에 자동 변환이 수행되지 않습니다. 코드에서 Strict Equality Comparison을 사용하면 바보 같은 버그를 피할 수 있습니다.


그것이 소위 "강압"에 대한 것입니다. 나는 당신에게 모든 미친 사건을 귀찮게 하지 않을 것입니다. 온라인에는 이미 거대한 문헌이 있습니다. 결국 이것은 "little JavaScript book"입니다.


기본 요소와 객체 


JavaScript의 유형 이름은 모두 대문자로 표시됩니다 (String, Number, Boolean, Null, Undefined, Object 및 Symbol). 이 스타일은 ECMAScript 사양에서도 나타나며 유형에 "트위스트"(소위 내장 객체)가 있음을 발견하는 것은 놀라운 일입니다. 예를 들어, String 프리미티브에는 두 가지 방식으로 사용되는 동등한 String이 있습니다. 함수처럼 호출되면 (인수를 전달하여) 모든 값을 String로 변환합니다.


var someValue = 555;
String(someValue); // "555"


대신 new를 사용하여 생성자로 호출하면 결과는 문자열 유형의 객체입니다.


var someValue = 555;
var newString = new String(someValue);


"일반"문자열과 다른 점을 확인하기 위해 콘솔에서 개체를 검사하는 것이 좋습니다.


JavaScript String Object 


typeof를 사용하여 실제로 객체인지 확인할 수도 있습니다.


typeof newString // "object"


프리미티브 유형의 다른 "미러"는 숫자로, 거의 모든 값을 숫자로 변환 할 수 있습니다.


var someValue = "555";
Number(someValue); // 555;


나는 잘못된 "숫자"를 변환 하려고 할 때 NaN을 얻었기 때문에 거의 말했습니다.


var notValidNumber = "aa555";
Number(notValidNumber); // NaN;


대신 생성자 양식에서 Number를 사용하면 number 유형의 새 객체가 반환 됩니다.


var someValue = "555";
new Number(someValue); // Number {555}


부울 내장 기능은 동일하게 작동하며 함수로 사용될 때 모든 값을 부울로 변환 할 수 있습니다.


var convertMe = 'alex';
Boolean(convertMe); // true


생성자는 대신 객체를 반환합니다 (놀랍습니다!) :


var convertMe = 'alex';
typeof new Boolean(convertMe) // "object"


객체는 예외가 없습니다. 적절한 인수로 호출되면 주어진 유형의 객체를 반환합니다.


Object("hello"); // String {"hello"}
Object(1); // Number{1}


대신 인수 없이 호출되면 빈 객체를 반환합니다.


Object() // {}


Object를 생성자로 호출하면 결과는 새로운 객체입니다.


new Object({
  name: "Alex",
  age: 33
});

{name: "Alex", age: 33}


이 시점에서 다음과 같이 질문 할 수 있습니다. 새 값을 "구성"하기 위해 내장 객체를 사용해야 합니까? 일반적으로 간단한 값이 필요할 때 생성자 호출을 피하십시오.


// AVOID
var bool = new Boolean("alex");
var str = new String("hi");
var num = new Number(33);
var strObj = new Object("hello");


JavaScript 엔진은 요즘이 형식을 최적화 하지 않기 때문에 시끄럽고 성능이 저하됩니다. 리터럴 형식으로 더 잘 제공됩니다.


// OK
var bool = true
var str = 'hi';
var num = 33;
var obj = {
            name: "Alex",
            age: 33
          };


Boolean, String 및 Number를 대신 사용하는 것이 유형과 유형을 서로 변환하는 것입니다.


// OK FOR CONVERTING
var boolFromString = Boolean("alex");
var numFromString = Number("22");


그렇게 하면 코드를 더욱 표현할 수 있습니다.


결론 


JavaScript에는 String, Number, Boolean, Null, Undefined, Object 및 Symbol의 7 가지 빌딩 블록이 있습니다. JavaScript 개발자는 산술 및 비교 연산자를 사용하여 이러한 유형을 조작 할 수 있습니다.

그러나 덧셈 연산자 +와 추상 비교 연산자 ==에 주의를 기울여야 합니다.

JavaScript에서 이러한 암시적 변환을 유형 강제 변환이라고 하며 ECMAScript 사양에 정의되어 있습니다. 코드에서 가능할 때마다 == 대신 항상 엄격한 비교 연산자 ===를 사용하십시오. 가장 좋은 방법은 항상 한 유형과 다른 유형으로 변환 할 때 명확해야 합니다.

이를 위해 JavaScript에는 기본 유형인 String, Number, Boolean을 미러링 하는 많은 내장 객체가 있습니다. 내장을 사용하여 다른 유형 간에 명시적으로 변환 할 수 있습니다.



페이지 정보

조회 49회 ]  작성일19-10-18 09:40

웹학교