[JS] 조건문 (if, if..else, 논리연산자, 비교연산자)

조건문은 간단하게 말해 어떠한 조건이 성립되는 경우에 로직을 실행시키고, 성립이 되지 않는 경우 해당 로직을 건너뛰는 기능을 한다. 조건의 성립여부를 알기위해 우리는 비교연산자에 대해 알아야한다

 

비교연산자

: 자바스크립트의 데이터를 서로 비교해 boolean 값으로 반환해준다

- 비교연산자에는 느슨한 비교연산자, 엄격한 비교연산자가 존재. 실무에서는 엄격한 비교연산자만을 사용한다

 

느슨한 비교연산자

1 == '1'
// true

0 == '0'
// true

0 == []
// true

'0' = []
// false

- 데이터 값은 비교하지만, 타입은 비교하지 않음.

- 문자열 0과 숫자 0은 엄격히 구분되어야 하기에 느슨한 비교연산자의 사용을 지양하여야 한다

 

엄격한 비교연산자

1 === '1'
//false

- 서로 완전히 같지 않으면 false 반환

- 데이터의 메모리 주소를 비교해 두 데이터가 완벽히 일치하는지 판단함

=> 눈으로 보기에 일치해 보여도 컴퓨터 내부에서 저장된 메모리 주소가 다르다면 다른데이터가 됨

 

🔍 실전! 콘솔로 직접 찍어보자

const check = "check"
console.log("check==='check'", check === "check") // ture

const arr = [1,2,3]
console.log("arr===[1,2,3]", arr === [1,2,3]) // false

check라는 문자열을 check 변수에 담아 비교연산자를 활용해 비교할 경우 true가 반환된다

그러나 arr라는 배열을 변수에 담아 비교연산자를 활용해 비교할 경우 false를 반환한다.. 왤까?

비교연산자를 더욱 잘 이해하고 사용하려면 자바스크립트의 원시 데이터 타입과 참조 데이터 타입에 대해 알아야 한다

 

배열과 객체의 비교

자바스크립트의 데이터 타입은 원시타입(Primitive type)과 참조타입(Refrence type)으로 나뉜다.

 

원시타입의 종류

- String

- Number

- Boolean

- Bigint

- undefined

- Symbol

- null

 

원시타입의 특징

- 불변성 (데이터가 변하지 않음)

- 변수 선언, 초기화, 할당 시 저장된 메모리 영역에 직접적으로 접근함

=> 변수에 새 값이 할당될 경우 할당된 메모리 블록에 저장된 값을 바로 변경

 

그런데 뭔가 이상하다.. 분명 재할당이 가능한데 왜 불변성이라는 특징을 가지고있다고 할까?🤔

우선, let box = "box"에서 변수 box가 "box"자체를 담고있는것이 아닌, 데이터의 주소값을 가져와 저장되는 것임

우리가 데이터를 재할당 하게 될 경우 입력한 데이터가 새로운 임시메모리에 새로운 데이터로 저장되는 것

재할당 = 새로 입력된 데이터의 주소값이 변수에 담기는 것임 (변수가 참조하는 주소값만 바뀜, 데이터가 변하는것 x)

 

원시타입에서 값의 복사

let origin = "hello";
let copy = origin;
console.log(copy) // hello
origin = "hi";
console.log(copy) // hello

 

참조타입의 종류

- 원시타입 7종류를 제외한 모든 것

간단하게 말해 객체타입이라고 봐도 무방함

 

참조타입의 특징

- 가변성

- 메모리의 주소는 참조만 해올 뿐 주소가 할당 되는 것이 아님

 

원시타입에서는 하나의 데이터가 하나의 주소값을 가지고 있었다면 참조타입은 다르다

참조타입은 변수의 값이 저장된 메모리의 주소 값을 저장한다

: 원본 데이터의 값이 바뀌면 복사한 데이터의 값도 변화

 

 

참조타입에서 값의 복사

let origin = [1,2,3];
let copy = origin;
origin.pop()
console.log(copy) // arr [1,2]

조건문과 논리연산자

: 조건은 비교연산자를 사용한 참 또는 거짓으로 평가되는 표현식

 

if문

: 작성한 조건이 참(true)일경우 코드 실행

: 거짓(false)일 경우 코드 스킵

if(조건){
	// 조건이 참이면 실행
}

if...else문

: 작성한 조건이 참일 경우 코드를 실행

: 모두 거짓일 경우 else 문을 실행

: else if는 무한대로 중첩할 수 있다 (코드 가독성에 유의)

if( 조건1 ) {
	// 조건1이 참이면 실행
} else if( 조건2 ) {
	// 조건1은 거짓, 조건2는 참이면 실행
} else {
	// 모두 거짓이면 실행
}

 

🔍 실전! 콘솔로 직접 찍어보자

객체를 만들어, 객체의 나이가 20세 이상이면 성인, 14~19세라면 청소년, 14세 미만이라면 어린이

let obj = {
  name : 'sera',
  age : 12
}

if (obj.age >= 20){
  console.log('성인')
}else if (obj.age>13 && obj.age <= 19){
  console.log('청소년')
}else{
  console.log('어린이')
}

 

논리연산자

&& (AND 연산자)

: 양쪽에 위치한 조건을 모두 만족하는 경우 true

: 하나라도 false면 false

 

||  (OR 연산자)

: 양쪽에 위치한 조건 중, 하나라도 만족하는 경우 true

: 첫번째 true를 마주친 순간 평가를 멈춤

 

! (NOT 연산자)

: boolean의 값을 반전 시켜줌 (true > false, false>true)

 

🙌 참고

falsy 값

: 거짓과 같은 값

- undefined

- null

- 0

- ""

- NaN

 

논리연산자의 우선순위

||(or연산자)보다 &&(and연산자)의 우선순위가 높다! 수학식에서 마치 괄호가 있다고 생각하면 됨

 

성능최적화를 위해서, 평가의 배치순서가 중요하다.

예를들어 40세미만 (40%) 여자(50%)중 라식(10%)한 사람을 true로 반환한다면 라식한사람을 먼저 평가한다

 

 

참고

https://www.youtube.com/watch?v=KF6t61yuPCY

https://cocobi.tistory.com/155

본 글은 훈훈한 자바스크립트 강의의 내용과 참고글을 참고해 정리한 글입니다