자바스크립트를 사용하면서 진짜ㅋㅋ 어이가 없는 경우가 자주 나타나고 있다.
그 중 하나가 연산자인데 정리해보려 한다.
이항 연산자 '+'와 문자열 연결
덧셈연산자 +는 보통 숫자를 더한 결과를 반환하는데,
이항 연산자 +의 피연산자로 문자열이 전달되면 덧셈 연산자는 덧셈이 아닌 문자열을 병합해버린다. (대체 왜...)
let s = "my" + "string";
console.log(s); // mystring따라서 이항 연산자 +를 사용할때는 피연산자 중 하나가 문자열이면 다른 하나도 문자열로 변환된다는것!
console.log("1" + 2); // "12"
console.log(2 + "1"); // "21"첫번째 피연산자가 문자열인지, 두번쨰 피연산자가 문자열인지는 중요치 않고, 2개의 피연산자 중 어느 하나가 문자열이면 다른 하나도 문자열로 변환된다는 것이다~
좀 더 복잡한 예시를 살펴보면
console.log(2 + 2 + "1"); //"221"이 아니라 "41"이 출력됨연산은 왼쪽에서 오른쪽으로 순차적으로 진행이 되어서 이런 결과가 나오는건데,
2 + 2가 먼저 연산이 되고 4 + "1"이 되면서 "41"이 나오는 결과다.
그럼 뺄셈-과 나눗셈 / 연산자는 어떻게 될까?
console.log(6 - "2"); // 4, "2"를 숫자로 바꾼 후 연산이 이뤄짐
console.log("6" / "2"); //3, 두개의 피연산자가 숫자로 바뀐 후 연산이 진행됨(이래서 타입스크립트 타입스크립트 노래를 부르는 것 같음)
단항 연산자 +와 숫자형으로의 변환
덧셈 연산자+는 이항 연산자뿐만 아니라 단항 연산자로도 사용할 수 있다.
숫자에 단항 덧셈 연산자를 붙이면 이 연산은 아무런 동작도 하지 않으나, 피연산자가 숫자가 아니라면 이야기다 달라진다!
// 숫자에는 아무런 영향을 미치지 않습니다.
let x = 1;
alert( +x ); // 1
let y = -2;
alert( +y ); // -2
// 숫자형이 아닌 피연산자는 숫자형으로 변화합니다.
alert( +true ); // 1
alert( +"" ); // 0Number(...)를 이용해 캐스팅하는것과 동일한 일을 해준다는 것임. 이건 좀 쩌는듯.
그래서 이항 덧셈 연산자를 사용하면 아래와 같이 string을 number로 캐스팅한 후 연산을 할 수 있게 해준다.
let apples = "2";
let oranges = "3";
alert( apples + oranges ); // 23, 이항 덧셈 연산자는 문자열을 연결합니다.
let apples = "2";
let oranges = "3";
// 이항 덧셈 연산자가 적용되기 전에, 두 피연산자는 숫자형으로 변화합니다.
alert( +apples + +oranges ); // 5번외 &&와 ||
난 처음에 이것도 세상 어이가 없었다 ㅋㅋ
무슨 비트연산 하는 기분이 들었다랄까?
자바스크립트에는 Truthy, Falsey라는게 있다, 참 같은 값, 거짓 같은 값 ㅎㅎ
이들은 논리연산에서 true, false로 평가되는 값들을 말하는데 Truthy값은 Falsey를 제외한 모든값을 말한다.
따라서 Falsey값들을 알아봐야한다.
null, undefined, false, NaN, 0, -0, 0n, "", document.all
이렇게 있는데, document.all을 논리연산하면서 사용할 일은 없을거같다.
(아니 그리고 여기서 좀 킹받는게 [] 빈 배열은 Falsey가 아니네?)
자 그럼 뭐가 어이가 없었냐?
"dog" && "true" && 42 && "" && true && false 이것과 "dog" || "true" || 42 || "" || true || false의 결과가 어찌될까?
먼저 "dog" && "true" && 42 && "" && true && false의 결과는 "" 빈 문자열이 나온다.
그리고 "dog" || "true" || 42 || "" || true || false의 결과는 "dog"이 나온다.
왜 이런 결과가 나오느냐? && 연산자를 사용하게 되면 좌 -> 우 방향으로 Falsey한 값을 찾는다(없다면 마지막 값이 나오겠지?)
따라서 빈 문자열인 ""이 Falsey한 값 이므로 해당값이 결과값으로 나오게 된다.
그럼 ||연산은 어떨까? 예상하는것 처럼 &&연산과 반대로 Truthy한 값을 좌 -> 우 방향으로 찾는다.
이거는 나중에 요긴하게 잘 써먹을 수 있을것 같다.
참고
