[멋쟁이사자처럼 - 프론트엔드 스쿨 TIL] JavaScript(4)

Today I Learn : 2024-05-31

참고 ) https://ko.javascript.info/comparison

비교 연산자

* 비교연산자

• a > b : a가 b보다 크다.
• a < b : a가 b보다 작다.
• a >= b : a가 b보다 크거나 같다.
• a <= b : a가 b보다 작거나 같다.
• a == b : a와 b가 같다(동등).
• a != b : a와 b가 같지 않다(부등).

참고 )
① a = b 와 같이 등호가 하나일 때는 할당을 의미한다.
② 비교연산은 true / false 둘 중 하나만 반환된다.

---

* 불린형 반환

- 비교연산자는 true / false 둘 중 하나만 반환된다.

- 반환 값은 불린형이다.

• true 반환 : 참, 긍정
• false 반환 : 거짓, 부정

---

* 문자열 비교

- 자바스크립트는 유니코드 순으로 문자열을 비교한다.

---

* 다른 형을 가진 값 간의 비교 ⭐⭐⭐⭐⭐

- 비교하려는 값의 자료형이 다르면 자바스크립트는 이 값들을 숫자형으로 바꾼다.

***** 다른 형을 가진 값 간의 비교 *****

'2' (숫자 형변환) > 1; > true

'01' (숫자가 바뀌면 1이되어서) == 1; > true

true == 1 > true

false == 0 > false

---

* 일치 연산자

일치연산자 ( 완벽하게 일치하냐고 물어봄, === )

동등연산자는 0과 false를 구분하지 못하기 때문에 일치연산자를 많이 사용함

 

일치연산자는 형 변환 없이 값을 비교할 수 있다.

ex) 0 === false; > false

---

* null과 undefined 비교

- undefined 는 null을 제외한 모든 값을 비교하면 false가 나옴

---

validation : 만약 변수가 undefined나 null이 될 가능서이 있다고 판단하면 이를 따로 처리하는 코드를 추가한다

ex) if문으로 한다.

단일대상으로 할 땐 삼항식이 더 낫다

function render(node,isActive){
  
  let template = `
    <div>${isActive ? '안녕~~!!' : '잘가~~!!'}</div>
  `
  node.insertAdjacentHTML('beforeend',template);
}

${} 안에는 if문은 안됨 why? 문이 오면 안되고 식이 와야되기 때문

 

 

---

* 조건문 (condition)

- 조건에 따라 다른 행동을 취해야 할 때 조건문을 사용한다.

① if문

- if문을 쓸 때는 조건이 참일 경우 실행되는 구문이 한 줄이여도 중괄호( { } )를 사용해 코드를 블록으로 감싸야 된다.

- 코드 가독성이 증가되기 때문

let year = 2024;

if (year == 2024) {
  console.log("참입니다.");
}

(1) 불린형으로 반환

- if (...) 문은 괄호 안의 표현식을 평가하고 그 결과를 불린값으로 반환한다.

• truthy(참 같은) : 불린형으로 반환시 true가 되는 값
• falsy(거짓 같은) : 불린형으로 반환 시 false가 되는 값 (숫자 0, 빈문자 " ", null, undefined, NaN)

(2) else 절

- if 문에 else 절을 붙일 수 있다.

- else 뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행된다.

 

(3) else if 로 복수 조건 처리하기

- 조건을 여러 개 처리해야 할 때 사용한다.

 

(4) 조건부 연산자 '?' (삼항연산자)

- 조건 ? 참 : 거짓

- 다중으로 사용 가능

---

* 논리연산자

- 연산자는 피연산자로 불린형뿐만 아니라 모든 타입의 값을 받을 수 있다.

- 연간결과도 모든 타입이 될 수 있다

① || (OR)

- 인수 중 하나라도 true면 true를 반환, 그렇지 않으면 false를 반환

- 피연산자가 모두 false인 경우를 제외하고 연산 결과는 항상 true

- 피연산자가 불린형이 아니면, 평가를 위해 불린형으로 반환된다.

② && (AND)

- 두 피 연산자가 모두 참일 떄 true를 반환한다.

③ ! (NOT)

- 논리 부정 연산자

- 느낌표( ! )를 앞에 붙여서 만든다.

---