자바스크립트의 연산자에는 산술 연산자, 문자열 연결 연산자, 증감 연산자, 할당 연산자, 비교 연산자, 논리 연산자, 삼항 연산자, 쉼표 연산자, 그룹 연산자, typeof 연산자, 지수 연산자가 있다.
오늘은 산술자에 대해 자세히 공부해 보려고 한다.
1) 산술 연산자
이항 연산자와 단항 연산자로 나뉜다.
이항 산술 연산자
두 개의 피연산자를 가지며, 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/), 나머지(%)가 있다.
let operator = 2 + 3;
console.log(operator); // 5
let operator2 = 2 * 4;
console.log(operator) // 8단항 산술 연산자 (Unary Arithmetic Operators)
하나의 피연산자에 대해서만 작동하는 연산자이다.
- +(단항 플러스): 숫자로 변환할 수 있는 값을 숫자로 변환한다.
+'123'은 숫자 123으로 변환된다. - -(단항 마이너스): 피연산의 부호를 바꾼다.(양수를 음수로, 음수를 양수로)
-5는 5라는 양수 값을 음수인 -5로 바꾼다.
증감 연산자
(++)와 (--)가 있으며 변수의 값을 1 증가시키거나 감소시킨다. - ++ (증가): 변수의 값을 1만큼 증가시키며, 전위(++x)와 후위(x++)가 있다. 전위(++x)는 값이 먼저 증가한 후 평가되고 후위(x++)는 값이 평가된 후에 증가된다.
let number = 2;
console.log(number++); // 2
/* 2먼저 평가되고 값이 증가하여 console.log(number++)를 출력할때 2가 들어간다. */
let number2 = 2;
console.log(++number2) // 3
/* ++2는 값이 먼저 증가 후 평가되기 때문에 3으로 출력된다. */- -- (감소): 변수의 값을 1만큼 감소시키며, 전위(--x)와 후위(x--)가 있다. 전위는 값이 먼저 감소한 후 평가되며, 후위는 값이 평가된 후에 감소된다.
2) 문자열 연결 연산자
+ 연산자를 사용하여 문자열 연결
let greeting = "Hello, " + "World!";
console.log(greeting); // Hello, World!
/* "Hello, "와 "World!" 두 문자열이 + 연산자에 의해 합쳐져서
"Hello, World!"라는 새로운 문자열이 생성된다. */
let str = '1' + 2
console.log(str); // 12+= 할당 연산자를 사용하여 문자열 연결
let greeting = "Hello";
greeting += ", World!";
console.log(greeting); // 출력: Hello, World!
/* 위의 예시에서 처럼 greeting += ", World!"; 코드는 기존의 greeting 변수에
", World!"라는 문자열을 추가하는 것과 같다. */템플릿 리터럴을 사용하여 문자열 연결
템플릿 리터럴은 백틱(``)으로 감싸진 문자열 안에서 ${} 구문을 사용하여 변수나 표현식 등을 넣을수있다.
let name = "John";
let greeting = `Hello, ${name}!`;
console.log(greeting); // 출력: Hello, John!
/* ${name} 부분은 해당 위치에 name 변수의 값을 넣어준다. name 변수가 변하면 ${name}도 변한다. */3) 할당 연산자
할단 연산자
/* =기호를 사용하여 변수에 값을 할당한다. */
let x = 10; // x라는 변수에 10이라는 값을 할당한다.복합 할당 연산자
let x = 10;
x += 5; // x = x + 5와 같은 의미이다. x의 값은 15가 된다.
let y = 20;
y -= 5; // y = y - 5와 같은 의미이다. y의 값은 15가 된다.
let z = 7;
z *= 2; // z = z * 2와 같은 의미이다. z의 값은 14가 된다.
4) 비교 연산자
비교 연산자
let x = 10;
let y = '10';
console.log(x == y);
// true, 값만 비교하므로 문자열 '10'은 숫자 10과 동등하다.
console.log(x === y);
// false, 값과 타입 모두를 비교하므로 문자열 '10'은 숫자 10과 일치하지 않다.
console.log(x != y);
// false, x와 y의 값이 같으므로 부등하지 않다.
console.log(x !== y);
// true, x와 y의 타입이 다르므로 불일치하다.대소 관계 비교 연산자
/* (<, >, <=, >=)를 사용하여 두 값의 대소 관계를 비교한다. */
let a = 5;
let b = 20;
console.log(a < b); // true, a는 b보다 작다.
console.log(a > b); // false, a는 b보다 크지 않다.
console.log(a <= b); // true, a는 b보다 작거나 같다.
console.log(a >= b); // false, a는 b보다 크거나 같지 않다.
5) 논리 연산자
AND(&&), OR(||), NOT(!)으로 조건을 결합하거나 반전시킨다.
let a = true;
let b = false;
console.log(a && b); // false - a와 b 모두 true일 때만 true를 반환한다.
console.log(a || b); // true - a와 b 중 하나라도 true이면 true를 반환한다.
console.log(!a); // false - a의 반대 값을 반환한다. 즉, a가 true이므로 !a는 false이다.
console.log(!b); // true - b의 반대 값을 반환한다. 즉, b가 false이므로 !b는 true다.
------------------------------------------------------
let x = 10;
let y = 20;
/* 다음과 같은 조건문에서도 논리 연산자를 자주 사용한다 */
if (x > 5 && y > 5) {
console.log('x와 y는 둘다 5보다 크다.');
}
if (x > 15 || y > 15) {
console.log('x 또는 y가 15보다 크다.');
}
6) 삼항 연산자
(조건 ? 값1 : 값2) 조건식을 평가하여 그 결과에 따라 값을 선택한다.
let x = 10;
let y = 20;
let result = (x > y) ? 'x가 y보다 크다' : 'x가 y보다 크지 않다.';
console.log(result); // 'x가 y보다 크다'
/* 아래와 같이 변수에 값을 할당하는 데도 사용할 수 있다. */
let a = 15;
let b = a > 10 ? 'a가 10보다 크다.' : 'a가 10보다 크지 않다.';
console.log(b); // 'a가 10보다 크다.'
7) typeof 연산자
주어진 값이 어느 자료형인지 반환하는데 사용된다.
let num = 10;
console.log(typeof num); // "number"
let str = 'Hello, world!';
console.log(typeof str); // "string"
let bool = true;
console.log(typeof bool); // "boolean"
let obj = {a: 1, b: 2};
console.log(typeof obj); // "object"
let arr = [1, 2, 3];
console.log(typeof arr); // "object" 배열은 JavaScript에서 객체로 취급된다.
let func = function() {};
console.log(typeof func); // "function"
let nothing = null;
console.log(typeof nothing);
// "object" JavaScript의 오래된 버그이다. 실제로 null은 객체가 아니다.
let notDefined;
console.log(typeof notDefined); // "undefined"
8) 지수 연산자
ES7에서 도입 되었으며 좌항의 피연산자를 밑으로, 우항의 피연산자를 거듭제곱 해준다.
지수 연산자가 도입되기 전에는 Math.pow 메서드를 사용했다.
9) 쉼표 연산자
왼쪽 피연산자부터 차례대로 평가 후 마지막 피연산자 평가가 끝나면 마지막 피연산자의 평가 값을 반환한다.
let x = 2;
let y = 3;
console.log(x ** y); // 8
// 2의 3제곱이다.
let a = 10;
let b = -1;
console.log(a ** b); // 0.1
// 10의 -1제곱이다.
/* 변수에 값을 할당하는 형태로도 사용할 수 있다. */
let c = 5;
c **= 2; // c = c ** 2와 같은 의미이다. c의 값은 25가 된다.
console.log(c); // 25
10) 그룹 연산자
연산자의 우선순위를 정할 수 있다.
let x = 10;
let y = 5;
let z = 2;
console.log(x + y * z); // 20
// 그룹 연산자 없이계산하면 곱셈이 덧셈보다 우선순위가 높기 때문에 20이 나온다.
console.log((x + y) * z); // 30
// 그룹 연산자를 사용하여 계산하면 괄호 안의 덧셈이 먼저 실행되기 때문이다.
11) 그 외의 연산자
- "delete": 객체에서 속성을 제거하는데 사용된다.
let obj = {a: 1, b: 2};
console.log(obj.a); // 출력: 1
delete obj.a; // a 속성을 삭제한다.
console.log(obj.a); // undefined- "in": 객체가 특정 속성을 가지고 있는지 확인하는데 사용된다.
let obj = {a: 1, b: 2};
console.log('a' in obj); // true
console.log('c' in obj); // false- "instanceof": 주어진 객체가 특정 타입인지 확인하는데 사용된다.
let arr = [1, 2, 3];
console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true 모든 배열은 Object의 인스턴스다.
console.log(arr instanceof Number); // false- "void": 주어진 표현식을 실행하고 undefined를 반환한다.
let x = void(0);
console.log(x) ;// undefinedvoid를 실제로 사용하는 경우는 웹 페이지에서 HTML 링크(<a> 태그)를 클릭했을 때 페이지 이동이
발생하지 않도록 할때 href 속성에 "javascript:void(0)"를 설정해준다.
<a href="javascript:void(0)" onclick="myFunction()">Click me</a>
"Click me" 링크를 클릭하면 myFunction()이 실행되지만, 페이지 이동은 발생하지 않는다.