본문 바로가기

Software Engineering/Web Engineering

[JS - 코드팩토리] 3일차: 연산자

GPT-4o가 그려준 썸네일. 글씨 뭉개짐 현상은 여전하다...

연산자

대부분의 언어에서 같은 기호를 공유하기 때문에 js의 특이점 위주로 정리했다.

캐스팅

let sample = '99';
console.log(+sample); //99
console.log(typeof +sample); //number
console.log(1 + sample); //100
sample = '안유진';
console.log(+sample); //NaN

보통 다른 언어들은 변수를 정수 자료형 따로 문자 자료형 따로 선언하지만, js는 그런 구분이 없다. 따라서 별도의 캐스팅 없이 '99' + 1 을 실행하면 100이라는 결과가 나온다. 단, 형 변환에 실패하면 NaN이 출력된다.

비교 연산자

console.log( 5 == '5'); //true
console.log( 5 === '5'); //false

console.log( 5 != '5'); //false
console.log( 5 !== '5'); //true

위의 자동 캐스팅은 비교연산자에서도 이루어진다. 따라서 서로 다른 자료형일 때 false를 출력하기 위해, 값과 타입의 비교를 뜻하는 '===' 연산자의 사용을 권장한다.

단축평가 (short circuit evaluation)

console.log(true && '아이브'); //우측값 반환
console.log(true || '아이브'); //boolean 반환
console.log(false && '아이브'); //boolean 반환
console.log(false || '아이브'); //우측값 반환

단축평가는 js에서 논리 연산을 최적화하고 불필요한 연산을 피하기 위해 도입된 개념이다. 위와 같이 특정 조건과 결과값을 각각 좌우변으로 하고 있다. 이는 아래와 같이 활용된다.

let a = false;
let result = a && expensiveFunction();  // expensiveFunction()은 호출되지 않음

let user = null;
console.log(user && user.name);  // null 출력, user가 null이므로 user.name에 접근하지 않음

let name = userInput || 'Guest';  // userInput이 비어있으면 'Guest'가 할당됨

isLoggedIn && displayUserProfile();  // isLoggedIn이 true일 때만 displayUserProfile() 호출

 

 

이외에도, js는 python처럼 지수 연산자 ** 이 존재하고 C#에 있던 null 연산자 ?? 역시 존재한다. 

 

느낀 점

오늘은 코엑스에서 열리는 zempie 밋업 행사에 다녀와서 공부할 시간이 조금 부족했다. 그래도 꾸준히 solved.ac 스트릭을 유지하고, 하루에 한 번 외국어 공부도 30분 가량 진행하고 있다. 

새로운 언어 하나를 배워갈 때마다 기존의 지식과 섞이면서 혼동이 오는 듯 하다. 지금 이 언어를 공부하는 목적은 다양한 언어의 문법을 각각 완벽하게 외우는 것이 아니라 언어의 특징을 이해하고 추후 새로운 기술스택을 쌓고 싶을 때 기초를 몰라서 진입장벽이 생기는 것을 방지하기 위해서이다. 

내일의 목표: 반복문 완료.