1. 산술 연산자
| 종류 | 설명 | 예시 |
| + | 두 피연산자의 값을 더함 | c = a + b |
| - | 첫 번째 피연산자 값에서 두 번째 피연산자 값을 뺌 | c = a - b |
| * | 두 피연산자의 값을 곱함 | c = a * b |
| / | 첫 번째 피연산자 값을 두 번째 피연산자 값으로 나눔 | c = a / b |
| % | 첫 번째 피연산자 값을 두 번째 피연산자 값으로 나눈 나머지를 구함 | c = a % b |
| ++ | 피연산자를 1 증가 | a++ / ++a |
| -- | 피연산자를 1 감소 | b-- / --b |
+, -, * , / 연산 예시
<script>
const num1 = 20;
const num2 = 10;
const score1 = num1 + num2;
const score2 = num1 - num2;
const score3 = num1 * num2;
const score4 = num1 / num2;
console.log(score1 + ',' + score2 + ',' + score3 + ',' + score4);
// 30, 10, 200, 2
</script>
% 연산 예시
<script>
const evenOdd = 2;
const result = evenOdd % 2;
let comment; // const는 선언과 동시에 초기화 해야 함
if (result === 0) {
comment = evenOdd + '는(은) "짝수" 입니다.';
}else {
comment = evenOdd + '는(은) "홀수" 입니다.';
}
console.log(comment); // 2는(은) "짝수" 입니다.
// 삼항 연산자를 사용하면 선언과 동시에 초기화 가능
const comment2 = (result === 0) ? evenOdd +'는(은) "짝수" 입니다.'
: evenOdd + '는(은) "홀수" 입니다.';
console.log(comment2); // 2는(은) "짝수" 입니다.
</script>
💡 증감 연산자
a++ : 기존의 변수 값에 1을 더함. 후위.
++a : 기존의 변수 값에 1을 더함. 전위.
a-- : 기존의 변수 값에 1을 뺌. 후위.
--a : 기존의 변수 값에 1을 뺌. 전위.
<script>
let num1 = 10;
num1++;
document.write(num1); // 11
// 후위 : 해당 문장을 실행한 후 값을 더함.
let num2 = 10;
document.write(num2++); // 10
document.write(num2++); // 11
// 전위 : 값을 더한 후 해당 문장을 실행
let num3 = 10;
document.write(++num3); // 11
document.write(++num3); // 12
</script>
<script>
/* 응용 예시 */
var increase = 0;
var add = 0;
++increase;
console.log(increase); // 1
increase++;
console.log(increase); // 2
add = ++increase; // 3
console.log(add + ',' + increase); // 3, 3
add = increase++;
console.log(add + ',' + increase); // 3, 4
</script>
2. 복합대입연산자
✏️ 대입 연산자(=)와 다른 연산자를 함께 사용하는 연산자
| 종류 | 설명 |
| = | 연산자 오른쪽의 값을 왼쪽 변수에 할당 |
| += | a += 1 ▶️ a = a + 1 |
| -= | a -= 1 ▶️ a = a - 1 |
| *= | a *= 1 ▶️ a = a * 1 |
| /= | a /= 1 ▶️ a = a / 1 |
| %= | a %= 1 ▶️ a = a % 1 |
<script>
let value = 10;
value += 10; // value = value + 10;
document.write(value); // 20
// 복합 대입 연산자를 사용해서 문자열을 조합
let list = '';
list += '<ul>';
list += ' <li>Hello</li>';
list += ' <li>javaScript..!</li>';
list += '</ul>';
document.write(list);
</script>
3. 비교 연산자
| 종류 | 설명 | 예시 | |
| 조건식 | 결과값 | ||
| == | 피연산자가 서로 같으면 true | 3 == "3" | true |
| === | 피연산자도 같고 자료형도 같으면 true | a === "3" | false |
| != | 피연산자가 서로 같지 않으면 true | 3 != "3" | false |
| !== | 피연산자가 같지 않거나 자료형이 같지 않으면 true | 3 !== "3" | true |
| < | 왼쪽 피연산자가 오른쪽 피연산자보다 작으면 true | 3 < 4 | true |
| <= | 왼쪽 피연산자가 오른쪽 피연산자보다 작거나 같으면 true | 3 <= 4 | true |
| > | 왼쪽 피연산자가 오른쪽 피연산자보다 크면 true | 3 > 4 | false |
| >= | 왼쪽 피연산자가 오른쪽 피연산자보다 크거나 같으면 true | 3 >= 4 | false |
<script>
const comparison1 = (5 > 2);
console.log(comparison1); // true
const comparison2 = (5 < 2);
console.log(comparison2); // false
const comparison3 = (5 == 5);
console.log(comparison3); // true
const comparison4 = (5 == '5');
console.log(comparison4); // true
const comparison5 = (5 === '5');
console.log(comparison5); // false
const comparison6 = (5 != '5');
console.log(comparison6); // false
const comparison7 = (5 !== '5');
console.log(comparison7); // true
const comparison8 = (5 === Number('5'));
console.log(comparison8); // true
</script>
💡 문자열 비교
- 비교 연산자는 숫자뿐만 아니라 문자열도 서로 비교 가능
- 문자들의 아스키 ASCII 값을 비교해서 결정
- 대문자 < 소문자 / 내림차순 값이 더 크다
4. 논리 연산자
✏️ boolean 연산자라고도 하며 true, false를 처리하는 연산자
| 종류 | 기호 | 설명 |
| OR 연산자 | || | 피연산자 중 하나면 true여도 true |
| AND 연산자 | && | 피연산자가 모두 true일 경우에만 true |
| NOT 연산자 | ! | 피연산자의 반댓값을 지정 |
<script>
let logic1, logic2, logic3, logic4, logic5, logic6;
logic1 = (3 > 2) && (5 > 3);
console.log(logic1); // true
logic2 = (3 < 2) && (5 > 3);
console.log(logic2); // false
logic3 = (3 > 2) || (5 > 3);
console.log(logic3); // true
logic4 = (3 < 2) || (5 < 3);
console.log(logic4); // false
logic5 = !(3 < 2);
console.log(logic5); // true
logic6 = !(3 > 2);
console.log(logic6); // false
</script>
5. 삼항 연산자
✏️ 조건식의 결과(true, false)에 따라 결과 값을 다르게 나오게 해주는 연산자
✏️ 형식 [ 조건식 ? 실행문1 : 실행문2; ]
✏️ 조건식이 true 일 때는 실행문1, false 일 때는 실행문2가 실행됨
<script>
let num1 = 10;
let num2 = -10;
console.log(num1 > 0 ? '양수' : '음수'); // 양수
console.log(num2 > 0 ? '양수' : '음수'); // 음수
let num3 = 31;
let type = num3 % 2 === 0 ? '짝수' : '홀수';
console.log(`${num3}는 ${type}입니다.`); // 31는 홀수입니다.
// 템플릿 문자열을 사용해서 직접 코드를 넣는 방법도 추천
let num4 = 32;
console.log(`${num4}는 ${num4 % 2 === 0 ? '짝수' : '홀수'}입니다.`); // 32는 짝수입니다.
// 숫자 0은 false, 나머지 숫자는 true.
console.log(`${num4}는 ${num4 % 2 ? '홀수' : '짝수'}입니다.`); // 32는 짝수입니다.
</script>
[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]
'Programming Language > JavaScript' 카테고리의 다른 글
| [JavaScript] 반복문 | for문, while문, break문, continue문 (0) | 2024.03.28 |
|---|---|
| [JavaScript] if 조건문 (if-else & else-if), switch 문 (1) | 2024.03.28 |
| [JavaScript] var 변수, let과 const (1) | 2024.03.27 |
| [JavaScript] 기본 문법 | 변수, 자료형 및 자료형 검사, 자료형 변환 (0) | 2024.03.27 |
| [JavaScript] 자바스크립트 태그, 용어와 기본 입출력 방법 (0) | 2024.03.26 |
