JavaScript 연산자 및 표현식
자바스크립트에서는 값의 조작을 위해 다양한 연산자를 제공해요. REPL에 아래 코드들을 입력해 보면서 연습하세요.
산술 연산자
산술연산자는 이미 몇번 사용해 봤던 연산자죠. 더하기, 빼기, 곱하기, 나누기와 같은 기본적인 사칙연산을 위해 사용했었죠. 하지만 이게 다가 아니에요. 몇가지 중요한 산술 연산자가 더 있어요.
// 사칙연산 +, -, *, /
console.log(1 + 1); // 2
console.log(1 - 2); // -1
console.log(2 * 3); // 6
console.log(2 / 3); // 0.6666666666666666나머지 연산자 (% , Modulo)
나머지 연산자는 나눗셈의 나머지를 반환해주는 연산자에요.
console.log(9 % 2); // 19 나누기 2의 값은 4이고 나머지는 1이죠. 따라서 나머지 연산의 결과는 1이되요.
나머지 연산자는 홀수와 짝수를 구분할 때 많이 사용해요. 어떠한 숫자를 2로 나누었을 때 나머지가 1이라면 홀수이고, 0이라면 짝수이죠. 그러면 이러한 홀수 짝수 구분은 어디에 쓰일까요? 게시판 목록 화면이나 표에서 볼 수 있어요. 게시판이나 표 중에는 흰색과 회색이 번갈아 가면서 표시되는 경우가 있잖아요. 이럴때 나머지 연산자를 이용해서 홀수에는 흰색, 짝수에는 회색이 표시되는 방식으로 사용해요.
증감 연산자 (++, —)
++ 는 기존의 값을 1 증가시키는 연산자에요. 마찬가지로 --는 기존의 값을 1 감소시키는 연산자에요.
var i = 1;
i++; // 1
i; // 2
i--; // 2
i; // 1보셨죠? 변수 뒤에 ++ 기호를 붙이게 되면 변수에 1을 더하게 되지만 연산의 결과값은 1이에요. 하지만 i의 값은 1이 증가한 2가 되었어요.
i = 1;
++i; // 2
i; // 2
--i; // 1
i; // 1조금더 명확하죠? 변수 앞에 ++ 기호를 붙이게 되면 연산의 결과값도 i의 값도 1 증가한 값을 반환해요. ++기호를 변수명 앞에 사용하는 것이 더 명확해 보이죠?
하지만 실제 코딩할 때는 두가지 모두 많이 써요. 그러니 증감 연산자를 사용할 때는 잘 생각해보고 조심해서 써야해요. 실제로 이러한 모호함 때문에 몇몇 프로그래밍 언어에서는 증감연산자가 없는 경우도 있어요.
대입연산자 (=)
대입 연산자는 우측에 있는 값을 좌측에 대입하는 역할을 해요. 변수를 사용할 때 사용해 봤죠.
var name = "Alice";위 코드는 Alice라는 문자열을 name 이라는 변수에 대입하는 역할을 해요. 영어로 비유해볼까요. 즉, My name is Alice라고 하면 Alice를 My name에 대입하는 것이죠. 여기서 = 는 is 의 역할을 하는거에요.
할당연산자 (+=, -=, *=, /=)
할당연산자 += 은 좌변의 값에 우변의 값을 더한 값을 좌변에 할당해요.
var x = 42;
x += 7; // 49즉, x = x + 7 과 정확하게 같은 역할을 하는 거죠. 할당연산자나 위에서 봤던 증감연산자는 프로그래머의 편의를 위해 만들어졌어요.
표현식 (Expression)
표현식은 값으로 평가될 수 있는 문(Statement)을 의미해요. Statement는 지금껏 작성했던 자바스크립트의 문장을 말하는데, 이중에서 어떠한 값으로 표현될 수 있으면 표현식이라고 해요. 예를 들어 1 + 1 이라는 문은 2라는 값으로 표현되죠. 하지만 console.log("Hello") 이러한 문장은 값을 출력하는 문장이지 표현식이 아닌거죠.
비교연산자
== vs ===
비교 연산자는 좌변과 우변의 표현식을 비교해서 참이면 true 거짓이면 false를 반환해요. 비교하는 방법은 1 == 1 이런식으로 하는 거죠.
42 == 42 // true
42 == 2 // false
"Alice" == "Alice" // true
"Alice" == "alice" // false간단하죠. 하지만 문제가 있어요.
42 == "42" // true
true == 1 // true
true == "1" // true
undefined == null // true숫자 42와 문자열 “42”가 같다니… 지가 사람도 아니고 컴퓨터 주제에 왜 이걸 같다고 하나요. 사실, 숫자와 문자열을 == 으로 비교하면 숫자를 문자열로 변환해서 비교해요.
Boolean을 비교할 때는 true는 1, false 는 0으로 변환해서 평가해요. 불리언 값 true와 문자열 “1” 역시 true네요. 이 경우는 true를 1로 변환하고 다시 문자열 “1”로 변환한 다음 같다고 해버리는 거죠.
undefined 와 null은 분명히 다른 것이라고 배웠는데 여기서는 같다고 해버리네요.
이러한 방식으로 자료의 형을 바꾸는 것을 암시적 형변환이라고 해요. 그런데 이렇게 너무 암시적이면 프로그래밍 하다가 실수할 가능성이 많아지죠.
그래서 JavaScript에서는 주로 === 을 사용해요. ===은 형변환을 하지 않으므로 경우에 따라서 작성해야 할 코드의 양이 늘어날 수도 있지만 그만큼 더 명확해지죠.
true === 1 // false
true === "1" // false
undefined == null // false많은 자바스크립트 코딩 스탠다드에서 ==의 사용을 금지하는 경우가 많아요. 그러니 웬만하면 자바스크립트에서는 ===을 사용해서 값을 비교해요.
!== 연산자
!== 은 === 와 반대로, 좌변과 우변이 같으면 false를 리턴하고 다르면 true를 반환해요.
1 !== 2 // true<, <=, >, >= 비교연산자
각각 작다, 작거나 같다, 크다, 크거나 같다 입니다. 결과값이 참이면 true, 거짓이면 false를 반환해요.
42 > 42 // false
42 >= 42 // true
42 < 42 // false
42 <= 42 // true논리연산자 (&&, ||, !)
논리 연산자 && 는 좌우의 표현식의 결과가 모두 true일 경우 true를 반환하고, 하나라도 false일 경우 false를 반환해요. 만약 좌변이 false 인 경우, 우변은 볼 필요도 없이 결과는 false 이므로 실제로도 안봐요. 즉, 좌변이 false 인경우 && 우측의 표현식은 실행되지 않아요.
true && true // true
false && true // false
1 > 2 && 2 > 1 // false논리 연산자 || 는 좌우의 표현식 결과가 하나라도 true일 경우 true를 반환하고, 좌우 모두 false일 경우에만 false를 반환해요. 만약 좌변이 true인 경우, 우변은 볼 필요도 없이 결과는 true이므로 실제로도 안봐요. 즉, 좌변이 true인경우 || 우측의 표현식은 실행되지 않아요.
false || true // true
false || false // false
2 > 1 || 1 > 2 // true논리 연산자 ! 는 표현식의 결과가 true일 경우 false를, false일 경우 true를 반환해요. 즉, true와 false를 변경해요.
!true // false
!false // truetypeof 연산자
지금까지 배웠던 연산자 외에도 몇가지 연산자가 더 있어요. 나머지 연산자들은 나중에 알아보기로 하고, 마지막으로 typeof 연산자에 대해 알아봐요.
typeof 연산자는 자료형의 문자열을 반환해요.
typeof '42' // 'string'
typeof 42 // 'number'
typeof true // 'boolean'
typeof function(){} // 'function'
typeof undefined // 'undefined'
typeof null // 'object'
typeof {} // 'object'
typeof [] // 'object'null 부터는 조금 이상하죠. 그래서 객체의 타입을 조사할 때는 다른 방법을 써요.
지금까지 조금 지루하고, 복잡한 연산자에 대해 알아봤어요. 이러한 연산자들은 조건문과 반복문을 사용하게 되면 그 효용이 드러나요. 나중에 조건문과 반복문을 배우면서 다양한 활용법에 대해 알게되니 만약 지금 잘 이해가 안되더라도 그냥 계속 진행해 나가세요.