diff --git "a/\353\202\230\353\262\224\354\210\230/week2/\355\203\200\354\236\205 \353\263\200\355\231\230\352\263\274 \353\213\250\354\266\225 \355\217\211\352\260\200.md" "b/\353\202\230\353\262\224\354\210\230/week2/\355\203\200\354\236\205 \353\263\200\355\231\230\352\263\274 \353\213\250\354\266\225 \355\217\211\352\260\200.md" new file mode 100644 index 0000000..91dfadc --- /dev/null +++ "b/\353\202\230\353\262\224\354\210\230/week2/\355\203\200\354\236\205 \353\263\200\355\231\230\352\263\274 \353\213\250\354\266\225 \355\217\211\352\260\200.md" @@ -0,0 +1,151 @@ +# 타입 변환과 단축 평가 + +## 타입 변환이란? +js에 모든 값은 타입이 있다. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. +개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라 한다. + +숫자를 문자열료 변환 + + let number = 123; + let stringNumber = String(number); + console.log(stringNumber); // "123" + console.log(typeof stringNumber); // "string" + +문자를 숫자열료 변환 + + let stringNumber = "123"; + let number = Number(stringNumber); + console.log(number); // 123 + console.log(typeof number); // "number" + +타입 변환이 기존 원시 값을 직접 변경하는 것은 아니다. 원시 값은 변경 불가능한 값이므로 변경할 수 없다. +타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다. + +암묵적 타입 변환은 기존 변수 값을 재할당하여 변경하는 것이 아니다. 자바스크립트 엔진은 표현식을 에러 없이 평가하기 위해 +피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 한 번 사용하고 버린다. + +## 암묵적 타입 변환 +자바스크립트 엔진은 표현식을 평가할 때 개발자의 의도와는 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환할 때가 있다. + + "10" + 2 //"102" + 5 * "10" // 50 + !0 // true + +이처럼 코드의 문맥에 부합하지 않는 다양한 상황이 발생할 수 있다. + +### 문자열 타입으로 변환 + + 1 + "2" // "12" + +위 예제의 + 연산자는 피연산자 중 하나 이상이 문자열이므로 문자열 연결 연산자로 동작한다. +따라서 문자열 연결 연산자의 모든 피연산자는 코드의 문맥상 모두 문자열 타입이어야 한다 + +### 숫자 타입으로 변환 + + 1 - "1" // 0 + 1 * "10" // 10 + 1 / "one" //NaN + +위 예쩨에서 사용한 연산자는 모두 산술 연산자다. 산술 연산자의 역할은 숫자 값을 만드는 것이다. +산술 연산자의 모든 피연산자는 코드 문맥상 모두 숫자 타입이어야 한다. +이 때 피연산자를 숫자 타입으로 변환할 수 없는 경우는 산술 연산을 수행할 수 없으므로 평가 결과는 NaN이 된다. + +### 불리언 타입으로 변환 + + if("") console.log(x); + +if문이나 for문 같은 제어문 또는 삼항 조건 연산자의 조건식은 불리언값으로 평가되어야 하는 표현식이다. +자바스크립트 엔진은 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환 한다. + + let value = "hello"; // 문자열은 truthy 값 + + if (value) { + console.log("This is truthy."); // 이 코드가 실행됩니다. + } else { + console.log("This is falsy."); + } + + // value가 빈 문자열인 경우 + value = ""; // 빈 문자열은 falsy 값 + + if (value) { + console.log("This is truthy."); + } else { + console.log("This is falsy."); // 이 코드가 실행됩니다. + } + +## 명시적 타입 변환 + +### 문자열 타입으로 변환 +1. String생성자 함수를 new 연산자 없이 호출하는 방법 +2. Object.prototype.toString 메서드를 사용하는 바업ㅂ +3. 문자열 연결 연산자를 이용하는 방법 + +예제 + + let stringNumber = String(123); // "123" + + let number = 123; + let stringNumber = number.toString(); // "123" + + let number = 123; + let stringNumber = number + ""; // "123" + console.log(stringNumber, typeof stringNumber); // "123" "string" + +### 숫자 타입으로 변환 +숫자 타입이 아닌 값을 숫자 타입으로 변환하는 방법은 다음과 같다. +1. Number 생성자 함수를 new연산자 없이 호출하는 방법 +2. parseInt, parseFloat함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능) +3. +단항 산술 연산자를 이용하는 방법 +4. *산술 연산자를 이용하는 방법 + +예제 + + let stringNumber = "123"; + let intNumber = parseInt(stringNumber, 10); // 123 + console.log(intNumber, typeof intNumber); // 123 "number" + + let stringNumber = "123"; + let number = +stringNumber; // 123 + console.log(number, typeof number); // 123 "number" + + let stringNumber = "123"; + let number = stringNumber * 1; // 123 + console.log(number, typeof number); // 123 "number" + + +### 불리언 타입으로 변환 +1. Booelan생성자 함수를 new연산자 없이 호출하는 방법 +2. !부정 논리 연산자를 두 번 사용하는 방법 + +예제 + + let value = "hello"; + let boolean1 = Boolean(value); // false + console.log(boolean1, typeof boolean1); // false "boolean" + + let value = "hello"; + let boolean1 = !!value; // false + console.log(boolean1, typeof boolean1); // false "boolean" + +## 단축 평가 +### 논리 연산자를 사용한 단축 평가 +논리합 (||)또는 논리곱(&&)연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다. 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다. + + "cat" && "dog" //dog + "cat" || "dog" // cat + + +### 옵셔널 체이닝 연산자 +연산자?.는 좌항의 피연산자가 null또는 undefined인 경우 undefined를 반환하고 그렇지 않으면 우항의 프로퍼티 참조를 이어간다. + + + var elem = null; + var value = elem?.value; + console.log(value); / /undefined + +### null 병합 연산자 +연산자 ??는 좌항의 피연산자가 null또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다 + + var foo=null?? "default string"; + console. log(foo); //"default string"