javascript 연산[0803]

이번 시간에는 javascript의 연산엔 대해서 알아보겠습니다.

먼저 JAVA와 비슷하게 연산기호들이 있습니다

>,<,<=,>=, == 등등 여러가지가 있습니다.

하지만 JAVA와 다른 기호가 하나 있는데 그것은 바로 === 이라는 strict equal이 존재하는데 이것은 추후에 다시 알아 보겠습니다.

 

먼저 문자와 문자간의 비교에서는 사전식 순서에 맞게 크기를 비교합니다.

 

 

문자 크기 비교

또한 문자안에 내용이 숫자라면 비교연산도 숫자로 바꾸어서 처리하게 됩니다.

문자 숫자 비교

그리고 boolean값을 비교하는것도 있는데 여기서 한가지 이상한게 보입니다.

먼저 아래 사진을 보겠습니다.

boolean

a라는 변수에 숫자 0을 넣었고 b라는 변수에 문자값인 '0'을 넣었습니다.

그리고 나서 Boolaen 값으로 출력을 해보니

console.log(Boolean(a)) -> false는 0의 값을 가지고 있으므로 false가 나오고

console.log(Boolean(b)) -> 문자값이 '' 같이 비어있어야지만 false가 되므로 true입니다.

 

하지만 아래에서 a와 b라는 변수를 비교했을때 값은 true가 나옵니다.

어째서일까요?

그것은 문자'0'를 숫자 0으로 바꾸어서 비교를 하기 때문입니다.

*아마 숫자로 연산하는것이 우선순위가 있지않나 생각이 듭니다.

 

그리고 주의해야 할점이 undefined 와 null을 ==로 비교했을때 true가 나오지만 ===로 비교했을땐 false가 나옵니다.

undefined -- null

 

---

자, 이젠 아까 말하다 말았던 ===를 살펴보겠습니다.(strict -> 엄격한 이라는 뜻)

먼저 ==는 자동으로 형변환을 해주고 비교를 합니다.

숫자가 우선순위

하지만 ===은 자동형변환을 해주지 않고 비교를 합니다.

strict equals

즉 타입과 값까지도 같아야 true가 나오게 되는것이죠

잘하는 사람들은 ==를 잘 쓴다고 하는데

처음 자바스크립트를 배우는 사람들은 strict equal을 사용하는게 더 나을 것 같습니다.

전 거의 무조건 이거만 쓸것 같습니다 ㅋㅋ

---

그 다음 으로는 분기문을 살펴보겠습니다.

자바와 비슷하게 분기문에 if문과 else if문같은게 있어서 이것은 그닥 다루지 않고 넘어가겠습니다.

하지만 한가지 짚고 넘어가야 할것은 자바스크립트에서는

"", 0 , undefined, null, NaN 의 값들은 false가 된다는 점을 항상 기억하고 있어야 합니다.

 

또한 삼항연산자도 깊게 다루지 않고 넘어가겠습니다.

삼항 연산자도 다중으로 쓸 수가 있는데 그럴때 코드의 가독성이 많이 떨어집니다.

그래서 쓸수있을때만 사용하는것이 바람직합니다.

하지만 굳이 써야한다면 가독성이 좋아보이게끔 아래 사진 처럼 작성을 하는것을 추천합니다.

삼항연산

 

---

논리 연산자

일반적인 논리연산자는 아래 사진과 같이 작동합니다

일반적인 프로그래밍 논리연산자

하지만 자바스크립트에서는 좀 다른점이 있습니다

무엇이 다른 점이냐 하면

자바스크립트 논리연산자

바로 이렇게 됩니다 어떠한 차이가 있어서 저러한 값이 나오는가? 하면

이유 사진

이런 이유 때문에 되는 겁니다.

왼쪽항의 뭐냐에 따라서 왼쪽항을 반환할지 오른쪽 항을 반환할지를 검사하는 것입니다.

어떻게보면 true/false로 생각하는것보다 저렇게 생각하는게 나을 수도 있을 것 같습니다.

 

위에서는 or 연산자를 살펴봤지만 이번엔 and 연산자를 살펴보겠습니다.

or 연산자와 비슷하기한데 다른점은 false가 나오면 false로 판별한다고 보면 됩니다.

둘중에 하나 이상이 false라면 false값이 되는 것이죠

이것도 똑같이 왼쪽에서 오른쪽으로 보시면 됩니다.

그리고 논리곱 과 논리합중에서 우선순서는 && > || 입니다.

자바스크립트 논리곱

자바스크립트에서의 논리곱은

왼쪽항이 true로 판별된다면 오른쪽 항을 반환하고

왼쪽항이 false로 판별 된다면 그대로 그자리에서 왼쪽항을 즉시 반환 합니다

 

---

부정 연산자(!)

일반적인 부정연산자(!)는 논리값을 반대로 해주는 것입니다.

하지만 자바스크립트에는 !! 라는 부정연산자가 있습니다.

부정연산자!

이것은 되게 간단한데 !!을 두번쓰게되면 변수의 논리값을 추출할 수 있습니다.

많이 쓰이지는 않지만 만얀에 위 사진처럼 해당 변수의 논리값을 추출하고 싶을때에 사용하면 편리할 것 같습니다.

예를들어 긴 코드의 경우?

---

 

판봉의 오늘의 평

 

1. undefined와 null을 ==로 비교했을때는 숫자형으로 변환이 되어서 true가 나온다
2. undefined는 0과 비교했을때 다 false값을 가짐
3. ''같이 빈 문자열은 false를 가짐 문자열이 채워져있다면 true가 됨
4. 단 따옴표와 쌍따옴표를 썼을때 오류가 난다면 백슬래시(\)를 넣으면 해결이 됩니다.
5. 유의 할점이 조건식에 들어가는 값이 true인지 false인지를 판별하는 것이 중요합니다.
6. strict equal을 많이 사용하는게 좋을 것 같다.
7. 자바스크립트의 논리연산은 다른 점 을 주목