Notice
Recent Posts
Recent Comments
Link
CodeClover
자바스크립트 기본 문법 (2) 본문
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 문에서는 조건을 효율적으로 배치하고, == 와 === 의 차이를 명확히 이해하여 보다 안정적이고 예측 가능한 코드를 작성할 수 있습니다.
'Frontend' 카테고리의 다른 글
| onclick vs <a> 태그 – 링크 이동, 어떤 방식이 더 좋을까? (1) | 2025.05.08 |
|---|---|
| create-react-app 지원 종료 (0) | 2025.04.02 |
| [HTML] audio태그 (1) | 2025.01.05 |
| [HTML] table태그 정리 ( th / td / tr ) (2) | 2025.01.05 |
| npm install error ENOENT(리액트 npm start error) (1) | 2024.08.13 |