자바스크립트 익숙해지기 #2

이번 시간에는 자바스크립트에서 조건문의 기초적인 사용방법에 대해 알아보도록 하겠다.

비교 연산자

• '==': 두 개의 값이 같은지 비교하는 연산자이다. 같다면 True, 아니면 False를 반환한다.
• '!=': 두 개의 값이 같지 않은지 비교하는 연산자이다. 같다면 False, 아니면 True를 반환한다.
• '===': 두 개의 값이 같은지 뿐만이 아니라 자료형도 비교하여 같으면 True, 아니면 False를 반환한다.
• '> & <': 크기를 비교하는 연산자이다. 초과 혹은 미만을 비교한다.
• '>= & <=': 크기를 비교하는 연산자이다. 이상 혹은 이하를 비교한다.
• '!': 특정 불리언 값을 반대로 바꾸는 연산자이다. Ture는 False로, False는 True로 바꾸어 준다.
• '!!': 완전한 불리언 값이 아닌 것을 불리언으로 바꾸어 반환한다. 예를 들어 빈 문자열은 False와 같이 취급되는데 만약 빈 문자열 앞에 '!!'를 붙여주면 False가 반환되게 된다.

비교 연산자에서 '=='와 '==='는 비슷한 기능을 하지만 자료형까지 비교한다는 점에서 '==='를 조건문에서 사용하는 것이 더 권장된다고 한다.

조건문 작성

자바스크립트에서 조건문의 작성은 아래와 같다.

let isValue = "string"
let num = 1

if (isValue === "string") {
  num += 1
}
elif (isValue === "noting") {
  num -= 1
}
else {
  num *= 2
}

만약 위와 같은 조건문을 수행한다면, num의 값은 2가 될 것이다.

객체와 배열을 비교할 때 주의사항

간혹 객체 또는 배열을 비교할 상황이 있을 수 있다. 여기서는 주의해야 할 점이 있다. 아래와 같은 코드가 있다고 하자.

const person1 = {name: 'Max'}
const person2 = {name: 'Max'}

person1 == person2 // False
person1 === person2 // False

분명히 두 객체는 같은 값을 가지며, 같은 자료형을 가지고 있다. 하지만 비교 연산자를 사용하여 나온 결과는 False이다. 이는 내부의 값은 같지만 사실 두 객체는 메모리 상에서 별개의 객체로서 존재하며 내부의 값만 같기 때문이다. 아래의 예시를 하나 더 보도록 하자.

person1.value === person2.value // True

두 객체에서 값만 뽑아와서 비교하면 이는 True가 반환된다. 실제로 값은 같기 때문이다.

삼항 연산자

세 개의 피연산자를 받는 삼항 연산자의 작성법은 아래와 같다.

const name = type === "first-name" ? "Heung-min" : "Son";

name이라는 상수에 조건문을 먼저 본 이후 참일 경우 물음표 뒤 첫 번째 값을 반환하고, 거짓이면 따옴표 뒤의 값을 반환한다.

 

보통 if ~ else문의 대체제로 많이 사용되게 된다. 위에서는 조건문을 하나만 사용하였지만, 경우에 따라서 뒤에 물음표를 계속 붙여 여러 개의 조건문을 붙일 수 있지만 가독성면에서 좋지 않아 많이 사용되지 않는다고 한다.

논리 연산자

자바스크립트에서 논리 연산자와 비교 연산자가 어떻게 작동하는지를 이해하면 이를 응용할 수 있다. 아래 코드는 내가 학습하고 있는 강의에서 긁어온 코드이다.

const userName = 'Max';
const altName = '';
console.log(userName === 'Max'); // 불리언 값 참을 생성하고 출력
console.log(userName); // 문자열 'Max'에서 변경되지 않음
 
console.log(userName || null); // userName이 Truthy이므로 ||로 'Max'가 반환됨
console.log(altName || 'Max'); // altName은 (빈 문자열이므로)Falsy이며 'Max'가 반환됨
console.log(altName || ''); // altName과 ''는 모두 Falsy이지만 만일 첫 피연산자가 Falsy라면 항상 두 번째 피연산자가 반환되므로 ''이 반환됨
 
console.log(altName || null || 'Anna'); // altName과 null은 Falsy이므로 'Anna'가 반환됨
 
console.log(userName && 'Anna'); // userName은 Truthy이므로 두 번째 (!) 값인 'Anna'가 반환됨
console.log(altName && 'Anna'); // altName은 Falsy이므로 첫 번째 값인 ''이 반환됨
console.log(userName && ''); // userName은 Truthy이므로 두 번째 값인 ''이 반환됨

"Switch-Case"

자바스크립트에서는 if 조건문 외에 특정 조건을 만족하는 값을 반환하는 "Switch-Case"문을 지원한다.

const realValue = 2;

const value1 = 1;
const value2 = 2;
const value3 = 3;

switch (realValue) {
  case value1: // realValue값이 value1과 같다면 수행
    alert("catch");
    break;
  case value2: // realValue값이 value2과 같다면 수행
    alert("catch");
    break;
  case value3: // realValue값이 value3과 같다면 수행
    alert("catch");
    break;
  default: // 어떤 케이스에도 맞지 않다면 실행
    alert("nothing");
}

위와 같이 if문 대신에 특정 값들의 동치를 비교해서 조건에 부합할 경우 모달 창을 띄우는 코드를 간단하게 만들어 보았다.

 

"Switch-Case"를 사용할 때 주의해야 할 점은 위와 같이 각 케이스를 마친 후 break가 없다면 그 이후에 있는 케이스도 모두 비교 작업을 하게 되니 만약 모든 경우를 다 볼 것이 아니라면 동치가 된 시점에 멈추도록 break를 써주어야 한다.

 

그리고 위에서는 동치 비교를 위해 사용하였지만 크거나 작음을 비교하는 용도로도 사용될 수 있다. 하지만 해당 조건에 대해 따지거나 조건이 복잡해지는 경우에는 if 조건문을 사용하는 것이 권장된다고 한다.