💻 제어문
💡 조건문
조건문은 다른 언어들과 같이 if, else if, else문, switch문이 있다.
그리고 내가 제일 많이 사용하는 삼항연산자가 있다.
대부분의 if...else문은 삼항연산자로 대체할 수 있기 떄문에 되게 자주 사용한다.
형태는 조건 ? true인 경우 : false인 경우로 사용할 수 있다.
근데 너무 많은 내용을 삼항연산자로 하면 헷갈리기 때문에 상황에 맞춰 잘 사용해야 한다.
나머지는 다른 언어와 똑같기 때문에 생략...
💻 타입 변환
자바스크립트의 모든 값은 타입이 있다.
- 개발자가 의도적으로 값의 타입을 변경하는 명시적 타입 변환 또는 타입 캐스팅
- 개발자의 의도와는 상관 없이 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는 암묵적 타입 변환 또는 타입 강제 변환
📌 명시적 타입 변환이나 암묵적 타입 변환은 상황에 따라 알맞게 사용 해야 가독성 측면에서 좋기 때문에 타입변환이 어떻게 동작하는지 정확히 이해하고 사용해야한다.
💡 암묵적 타입 변환
암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입중 하나로 타입을 자동 변환한다.
문자열 타입으로 변환
문자열 연결 연산자( '+' ) 사용
0 + '' // "0"
true + '' // "true"
null + '' // "null"
undefined + '' // "undefined"
(Symbol()) + '' // TypeError
({}) + '' // "[object Object]"숫자 타입으로 변환
산술 연산자( '-', '*', '/') 사용
+'' // 0
+'string' // NaN
+true // 1
+null // 0
+Symbol() // TypeError
+[] // 0
+{} // NaN
'1' > 0 // true📌 비교연산자는 피연산자의 크기를 비교하므로 피연산자를 숫자 타입으로 암묵적으로 타입 변환한다.
불리언 타입으로 변환
if 문이나 for 문과 같은 제어문 또는 삼항 조건 연산자의 조건식은 불리언 값으로 평가 되어야 하기 때문에 평가 결과를 암묵적으로 타입 변환한다.
📌 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값) 으로 구분한다.
Falsy 값
false, undefined, null, 0 , -0, NaN, ''(빈 문자열)
Falsy 값 이외의 모든 값은 모두 Truthy 값이다
💡 명시적 타입 변환
개발자의 의도에 따라 타입을 변경하는 방법은 표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출하는 방법, 빌트인 메서드를 사용하는 방법, 암묵적 타입 변환을 이용하는 방법이 있다
문자열 타입으로 변환
String 생성자 함수를 new 연산자 없이 호출하는 방법
String(1); // "1"
String(true); // "true"Object.prototype.toString 메서드를 사용하는 방법
(1).toString(); // "1"
(true).toString(); // "true"문자열 연결 연산자를 이용하는 방법
1 + ''; // "1"
true + ''; // "true"숫자 타입으로 변환
Number 생성자 함수를 new 연산자 없이 호출하는 방법
Number('1'); // 1
Number('true'); // 1parseInt, parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능)
parseInt('1'); // 1
parseInt('10.43'); // 10.43'+' 단항 산술 연산자를 이용하는 방법
+'0'; // 0
+true; // 1'*' 산술 연산자를 이용하는 방법
'0' * 1; // 0
true * 1; // 1불리언 타입으로 변환
Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
Boolean('x'); // true
Boolean(0); // false
Boolean(null); // false
Boolean({}); // true! 부정 논리 연산자를 두번 사용하는 방법
!!'x'; // true
!!0; // false
!!null; // false
!!{}; // true💡단축 평가
논리 연산자의 결과가 불리언 값이 아닐수 있다.
논리 연산자를 사용한 단축 평가
'Cat' && 'Dog' // "Dog"논리곱( && ) 연산자는 첫번째 연산자가 Truthy한 값이면 두번째 피연산자를 반환하고 Falsy한 값이면 첫번째 피연산자를 반환한다
'Cat' || 'Dog' // "Cat"논리합( || ) 연산자는 첫번째 연산자가 Truthy한 값이면 첫번째 피연산자를 반환하고 Falsy한 값이면 두번째 피연산자를 반환한다
📌 단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.
옵셔널 체이닝 연산자
ES11 에서 도입된 옵셔널 체이닝 연산자 ?. 는 좌항의 연산자가 null 또는 undefined인 경우 undefined를 반환하고 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
var elem = null;
var value = elem?.value;
console.log(value)l // undefined📌 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할때 유용하다.
null 병합 연산자
ES11에서 도입된 null 병합 연산자 ?? 는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.
var foo = null ?? 'default string'
consolt.log(foo) // "defalt string"📌 null 병합 연산자를 변수에 기본값을 설정할 때 유용하다.
🤷♂️ 타입변환에 대한 내생각
우선 타입변환이라는것 자체가 잘만 사용하면 좋지만 버그를 발생시키기에 너무 좋은 기능이다.
이런 자바스크립트의 유연성으로 인해 버그가 발생하기 때문에 타입스크립트가 생겨났다고 생각한다.
❗️ 물론 알고리즘을 풀때는 타입변환을 사용해야 한다.
나는 프로젝트를 할 때는 최대한 타입변환 없이 코드를 짜려고 노력하고 있다.
그래도 이러한 내용을 알아놔야 내가 생각하지 못한 타입변환에 대해 대처를 할 수 있기 떄문에 잘 알아놔야 한다고 생각한다.
