6. 불리언(boolean)
자바스크립트 뿐만 아니라 프로그래밍 언어에는 참을 의미하는 true와 거짓을 의미하는 false라는 값이 존재합니다.
- false를 의미하는 값들(falsy value)
- undefined
- null
- 0
- -0
- NaN
- false
- ""
- ''
여기서 NaN은 잘못된 숫자 연산을 했을 때 반환되는 값입니다.
- true를 의미하는 값들(truthy value)
위에 명시된 값들을 제외한 모든 값입니다. 아래의 5가지의 예시 또한 true를 의미합니다.
- '0' (0을 포함하는 문자열)
- 'false' (false를 포함하는 문자열)
- [] (빈 배열)
- {} (빈 객체)
- function() {} (빈 함수)
자바스크립트에서 이러한 falsy value와 truthy value를 boolean 타입으로 사용하기 위한 문법은 다음과 같습니다.
- !: truthy, falsy value를 반전해서 boolean 타입으로 변환.
ex) !1 // false
ex) !NaN // true - !!: 값을 boolean으로 변환.
ex) !!1 // true
ex) !!undefined // false
7. 연산자
연산자는 프로그래밍에서 특정 연산을 할 때 사용되는 다양한 기호문자들을 의미합니다. 할당 연산자, 산술 연산자, 관계 연산자, 문자열 연산자, 논리 연산자, 비교 연산자, 조건 (삼항) 연산자, 비트 연산자 등 여러 종류의 연산자가 존재합니다. 더 많은 연산자가 존재하지만, 오늘은 언급한 연산자들에 대해서만 하나씩 살펴보도록 하겠습니다.
7-1. 산술 연산자
산술 연산자는 숫자값(말 그대로 숫자 혹은 변수)을 피연산자로 가지고, 하나의 숫자 값을 반환하는 연산자입니다. 기본적인 사칙연산(덧셈+, 뺄셈-, 곱셈*, 나눗셈/)에 대한 연산자 뿐만 아니라 나머지 연산자, 증감연산자(증가++, 감소--), 단항부정연산자, 숫자화 연산자(+) 등이 있습니다.
// 사칙연산
let value1 = 2 + 3; // 5
const value2 = 10 - 13; // -3
const value3 = 5 * 9; // 45
const value4 = 6 / 4; // 1.5
// 나머지 연산자
const value5 = 7 % 5; // 2
// 증감 연산자
value1++; // 5
value1; // 6
++value1; // 7
value1; // 7
value1--; // 7
value1; // 6
--value1; // 5
value1; // 5
// 단항부정연산자
-value1; // -5
-value2; // 3
// 숫자화 연산자
const value6 = "133";
value6; // "133"
+value6; // 133
+true // 1
+false // 0사칙연산은 우리가 알고있던 행동을 하는 연산자입니다. 이 연산자들은 대부분의 다른 프로그래밍 언어들이 그렇듯이 부동소수점 값을 연산하는 것과 같이 동작합니다. 예를 들어
console.log(1 / 2); // 0.5
console.log(1 / 2 === 1.0 / 2.0); // true여기서 나눗셈 연산자를 사용할 때 0으로 나누면 Infinity를 발생시키기 때문에 주의해야 합니다.
- 나머지 연산자는 이항 연산자라고도 합니다. 두 피연산자를 나눈 뒤에 나머지를 반환하는 연산자이며 %를 사용합니다.
- 증감연산자는 단한 연산자로 피연산자에 1을 더하거나 뺍니다. 위의 예시에서 볼 수 있듯이, 증가를 예를들어 연산자를 피연산자 앞(++value1)에 사용하면 피연산자에 1을 더한 값을 반환하고 그 결과가 변수에 저장됩니다. 만약 연산자를 피연산자 뒤(value1++)에 사용하면 피연산자에 1을 더하기 전에 값을 반환하고, 그 뒤에 변수에 더해진 값이 반영됩니다.
- 단한부정연산자는 마찬가지로 단한 연산자이며, 피연산자의 부호가 바뀐 값을 반환합니다.
- 숫자화 연산자도 단한 연산자이며, 피연산자가 숫자값이 아니라면 피연사자를 숫자로 변환하기를 시도합니다. 보통 프로그래밍 언어에서 0은 flase, 나머지 숫자는 true로 사용됩니다. 자바스크립트에서는 이러한 true, false값에 숫자화 연산자를 사용했을 때 false는 0으로, true는 1로 반환합니다.
7-2. 할당 연산자
할당 연산자는 지금까지 보았던 코드에서 = 문자를 의미합니다. 대입연산자라고 부르기도 합니다. 할당 연산자는 특정 값에 연산을 한 값을 대입할 때 사용할 수 있는 연산자입니다. 예시 코드를 보면 이해하기 쉬울겁니다.
let val = 1;
val = val + 3;위 코드를 보면 a라는 변수 공간에 1이라는 값으로 초기화 하기 위해서, 그리고 다음 줄에서 a+3의 결과를 a에 대입하기 위해서 할당 연산자를 사용하고 있습니다. 이 할당 연산자는 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당한다고 정의할 수 있습니다. 이러한 할당 연산자의 가장 기본은 오른쪽의 피연산자 값을 왼쪽 피연산자 값에 할당하는 등호(=) 입니다. 즉 x = y에서 y값을 x에 할당하는 것이죠.
이러한 할당 연산자 외에도 복합 할당 연산자라는 개념도 존재합니다. 이 개념을 사용하면 위의 코드를 다음과 같이 작성하는게 가능해집니다.
let val = 1;
val += 3;전에 작성한 코드와 완전히 동일한 결과가 a에 할당되게 됩니다. 덧셈 말고 다른 연산도 물론 가능합니다.
let val = 1;
val += 5; // 6
val -= 5; // 1
val *= 5; // 5
val /= 5; // 1
val %= 3; // 2
val **= 3; // 8또한 할당 연산자를 이용한 구조 분해 할당 구문은 배열의 구조나 객체를 반영해서 데이터를 추출하고 분해해서 여러개의 변수로 저장할 수 있습니다.
const foo = ["one", "two", "three"];
// 구조 분해 할당 없이
const one = foo[0];
const two = foo[1];
const three = foo[2];
// 구조 분해 할당
const [first, second, third] = foo;7-3. 관계 연산자
관계 연산자는 피연산자들을 비교하고, 비교의 참 여부에 따라서 boolean 값을 반환합니다.
- in: 객체에 특정한 속성이 있는 경우에 true를 반환하는 연산자입니다.
propNameOrNumber in objectName여기서 propNameOrNumber는 속성의 이름을 나타내는 문자열 또는 배열의 인덱스를 나타내는 숫자이며, objectName은 객체의 이름을 의미합니다. 아래 예시 코드를 보면서 in 연산자를 어떻게 쓰는지 이해해봅시다. 먼저 배열에서의 in 연산자 입니다.
// Arrays
const names = ["muko", "miki", "mouse", "hihi", "apple"];
0 in names; // return true
3 in names; // return true
6 in names; // return false
"miki" in names; // return false
"length" in names; // return true숫자는 배열에서의 인덱스를 의미합니다. 해당 인덱스를 배열에서 사용할 수 있을까요? 정도의 질문을 던진 것이라고 이해하면 편합니다. 문제는 그 아래입니다. 그 아래에 "miki"가 namse에 있을까요? 라고 해석하면 안되고, "miki"라는 속성이 배열에 있을까요? 라고 해석해야 합니다. 그래서 컴퓨터가 return false를 반환한 것이죠. 그래서 "length" in names;는 true를 반환하게 됩니다. 왜냐하면 배열은 length라는 속성(property)를 가지고 있거든요!
아래는 객체에서의 in 연산자의 사용예시입니다.
// built-in objects
"PI" in Math; // return true
const myString = new String("korea");
"length" in myString; // return true
// Custom objects
const myCar = {
make: "Kia",
model: "K9",
year: 2020
};
"make" in myCar; // return true
"model" in myCar; // return true
- instanceof: 명시된 객체(왼쪽 피연산자)가 명시된 객체형(오른쪽 피연산자)인 경우 true를 반환합니다.
objectName instanceof objectType여기서 objectName은 objectType과 비교할 객체의 이름이고, objectType은 Data 또는 Array과 같은 객체형 입니다. 이 instanceof 연산자는 프로그램 동작시간에 객체의 형태가 어떻게 존재하고 있는지 확인할 때 사용하기 유용합니다. 예를 들어, 예상치 못한 예외가 발생했을 때 던져진 데이터의 형태에 따라 예외를 처리하는 코드를 작성하는 것이 가능해집니다.
const today = new Date();
if (today istanceof Date) {
console.log(today);
}7-4. 문자열 연산자
문자열 연산자는 +기호를 사용합니다. 그래서 자바스크립트에서 + 연산자는 숫자만 더하는 것이 아니라 문자열과 다른 데이터 형태의 값도 연결하는 것이 가능합니다.
const helloWorld = 'hello ' + 'world'; // 'hello world'
const overwatch = 'c' + 9; // 'c9'
const oneTwoThree = 1 + 'two' + 3; // '1two3';
const numberString = 111 + 222 + '1'; // 3331
const stringNumber = '777' + 111 + 222; // '777111222'문자열 연산자에서 조심해야할 부분은 문자열이 아닌 데이터가 피연산자로 들어올 경우, 문자열로 변환해서 연결한다는 것입니다. 문자열이 없을 경우에는 해당 데이터 타입에 맞는 연산을 진행하지만, 만약 문자열이 들어간다면 우선순위가 문자열이 더 높게됩니다. 그래서 위의 코드에서 numberString 변수의 경우네는 변수 초기화를 할 때 111 + 222의 경우 산술연산으로 진행되어 333이라는 값이 반환되지만, 333 + '1'의 경우는 문자열이 있기 때문에 문자열 연산자로서 + 기호가 역할을 동작하게 됩니다. 333이 숫자가 아니라 문자열 '333'으로서 피연산자로 들어간다는 말이죠. 등호 오른쪽의 값을 계산할 때, 왼쪽부터 계산하기 때문에 위와 같이 동작하게 됩니다.
7-5. 논리 연산자
논리 연산자에는 &&, ||, ! 가 있다. 순서대로 그리고(AND), 또는(OR), 아니다(NOT)이라는 의미를 가지고 있습니다. 보통 코드를 읽을 때 A && B라고 써져있으면 'A and B'라고 읽습니다. 먼저 &&는 피연산자 모두 참(truthy)일 경우에만 true, 나머지는 false를 반환합니다. ||는 피연사자 중에서 하나라도 참(truthy)일 경우에 true, 모두 falsy일 경우 false를 반환하는 연산자입니다. 마지막으로 !는 truthy인 값이면 false로, falsy인 값이면 ture로 반환합니다.
사칙연산을 할 때 곱셉, 나눗셈이 먼저이고 그 다음이 덧셈 뺄셈인 것 처럼, 논리 연산자도 우선순위가 있습니다. 순서는 NOT -> AND -> OR 순 입니다. 예를들어보겠습니다.
const value = !( (true && false) || (true || false) || !false );- 우선 괄호 안에 있는 NOT을 처리하면 !( (true && false) || (true || false) || true);
- 그다음 AND를 처리하면 !( false || (true || false) || true );
- 그다음 OR를 처리하면 !( false || true || true);
- 다시 괄호 안의 AND가 없으니 OR을 처리하면 !true
- 그다음 괄호 밖의 영역만 남았으니 가장 우선순위인 NOT부터 처리하면 false
이렇게 최종적으로 false를 반환하게 됩니다.
이런 논리 연산자는 null이나 undefined가 들어왔을 때 에러를 방지하기 위한 도구로 쓰이거나, 코드를 줄일 때도 자주 사용됩니다. 예를 들어보겠습니다.
const getData = myAPI.getData() || 'fail to getData from server';
const getStrictData = isSuccess && myAPI.getData();위의 코드를 보면 getData의 경우에는 myAPI의 getData 메소드를 호출한 뒤, 그 뒤에 OR연산자를 사용했습니다. 이 의미는 myAPI.getData()로 부터 넘어온 반환값이 null혹은 undefined와 같은 falsy값이 넘어올 경우에는 그 뒤에 적혀져있는 'fail to getData from server'라는 문자열을 getData의 초기값으로 사용하겠다는 의미입니다. 그 다음줄인 getStrictData의 경우에는 isSuccess가 truthy해야만 myAPI.getData()도 호출할 수 있게 됩니다. 만약 isSuccess가 falsy하다면 myAPI.getData()는 호출되지 못한 상태가 되며, getData 변수에는 false가 저장됩니다.
이 연산자의 특징은 ||연산자의 경우 하나라도 참인 순간 그 뒤의 피연산자를 확인하지 않고, &&연산자의 경우는 하나라도 거짓인 순간 그 뒤의 피연산자를 확인하지 않는다는 점입니다.
7-6. 비교 연산자
비교연산자를 설명하기에 앞서, 자바스크립트의 특징에 대해 먼저 설명하겠습니다.
- Javascript는 동적 타입 언어로 런타임에 타입 검사를 한다.
- 자료형을 선언할 필요가 없다.
- 묵시적 형변환에서 '+' 연산자는 문자열의 우선순위가 높다.
- '-' 연산자는 문자열이 숫자로 변환된다.
자바스크립트에서는 new Number("2"), new parseInt("2") 등의 명시적 형변환 방법과, (+"2")와 같은 묵시적 형변환이 가능합니다.
그래서 이러한 특징때문에 자료형을 나타내는 부분이 없을 때 불편함을 느끼는 경우가 생깁니다. 아래와 같은 경우에도 마찬가지입니다.
0 == ''
0 == false
0 == []
null == undefined네 개의 예시 모두 true를 반환합니다. 자바스크립트에서 ==으로 비교연산을 진행하게 되면 자동으로 자료형을 바꿔서 값만 비교하기 때문입니다. 그래서 ==를 사용하면 숫자 1과 문자 '1'이 동일한 값으로 간주됩니다. 0과 false, undefined와 null도 같은 값으로 간주됩니다.
이런 경우에 정확하게 동일한지 체크하기 위해서 자바스크립트에서는 === 연산을 사용해야 합니다. 값 뿐만 아니라 자료형까지 같아야 true를 반환합니다. 만약 자료형까지 다른지를 비교할 때는 !== 을 사용하면 됩니다. 정리하자면 둘이 같은지 물어볼 때는 ===, 둘이 다른지 물어볼 때는 !==을 사용하면 됩니다.
7-7. 조건 (삼항) 연산자
마지막으로 삼항 연산자입니다. 이는 자바스크립트 뿐만 아니라 다른 언어에서도 많이 쓰이는데요, 자바스크립트에서 유일하게 3개의 항을 사용하는 연산자입니다. 조건 삼항 연산자는 조건에 따라 2개의 값 중 하나를 가질 수 있습니다.
조건 ? 값1 : 값2만약 조건이 참이라면 조건 연산자는 값1을 반환하고, 그렇지 않을 경우에는 값2를 반환합니다. 예를 들어보겠습니다.
const status = (name === 'muko') ? true : false;만약 name이 'muko'일 경우에 status는 true로 초기화되고, 아닐 경우에는 false로 초기화가 됩니다. 이렇게 한 개의 상태값이나 조건에 따라 두가지로 결과가 나뉘게 될 때는 if문이라는 조건문을 써도 되지만, 조건 삼항 연산자를 사용했을 때 코드가 더 간결해지는 경우가 있습니다.
다음 시간에는 조건문에 대해서 알아보겠습니다 :)
댓글