호쌤
호쌤 Just For Fun

[JS] 연산자

크리에이티브 커먼즈 라이선스 ITPAPER(호쌤,쭈쌤)에 의해 작성된 ≪[JS] 연산자≫은(는) 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.
이 라이선스의 범위 이외의 이용허락을 얻기 위해서는 leekh4232@gmail.com으로 문의하십시오.

[JS] 연산자

변수를 활용하여 각종 연산을 수행하는데 사용되는 특수 기호들을 연산자라고 합니다.

#01. 산술연산자(사칙연산자)

연산자 설명
+ 덧셈
- 뺄셈
* 곱셈
/ 나눗셈
% 나눗셈에서의 정수 부분의 몫을 제외한 나머지

1) 일반적인 산술연산

1
2
3
4
5
let a = 5;
let b = 3;
console.log(a + b);
console.log(a - b);
console.log(a * b);
▶ 출력결과
1
2
3
8
2
15

2) 연산의 결과를 다른 변수에 할당하기

1
2
let c = a + b - 2;
console.log(c);
▶ 출력결과
1
6

3) 나눗셈에서의 주의사항

실수 타입의 몫

몫이 소수점까지 갖는 경우 연산할 수 있는 최대한의 자리수까지 연산을 수행한다.

1
2
3
let myValue1 = 10;
let myValue2 = 4;
console.log(myValue1 / myValue2);
▶ 출력결과
1
2.5

나누어 떨어지지 않는 경우

가능한 범위 안에서 최대한의 소수점 자리수까지 연산을 수행하다가 중지한다.

1
2
3
let myValue3 = 4;
let myValue4 = 3;
console.log(myValue3 / myValue4);
▶ 출력결과
1
1.3333333333333333

4) 문자열을 포함하는 덧셈

문자열끼리의 덧셈

문장을 하나로 병합한다.

1
2
3
let myString1 = "Hello";
let myString2 = "World";
console.log(myString1 + myString2)
▶ 출력결과
1
HelloWorld

문자열과 다른 타입의 덧셈

문자열 이외의 값들을 모두 문자열로 취급하여 덧셈을 수행한다. 즉, 문자열끼리의 연결과 같은 결과를 갖는다.

1
2
3
console.log("안녕하세요." + 123);
console.log("안녕하세요." + true);
console.log("안녕하세요." + null);
▶ 출력결과
1
2
3
안녕하세요.123
안녕하세요.true
안녕하세요.null

#02. 대입 연산자.

좌변에 우변을 대입한다는 의미의 = 연산자.

이미 앞에서 많이 사용한 기호이다.

1) 연산 결과를 새로운 변수에 대입하기

1
2
3
4
let myNumber1 = 123;
let myNumber2 = 234;
let myResult = myNumber1 + myNumber2;
console.log(myResult);
▶ 출력결과
1
357

2) 이미 생성된 변수의 값을 다른 값으로 변경하기

1
2
3
4
myNumber1 = 200;
myNumber2 = 300;
console.log(myNumber1);
console.log(myNumber2);
▶ 출력결과
1
2
200
300

3) 연산 결과를 변수 스스로에게 덮어 씌우기

1
2
3
let selfValue = 300;
selfValue = selfValue + 100;
console.log(selfValue);
▶ 출력결과
1
400

4) 변수 스스로에 대한 연산 축약표현

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let shortValue = 100;

shortValue += 10;
console.log(shortValue);

shortValue -= 30;
console.log(shortValue);

shortValue *= 2;
console.log(shortValue);

shortValue /= 5;
console.log(shortValue);

shortValue %= 10;
console.log(shortValue);
▶ 출력결과
1
2
3
4
5
110
80
160
32
2

#03. 단항연산자 (증감연산자)

1) 변수 스스로에 대한 1증가 처리

1
2
3
4
5
6
7
8
let selfPlus = 1;
console.log(selfPlus);

selfPlus++;
console.log(selfPlus);

