02. JavaScript - 연산자

박지윤·2023년 9월 1일
0

JavaScript

목록 보기
2/13

연산자

연산자란 각 연산에 사용되는 기호를 의미한다. 연산자의 종류로는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자, 문자열 연산자 등이 있다.

1. 산술 연산자

산술연산자란 수식을 계산할 수 있도록 도와주는 연산자를 말한다.
기본적으로 사칙 연산자, 나머지 연산자, 증감 연산자가 이 산술 연산자에 포함된다.


let a = 5;
let b = 4;
let c = "Hello ";
let d = "World!";

console.log(a + b); // 9
console.log(c + d); // Hello World! 문자열도 결합시켜줌 (-, *, /는 NaN 뜸!)
console.log(c + a + b);//Hello54   어느 위치에든 문자열이 끼어있을 경우 숫자연산x 
console.log(a + b + c); //54Hello  데이터 타입도 string으로 변환됨

1) 산술 연산자의 종류

연산자이름
+더하기a + b
-빼기a - b
*곱하기a * b
/나누기a / b
%나머지a % b
++증가 (1씩 증가)++a, a++
--감소 (1씩 감소)--b, b--
**지수a ** b

2) ++a와 a++의 차이

let a = 5
let b = a++ + 5;
console.log(a); // 6
console.log(b); // 10

let c = 5
let d = ++c + 5;
console.log(c); // 6
console.log(d); // 11

++a와 a++ 둘 다 숫자를 증가를 시켜주는 연산자이다. 하지만, 증가하는 순서에서 차이를 보인다.
++a의 경우 그 자리에서 1이 증가하지만, a++의 경우 전체 수식을 처리한 뒤 증가한다.
감소 연산자도 마찬가지로 --b는 그 자리에서 감소하고, b++는 전체 수식을 처리한 뒤 감소한다.



2. 대입 연산자

대입 연산자란 변수에 값을 할당할 때 사용하는 연산자로 자바스크립트에서 가장 많이 사용하는 연산자이다. 산술 연산자와 조합하여 사용하는 것도 가능하다.

let a = 5;
a += 10;
console.log(a); // 15

let b = "<h1>";
b += "hello";
b += "</h1>";
console.log(b); //<h1>hello</h1>

1) 대입 연산자의 종류

연산자의미
=a = ba = b
+=a += ba = a + b
-=a -= ba = a - b
*=a *= ba = a * b
/=a /= ba = a / b
%=a %= ba = a % b
**=a **= ba = a ** b



3. 비교 연산자

비교 연산자는 데이터를 비교할 때 사용하는 연산자이다. 연산된 값의 결과는 true와 false로 반환된다.

let a = 10;
let b = 5;
let c = "5";
let d = "05";
let e = "10";
let f = "apple";
let g = "banana";

console.log(a > b);   // true
console.log(a < b);   // false
console.log(a == b);  // true : 값이 같아서 true
console.log(a === b); // false: 값은 같지만, 데이터 타입이 달라서 false
console.log(c < e);   // false: 문자열끼리도 비교 가능. 맨 앞자리부터 비교. 5가 1보다 크니까 false
console.log(d < e);   // true: 0이 1보다 작으니까 true
console.log(d > e)    // false: 영어의 경우 알파벳 순서가 뒤로 갈 수록 큰 값 

1) 비교 연산자의 종류

연산자설명
a > ba가 b보다 크다
a < ba가 b보다 작다
a >= ba가 b보다 크거나 같다
a <= ba가 b보다 작거나 같다
a == ba와 b는 같다 (값만 같으면 true)
a === ba와 b는 같다 (값과 타입이 모두 같아야 true)
a != ba와 b는 다르다 (값만 다르면 true)
a !== ba와 b는 다르다 (값과 타입이 모두 달라야 true)



4. 논리 연산자

let a = 10;
let b = 5;
let c = 20;

console.log((a > b) && (b > c)); // false
console.log((a < b) && (b < c)); // true
console.log((a > b) || (b > c));  // true
console.log((a > b) || (b < c)); // true
console.log(!(a > b)); // false: a > b는 true지만, 앞에 not 연산자가 붙어 false

1) 비교 연산자의 종류

연산자설명
&& (and)a && ba와 b가 모두 true여야만 true
하나라도 false면 false
|| (or)a || ba와 b가 하나라도 true면 true
모두 다 false면 false
! (not)! aa가 true면 false
a가 false면 true



5. 문자열 연산자

let name = "Olivia";
let like = "piano";
let birthMonth = 12;
let birthDay = 25;
console.log("name: " + name); // name: Olivia 
console.log("like: " + like); // like: piano
console.log("birth: " + birthMonth + "/" + birthDay); //birth: 12/25
console.log(birthMonth + birthDay); // 37

문자열 연산자는 문자열을 하나로 이어줄 때 사용하는 연산자이다. 연산자 기호는 +이다.
만약 변수에 담긴 값이 문자형이 아닌 숫자형일 경우 자바스크립트가 +를 산술 연산자로 인식하기 때문에 주의해야 한다.

profile
프론트엔드 개발 및 실무 프로젝트 구현과정 수료

0개의 댓글