CodeClover

자바스크립트 기본 문법 (2) 본문

Frontend

자바스크립트 기본 문법 (2)

coding dew 2025. 4. 10. 16:36

if 문과 비교 연산자  ==   vs  === 

자바스크립트에서 조건문을 작성하거나 값을 비교할 때 자주 사용되는 기본적인 문법과 연산자들이 있습니다.
if 문과 ==, === 비교 연산자에 대해 정리해보면,,,

1. if 문 사용하기

if 문은 특정 조건을 만족할 때 실행되는 코드 블록을 정의하는 데 사용됩니다. 다음과 같이 조건문을 작성할 수 있습니다.

if (조건문) {
    // 조건을 충족하면 실행되는 코드
}

if 문은 조건이 일 때만 코드 블록이 실행되며, 조건이 거짓이면 아무 일도 일어나지 않습니다. 이때 중요한 점은 if 문이 참인 조건을 만나면 그 시점에서 바로 실행을 종료하고 이후의 조건들을 확인하지 않는다는 것입니다.

조건 순서의 중요성

조건문을 작성할 때 조건들의 순서가 중요합니다. 작은 범위 → 큰 범위 순으로 조건을 배치하는 것이 좋습니다.
예를 들어보면 구체적인 조건을 먼저 체크하고, 그 이후에 더 일반적인 조건을 확인하는 방식이 효율적입니다. 이렇게 하면 불필요한 계산을 줄여 성능을 최적화할 수 있습니다.



2.  ==  ===  의 차이점

자바스크립트에서 ==와 ===는 값 비교에서 중요한 차이를 보입니다. 이 두 연산자는 어떻게 다를까요?

  •  ==   (동등 비교)
    :  ==  는 값만 비교합니다. 자바스크립트는 두 값의 자료형이 다르더라도 값을 비교하기 전에 자동으로 자료형을 변환하여 비교를 수행합니다. 즉, 자료형 변환이 자동으로 이루어집니다.
'5' == 5  // true

//'5'라는 문자열과 5라는 숫자는 서로 자료형이 다르지만, 값이 같기 때문에 true가 반환됩니다.
  •  ===  (일치 비교)
    :  ===  값과 자료형이 모두 일치할 때만 true를 반환합니다. 즉, 값뿐만 아니라 자료형도 동일해야 합니다. 이 연산자는 보다 엄격한 비교를 수행합니다.
'5' === 5  // false

//'5'는 문자열이고 5는 숫자이기 때문에 자료형이 다르고, 따라서 false가 반환됩니다.

 

최종 요약

  •  ==  : 값만 비교, 자료형 변환이 자동으로 이루어짐.
  •  ===  : 값과 자료형이 모두 같을 때만 true 반환, 더 엄격한 비교.

따라서, 자바스크립트에서 if 문과 == ,  ===  비교 연산자는 기본적인 문법으로, 이를 잘 활용하면 코드의 효율성과 정확성을 높일 수 있습니다. if 문에서는 조건을 효율적으로 배치하고, ==  === 의 차이를 명확히 이해하여 보다 안정적이고 예측 가능한 코드를 작성할 수 있습니다.