++selfPlus;
console.log(selfPlus);
▶ 출력결과
1
2
3
1
2
3

2) 변수 스스로에 대한 1감소 처리

1
2
3
4
5
6
7
8
let selfMinus = 1;
console.log(selfMinus);

selfMinus--;
console.log(selfMinus);

--selfMinus;
console.log(selfMinus);
▶ 출력결과
1
2
3
1
0
-1

3) 전위 증감 연산자

++, -- 연산자가 독립적으로 사용되는 경우는 위치에 상관 없이 결과가 동일하지만, 다른 수식에 포함된 상태로 사용되는 경우 위치에 따라 결과값이 달라진다.

연산자가 앞에 위치한 경우 (앞북)

증감연산자가 앞에 위치한 경우 변수 스스로의 값에 대해 증가, 감소를 먼저 수행한 후 전체 수식을 연산한다.

1
2
3
4
5
6
7
let prevValue = 1;

// prevValue를 먼저 1 증가 시키고 전체 수식을 처리한다.
let prevResult = 100 + ++prevValue;

console.log(prevResult);
console.log(prevValue);
▶ 출력결과
1
2
102
2

연산자가 뒤에 위치한 경우 (뒷북)

변수에 대한 증감연산자가 작용하기 전에 전체 수식을 먼저 처리한 다음 나중에서야 증감 연산자가 수행된다.

1
2
3
4
5
6
7
let nextValue = 1;

// 100+nextValue를 먼저 처리하고 나중에서야 nextValue가 1 증가한다.
let nextResult = 100 + nextValue++;

console.log(nextResult);
console.log(prevValue);
▶ 출력결과
1
2
101
2

4) NOT 연산자

느낌표 !를 사용하여 논리형 값 true, false를 부정하여 반대의 결과를 만들어 내는 연산자.

논리값에 대한 NOT 연산

1
2
3
let success = true;
let fail = !success;
console.log(fail);
▶ 출력결과
1
false

숫자값에 대한 NOT 연산

0은 false으로 식별되고 0이 아닌 모든 수는 true로 식별된다.

0이 아닌 수에 대한 NOT 처리
1
2
let k = 1;
console.log(!k);
▶ 출력결과
1
false
0에 대한 NOT 처리
1
2
let l = 0;
console.log(!l);
▶ 출력결과
1
true

문자열에 대한 NOT 연산

빈 문자열("")은 false로 식별되고 한 글자라도 포함된 문자열은 true로 식별된다.

빈 문자열에 대한 NOT 처리
1
2
let str1 = "";
console.log(!str1);
▶ 출력결과
1
true
내용이 있는 문자열에 대한 NOT 처리
1
2
let str2 = "Hello World";
console.log(!str2);
▶ 출력결과
1
false

#04. 비교 연산자

두 값간의 크기를 비교하는 식에 대한 , 거짓을 판별한다.

1) 이상(>=), 초과(>), 이하(<=), 미만(<)

1
2
3
4
5
6
7
8
9
10
11
12
let x = 100;
let y = 50;

let compare1 = x >= y;  // 이상
let compare2 = x > y;   // 초과
let compare3 = x <= y;  // 이하
let compare4 = x < y;   // 미만

console.log(compare1);
console.log(compare2);
console.log(compare3);
console.log(compare4);
▶ 출력결과
1
2
3
4
true
true
false
false

2) 같다(==, ===), 다르다(!=, !==)

두 값이 같음을 비교

1
2
3
4
5
6
7
8
let a1 = 1;
let a2 = 2;
let a3 = 2;

console.log(a1 == a2);   // 두 값이 다르므로 결과는 false
console.log(a2 == a3);   // 두 값이 같으므로 결과는 true
console.log(a1 === a2);  // 두 값이 다르므로 결과는 false
console.log(a2 === a3);  // 두 값이 같으므로 결과는 true
▶ 출력결과
1
2
3
4
false
true
false
true

두 값이 다름을 비교

