Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- map
- Kotlin
- 자바
- 연습문제
- 리눅스마스터 1급 정리
- toCharArray
- 자바스크립트 코딩의 기술
- Java
- 프로그래머스
- 스프링 빈
- Memoir
- 고잉버스
- 문자열
- 리눅스
- 스프링 컨테이너
- Linux
- 코딩테스트
- java 백준 1차원 배열
- 백준 javascript
- 반복문
- GoingBus
- 카카오
- 코테
- 월간코드챌린지
- 리눅스마스터 3과목
- 리눅스마스터1급
- 개발자 회고록
- 명령어
- 백준 java
- JavaScript
Archives
- Today
- Total
hoon's bLog
Javascript 연산자 사용법 본문
반응형
연산자(operator)
자바스크립트는 여러 종류의 연산을 위한 다양한 연산자(operator)를 제공
산술 연산자(arithmetic operator)
- 산술 연산자는 사칙연산을 다루는 가장 기본적이면서도 많이 사용하는 연산자
- 모두 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽
- 이항 연산자 : 해당 연산의 실행을 위해서 두 개의 값이나 변수가 필요한 연산자
- 항이란 해당 연산의 실행이 가능하기 위해 필요한 값이나 변수를 의미
산술 연산자 설명
+ | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더함. |
- | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 뺌. |
* | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱함. |
/ | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 나눔. |
% | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 나눈 후, 나머지 반환. |
var x = 10, y = 4;
document.write(x + y + "<br>");
document.write(x - y + "<br>");
document.write(x * y + "<br>");
document.write(x / y + "<br>");
document.write(x % y);
결과
(Chrome 개발자 도구 사용과 document.write는 자바스크립트 기초 보고오기!)
연산자의 우선순위(operator precedence)와 결합 방향(associativity)
- 연산자의 우선순위는 수식 내에 여러 연산자가 함께 등장할 때, 어느 연산자가 먼저 처리될 것인가를 결정
- 다음 그림은 가장 높은 우선순위를 가지고 있는 괄호(()) 연산자를 사용하여 연산자의 처리 순서를 변경하는 것
- 연산자의 결합 방향은 수식 내에 우선순위가 같은 연산자가 둘 이상 있을 때, 먼저 어느 연산을 수행할 것인가를 결정
대입 연산자(assignment operator)
대입 연산자는 변수에 값을 대입할 때 사용하는 이항 연산자이며, 피연산자들의 결합 방향은 오른쪽에서 왼쪽
= | 왼쪽 피연산자에 오른쪽 피연산자의 값을 대입 |
+= | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더한 후, 그 결괏값을 왼쪽 피연산자에 대입 |
-= | 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺀 후, 그 결괏값을 왼쪽 피연산자에 대입 |
*= | *= 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱한 후, 그 결괏값을 왼쪽 피연산자에 대입 |
/= | /= 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 결괏값을 왼쪽 피연산자에 대입 |
%= | %= 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 나머지를 왼쪽 피연산자에 대입 |
var x = 10, y = 10, z = 10;
x = x - 5;
y -= 5; // y = y - 5 와 같은 표현임.
z =- 5; // z = -5 와 같은 표현임.
증감 연산자(increment and decrement operator)
- 증감 연산자는 피연산자를 1씩 증가 혹은 감소시킬 때 사용하는 연산자
- 피연산자가 단 하나뿐인 단항 연산자
- 해당 연산자가 피연산자의 어느 쪽에 위치하는가에 따라 연산의 순서 및 결과가 달라짐
++x | 먼저 피연산자의 값을 1 증가시킨 후에 해당 연산을 진행함. |
x++ | 먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 증가시킴. |
--x | 먼저 피연산자의 값을 1 감소시킨 후에 해당 연산을 진행함. |
x-- | 먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 감소시킴. |
var x = 10, y = 10;
document.write((++x - 3) + "<br>"); // x의 값을 우선 1 증가시킨 후에 3을 뺌.
document.write(x + "<br>"); // 11
document.write((y++ - 3) + "<br>"); // 먼저 y에서 3을 뺀 후에 y의 값을 1 증가시킴.
document.write(y); // 11
x = 10;
y = x-- + 5 + --x;
// x = 8, y = 23
비교 연산자(comparison operator)
- 피연산자 사이의 상대적인 크기를 판단하여, 참(true)과 거짓(false)을 반환
- 모두 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽
- 피연산자가 둘 다 숫자면, 해당 숫자를 서로 비교
- 피연산자가 둘 다 문자열이면, 문자열의 첫 번째 문자부터 알파벳 순서대로 비교
- 타입이 서로 달라 비교할 수 없는 경우에는 참의 조건을 충족 하지 못하므로, 언제나 거짓(false)만을 반환
== | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참을 반환함. |
=== | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같고, 같은 타입이면 참을 반환함. |
!= | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않으면 참을 반환함. |
!== | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않거나, 타입이 다르면 참을 반환함. |
> | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크면 참을 반환함. |
>= | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크거나 같으면 참을 반환함. |
< | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작으면 참을 반환함. |
<= | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작거나 같으면 참을 반환함. |
var x = 3, y = 5;
var a = "abc", b = "bcd";
document.write((x > y) + "<br>"); // y의 값이 x의 값보다 크므로 false
document.write((a <= b) + "<br>"); // 알파벳 순서상 'a'가 'b'보다 먼저 나오므로 'a'가 'b'보다 작음.
document.write(x < a); // x의 값은 숫자이고 a의 값은 문자열이므로 비교할 수 없음.
동등 연산자와 일치 연산자
- 동등 연산자(==, equal)와 일치 연산자(===, strict equal)는 모두 두 개의 피연산자가 서로 같은지를 비교
- 동등 연산자(==)는 두 피연산자의 값이 서로 같으면 참(true)을 반환
- 이때 두 피연산자의 타입이 서로 다르면, 비교를 위해 강제로 타입을 같게 변환
- 하지만 일치 연산자(===)는 타입의 변환 없이 두 피연산자의 값이 같고, 타입도 같아야만 참(true)을 반환
var x = 3, y = '3', z = 3;
document.write((x == y) + "<br>"); // x와 y의 타입이 서로 다르므로 타입을 서로 같게 한 후 비교를 하므로 true
document.write((x === y) + "<br>"); // x와 y의 타입이 서로 다르므로 false
논리 연산자(logical operator)
- 논리 연산자는 주어진 논리식을 판단하여, 참(true)과 거짓(false)을 반환합니다.
- && 연산자와 || 연산자는 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽
- ! 연산자는 피연산자가 단 하나뿐인 단항 연산자이며, 피연산자의 결합 방향은 오른쪽에서 왼쪽
&& | 논리식이 모두 참이면 참을 반환함. (논리 AND 연산) |
|| | 논리식 중에서 하나라도 참이면 참을 반환함. (논리 OR 연산) |
! | 논리식의 결과가 참이면 거짓을, 거짓이면 참을 반환함. (논리 NOT 연산) |
문자열 결합 연산자
- 덧셈(+) 연산자는 피연산자의 타입에 따라 두 가지 다른 연산을 수행
- 피연산자가 둘 다 숫자이면, 산술 연산인 덧셈을 수행
- 피연산자가 하나라도 문자열이면, 문자열 결합을 수행
- 피연산자가 하나는 문자열이고 다른 하나는 문자열이 아닐 때, 자바스크립트는 문자열이 아닌 피연산자를 자동으로 문자열로 변환한 후 문자열 결합을 수행
var x = 3 + 4; // 피연산자가 둘 다 숫자이면 덧셈 연산을 수행함.
var y = "좋은 " + "하루 되세요!" // 피연산자가 둘 다 문자열이면 문자열 결합 연산을 수행함.
var z = 12 + "월" // 피연산자가 하나라도 문자열이면 문자열 결합 연산을 수행함.
삼항 연산자(ternary operator)
- 피연산자를 세 개나 가지는 조건 연산자
- 물음표(?) 앞의 표현식에 따라 결괏값이 참이면 반환값1을 반환하고, 결괏값이 거짓이면 반환값2를 반환
- 삼항 연산자는 짧은 if / else 문 대신 사용할 수 있으며, 코드를 간결하게!
표현식
? 반환값1 : 반환값2
var x = 3, y = 5;
var result = (x > y) ? x : y // x가 더 크면 x를, 그렇지 않으면 y를 반환
document.write("둘 중에 더 큰 수는 " + result + "");
delete 연산자
- 피연산자인 객체, 객체의 프로퍼티(property) 또는 배열의 요소(element) 등을 삭제
- 피연산자가 성공적으로 삭제되었을 경우에는 참(true)을 반환하고, 삭제하지 못했을 경우에는 거짓(false)을 반환
- 이 연산자는 피연산자가 단 하나뿐인 단항 연산자이며, 피연산자의 결합 방향은 오른쪽에서 왼쪽
var arr = [1, 2, 3]; // 배열 생성
delete arr[2]; // 배열의 원소 중 인덱스가 2인 요소를 삭제함.
document.write(arr + "<br>"); // [1, 2, ]
// 배열에 빈자리가 생긴 것으로 undefined 값으로 직접 설정된 것은 아님.
document.write(arr[2] + "<br>");
// 배열의 요소를 삭제하는 것이지 배열의 길이까지 줄이는 것은 아님.
document.write(arr.length);
typeof 연산자
- 피연산자의 타입을 반환
- 피연산자가 단 하나뿐인 단항 연산자이며, 피연산자의 결합 방향은 오른쪽에서 왼쪽
- 값 : typeof 연산자의 결괏값
typeof "문자열" // string
typeof 10 // number
typeof NaN // number
typeof false // boolean
typeof undefined // undefined
typeof new Date() // object
typeof null // object
instanceof 연산자
- 피연산자인 객체가 특정 객체의 인스턴스인지 아닌지를 확인
- 피연산자가 특정 객체의 인스턴스이면 참(true)을 반환하고, 특정 객체의 인스턴스가 아니면 거짓(false)을 반환
- 이 연산자는 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽
var str = new String("이것은 문자열");
str instanceof Object; // true
str instanceof String; // true
str instanceof Array; // false
str instanceof Number; // false
str instanceof Boolean; // false
Reference
https://www.tcpschool.com/javascript/js_operator_arithmetic
728x90
반응형
'IT > Javascript' 카테고리의 다른 글
Javascript 반복문 사용법 (0) | 2023.04.14 |
---|---|
Javascript 조건문 if, switch case, 삼항연산자 (2) | 2023.04.13 |
Javascript var, let, const 변수 선언 (2) | 2023.03.29 |
Javascript 타입 종류 (1) | 2023.03.24 |
Javascript 자바스크립트 들어가기 전 기초 (1) | 2023.03.23 |