JS 개념정리 02 - 연산자

기본연산자 개념

• 피연산자(operand) : 연산을 수행하는 대상. 인수(argument)라 부르기도 함
• 단항연산자(unary) : 피연산자를 하나만 받는 연산자
• 이항연산자(binary) : 두 개의 피연산자를 받는 연산자

let x = 1, y = 2;

/* 단항 연산자 */
console.log(-x);

/* 이항 연산자 */
console.log(x + y);

 

산술연산자 종류

더하기 +, 빼기 -, 곱하기 *, 나누기 /, 나머지 %, 거듭제곱 **

▼ 거듭제곱 **

let a = 2, b = 1/2;
console.log(a**b); // 출력 : 8, a를 b번 거듭제곱한 결과
console.log(4**b); // 출력 : 2, 4의 1/2승(제곱근)은 2기 때문

더하기 연산자 +로 문자열 연결

+는 피연산자로 문자열을 받으면 두 문자열을 병합함

이때 피연산자에 문자형이 아닌 자료형이 있다면 문자열로 변환해서 연산해버림

let a = "Wel";
let b = "come";
console.log(a + b); // 출력 : "Welcome"

/* 문자형이 아닌 자료형이 끼어있는 경우 */
let c = 1, d = 2, e = "2";
console.log(c + d + e) 
// 출력 : "32", 연산은 좌에서 우로 진행하기 때문에 숫자형 1,2의 합인 3이 먼저 연산된 후 문자열과 만나 변환됨

 

▼ 숫자형 변환에서 +의 활용

숫자가 아닌 피연산자에 단항연산자 +를 붙이면 숫자형으로의 변환 발생

짧은 문법으로 Number()와 같은 역할을 해주기 때문에, 활용법을 알아두면 좋음

/* +로 숫자형 변환 */
console.log(+true); // 출력 : 1
console.log(+""); // 출력 : 0

/* 활용법 */
let countDogs = "7";
let countCats = "4";
console.log(countDogs + countCats); // 출력 : "74", 문자열끼리 연산이기 때문에 병합됨
console.log(+countDogs + +countCats); // 출력 : 11, 숫자형으로 먼저 변환된 후 연산

연산자 우선순위

소괄호() 내의 연산이 최우선순위, 단항연산이 이항연산보다 우선, 좌측 연산이 우측 연산보다 우선 등등

자세한 것은 우선순위 테이블을 참고

 

할당연산자

=, +=, -=, *=, /=

 

증감연산자

++, --

증감 연산자는 변수에만 활용할 수 있고, 앞에 오면 전위형, 뒤에 오면 후위형이라 부름

▼ 전위형과 후위형의 차이

전위형은 연산 후의 새로운 값을 반환하고, 후위형은 연산 전의 기존 값을 반환함

반환 값을 사용하지 않는 경우라면 전위형과 후위형의 차이는 없음

let count = 0;
console.log(2 * ++count); // 출력 : 1, 새 값인 1을 곱하기 때문
console.log(2 * count++); // 출력 : 0, 기존 값인 0을 곱하기 때문

/* 차이가 없는 경우 */
let same = 0;
if (count === 0) {
	same++;
} else {
	++same;
}
// 조건이 참이든 거짓이든 if문을 거친 후에 변수 same의 값은 1이 됨

비트연산자

&, |, ^, ~, <<, >>, >>>

인수를 32비트 정수로 변환해 이진 연산을 수행

 

쉼표연산자

여러 표현식이 있을 때 각각의 표현식이 평가되지만, 반환은 마지막 표현식의 결과만 해줌

코드를 짧게 하기 위해서 여러 동작을 하나의 줄에서 처리할 때 사용하는데, 코드 가독성에 도움이 되지 않으므로 웬만하면 사용을 지양하는 편이 좋다.

let a = 1, b = 2, c = 3;
console.log(a + 1, b + 1, c + 1); // 출력 : 4, 마지막 표현식인 c + 1의 결과값만 반환

/* 반환되지 않았을 뿐 표현식의 평가는 거침 */
console.log(a); // 출력 : 2 
console.log(b); // 출력 : 3

 

비교연산자

==, !=, <=, >=, <, >

비교연산자의 결과 값은 불린형임

서로 다른 자료형을 비교하는 경우 두 값을 모두 숫자형으로 변환해 연산

▼ 비교연산자 주의사항

• 일치와 불일치 판단을 할 때 자료형 변환이 발생해 원치않는 결과를 얻을 수 있기 때문에, 엄격한 비교연산자인 ===, !==를 사용하도록 습관을 들일 것
• 변수가 undefined 또는 null 값을 가질 가능성이 있다면, 그 변수가 <, >, <=, >=의 피연산자로 오지 않도록 주의

▼ 문자열 비교

사전편집(lexicographical) : 글자 순서대로 비교함. 첫 글자부터 시작해서 사전 기준 뒤쪽에 있는 글자를 크다고 판단

→ 글자가 같다면 대문자가 소문자보다 크다고 판단

→ 글자가 완전 동일하다면 다음 글자 비교

→ 비교하다가 글자 길이에 차이가 있을 경우 긴 쪽이 더 크다고 판단

console.log("G" > "Gee") // 출력 : false, 후자의 글자 길이가 3으로 더 길기 때문
console.log("Glow" > "Glee") // 출력 : true, 둘째 글자까지가 동일하고, 세번째에서 "o"가 "e" 보다 뒤기 때문에
console.log("g" > "G") // 출력 : false, 대문자가 더 크다고 판단하기 때문

 

 

Javascript의 논리연산자 - 1. ||의 활용

|| 연산자가 여러 개 체이닝 된 경우, 피연산자 중 처음 만난 truthy한 값을 반환함.

만약 피연산자 모두가 falsy한 값일 경우, 마지막 피연산자의 값을 반환함. 이때 반환 값들은 형변환을 하지 않은 기존 값

let isOr1 = false || "" || 1 || null; 
console.log(isOr1); // 출력 : 1, falsy||falsy||truthy||falsy기 때문
let isOr2 = false || "" || 0 || null; 
console.log(isOr2); // 출력 : null, 모든 피연산자가 falsy하기 때문에 마지막 피연산자 반환

 

Javascript의 논리연산자 - 2. &&의 활용

&& 연산자가 여러 개 체이닝 된 경우, 피연산자 중 처음 만난 falsy한 값을 반환함.

만약 피연산자 모두가 truthy한 값일 경우, 마지막 피연산자의 값을 반환함. 이때 반환 값들은 형변환을 하지 않은 기존 값

let isAnd1 = true && 1 && 0 && "Hi";
console.log(isAnd1); // 출력 : 0, truthy&&truthy&&falsy&&truthy기 때문
let isAnd2 = true && 1 && "Hi";
console.log(isAnd2); // 출력 : "Hi", 모든 피연산자가 truthy하기 때문에 마지막 피연산자 반환

 

Javascript의 논리연산자 - 1. NOT(!)의 활용

NOT을 연달아 두 번 사용하면 Boolean()의 기능을 대신할 수 있음

논리연산자의 우선순위는 NOT > && > || 순임

console.log(!!"Hi"); // 출력 : true, 내용이 있는 문자형은 truthy하기 때문
console.log(!!0); // 출력 : false, 숫자형 0은 falsy하기 때문