1
2
3
4
console.log(a1 != a2);   // 두 값이 다르므로 결과는 true
console.log(a2 != a3);   // 두 값이 같으므로 결과는 false
console.log(a1 !== a2);  // 두 값이 다르므로 결과는 true
console.log(a2 !== a3);  // 두 값이 같으므로 결과는 false
▶ 출력결과
1
2
3
4
true
false
true
false

=====의 차이

내용을 비교

==는 값의 내용만을 비교하므로 문자열 "1"과 숫자 1을 같다고 판단한다.

1
2
console.log(1 == "1");  // 숫자 1과 문자열 1을 같다고 판단함
console.log(true == 1); // 0이 아닌 모든 수는 true 이므로 같다고 판단함.
▶ 출력결과
1
2
true
true

데이터 타입까지 비교

===는 값의 내용 뿐만 아니라 데이터 타입까지 동일해야만 true로 판단하기 때문에 문자열 "1"과 숫자 1을 다르다고 판단한다.

자바스크립트의 비교 연산자는 ===, !==를 더 권장합니다.

1
2
console.log(1 === "1");
console.log(true === 1);
▶ 출력결과
1
2
false
false

#05. 논리 연산자

두 개의 논리값(true 혹은 false)간에 AND(&&), OR(||) 연산을 수행한다.

1) AND 연산자

두 개의 연산에 사용되는 모든 값이 true인 경우만 결과가 true이고 그 외의 경우는 모든 결과가 false

&& true false
true true false
false false false
1
2
3
4
console.log(true && true);
console.log(true && false);
console.log(false && true);
console.log(false && false);
▶ 출력결과
1
2
3
4
true
false
false
false
1
2
3
4
console.log(true && true && true);
console.log(true && true && false);
console.log(false && false && true);
console.log(false && true && true);
▶ 출력결과
1
2
3
4
true
false
false
false

2) OR 연산자

두 개의 연산에 사용되는 값중에서 하나라도 true라면 결과가 true이고 모든 값이 false인 경우만 결과가 false

**   ** true false
true true true    
false true false    
1
2
3
4
console.log(true || true);
console.log(true || false);
console.log(false || true);
console.log(false || false);
▶ 출력결과
1
2
3
4
true
true
true
false
1
2
3
4
5
console.log(true || true || true);
console.log(true || true || false);
console.log(false || false || true);
console.log(false || true || true);
console.log(false || false || false);
▶ 출력결과
1
2
3
4
5
true
true
true
true
false

#06. 삼항 연산자

조건식 ? 참인경우 : 거짓인경우 의 형태로 세 개의 항으로 이루어진 연산자.

조건에 따라 반환되는 값이 선택적으로 결정된다.

연산 결과를 직접 출력하기

1
console.log( 10 > 5 ? "10은 5보다 큽니다." : "10은 5보다 크지 않습니다.");
▶ 출력결과
1
10은 5보다 큽니다.

연산 결과를 다른 변수에 대입하기

1
2
3
4
let foo = 123;
let bar = 234
let conditionValue = foo === bar ? foo + bar : foo - bar;
console.log(conditionValue);
▶ 출력결과
1
-111

#07. 연산자 우선 순위

순위 연산자 타입
1 () 괄호로 묶여 있는 수식
2 !, ++, --, typeof 부정, 증가, 감소, 형식 검사
3 *, /, % 곱셈, 나눗셈, 나머지
4 +, - 덧셈, 뺄셈
5 <, <=, >, >= 크기 비교
6 ==, ===, !=, !== 같거나 다름을 비교
7 && AND
8 || OR
9 ?: 삼항연산자
10 =, +=, -=, *=, /=, %= 할당

크리에이티브 커먼즈 라이선스 ITPAPER(호쌤,쭈쌤)에 의해 작성된 ≪[JS] 연산자≫은(는) 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.
이 라이선스의 범위 이외의 이용허락을 얻기 위해서는 leekh4232@gmail.com으로 문의하십시오.

comments powered by Disqus