연산자(Operator) - javascript 기본

연산자(Operator)

1. 산술(Arithmetic) 연산자

+, -, *, /, %

// 덧셈 연산자
console.log(1 + 2); // 3

// 뺄셈 연산자
console.log(5 - 7); // -2

// 곱셈 연산자
console.log(3 * 4); // 12

// 나눗셈 연산자
console.log(10 / 2); // 5

// 나머지 연산자
console.log(7 % 5); // 2

function isEven(num) {
    return num % 2 === 0;
}

console.log(isEvent(3)); // false
console.log(isEvent(4)); // true

2. 할당(Assignment) 연산자

a = b

const a = 1;

console.log(a); // 1

let aa = 1;

aa += 3; // aa = aa + 3

console.log(aa); // 4

// -, *, /, % 실습

3. 증감(Increment & Decrement) 연산자

- 증가 연산사

a++, ++a

let b = 1;

// b = b + 1;
console.log(b++); // 1 선출력 후연산
console.log(++b); // 2 선연산 후출력
console.log(b); // 2

- 감소 연산자

b--, --b

let c = 1;

// c = c - 1;
console.log(c--); // 1 : 선출력 후연산
console.log(--c); // 0 : 선연산 후출력
console.log(c); // 0

4. 부정(Negation) 연산자

!a

해당 데이터의 반대인 boolean 데이터를 출력한다.

console.log(!true); // false
console.log(!false); // true
console.log(!0); // true
console.log(!1); // false
console.log(!!0); // false

console.log(![]); // false
console.log(!{}); // false
console.log(!function () {}); // false

5. 비교(Comarison) 연산자

a === b, a!==b, a > b, a <= b

const d = 1;
const e = 3;

// 동등 (형 변환 O)
console.log(d == e); // false

// 부동 (형 변환 O)
console.log(d != e); // true

// 일치 (형 변환 X)
console.log(d === e); // false

// 불일치 (형 변환 X)
console.log(d !== e); // true

// 크다
console.log(d > e); // false

// 크거나 같다
console.log(d >= e); // false

// 작다
console.log(d < e); // true

// 작거나 같다
console.log(d <= e); // true

6. 논리(Logical) 연산자

논리 연산자는 참과 거짓을 반환한다.

- AND(그리고) 연산자

a && b

• 데이터가 둘 다 참이면 true 반환
• 연산자를 기준으로 가장 먼저 만나는 거짓 데이터 반환

const f = true
const g = true

if(f && g){
  console.log('둘다 참이면 실행됩니다.')
}

** 주의 **
// 연산자를 기준으로 가장 먼저 만나는 거짓 데이터가 반환된다.
console.log(true && false) // false : 거짓데이터 반환
console.log(1 && 0) // 0 : 거짓데이터 반환
console.log(1 && 2 && 0) // 0
console.log(1 && 0 && 2) // 0 : 거짓데이터 반환 후 종료
console.log('A' && 'B' && '') // <empty string>
console.log('A' && 'B' && 'C') // C : 모두가 참이라면 마지막 데이터가 반환

- OR(또는) 연산자

a || b

• 데이터가 둘중 하나만 참이면 true 반환
• 연산자를 기준으로 가장 먼저 만나는 참 데이터 반환

const h = false
const i = true

if(h || i) {
    console.log('둘중 하나만 참이면 실행됩니다.')
}

** 주의 **
// 연산자를 기준으로 가장 먼저 만나는 참 데이터가 반환된다.
console.log(false || true) // true
console.log(0 || 1) // 1
console.log(false || 0 || {}) // 빈 객체데이터는 참이기 때문에 {} 반환
console.log(false || [] || null) // 빈 배열은 참이기 때문에 [] 반환 후 종료
console.log(function () || undefined || '') // 함수 데이터는 참이기 때문에 f () {} 반환 후 종료
console.log(false || 0 || NaN) // 모두가 거짓이라면 마지막 데이터가 반환

7. 병합(Nullish Coalescing) 연산자

a ?? b

- or 연산자를 사용

• or 연산자를 사용한 경우 처음으로 만나는 truthy 값을 반환한다.

const m = 0;

const num1 = m || 5;
console.log(num1); // 5
// or 연산자를 사용한 경우 처음으로 만나는 truthy 값을 반환한다.
// 0은 false로 평가되므로 5가 반환된다.
// 하지만 숫자 0의 데이터를 사용하고 싶을 땐??

- Nullish 병합 연산자를 사용

• ?? 연산자를 사용한 경우 null 또는 undefined는 무시하고 그 외의 값만 사용된다.

const m = 0;

const num2 = m ?? 5;
console.log(num2); // 0
// ?? 연산자를 사용한 경우 null 또는 undefined는 무시하고 그 외의 값만 사용된다.
// 0은 falsy 값이지만 null 또는 undefined가 아니므로 0이 반환된다.

- ex

console.log(null ?? 1); // 1
console.log(undefined ?? 1); // 1
console.log(null ?? undefined); // undefined
console.log(null ?? 1 ?? 2); // 1
console.log(0 ?? 1 ?? 2); // 0

8. 삼항(Ternary) 연산자

조건 ? 참 : 거짓

console.log(true ? 1 : 2); // 1
console.log(false ? 1 : 2); // 2

- if문 표현

const p = 1;

if (p < 3) {
    console.log('참!!'); // 참!!
} else {
    console.log('거짓'); // 거짓
}

- 삼항 연산자 표현

• 위의 코드를 삼항 연산자로 표현하면 다음과 같다.

console.log(p < 3 ? '참!!' : '거짓'); // 참!!

ex

function isAnimal(text) {
    return text === '고양이' ? '고양이' : '고양이 아님';
}

console.log(isAnimal('고양이')); // 고양이
console.log(isAnimal('개')); // 고양이 아님

9. 전개(Spread) 연산자

...a, ...b

- 배열의 전개

const q = [1, 2, 3];
const r = [4, 5, 6];

const s = q.concat(r); // concat 메서드 사용
console.log(s); // [ 1, 2, 3, 4, 5, 6 ]

const t = [...q, ...r]; // 전개 연산자
console.log(t); // [ 1, 2, 3, 4, 5, 6 ]

- 객체의 전개

const dog = {
    name: '멍멍이',
};
const dogInfo = {
    ...dog,
    age: 2,
};
console.log(dogInfo); // { name: '멍멍이', age: 2 }

- 함수의 인자에서의 전개

function sum(a, b, c) {
    console.log(a + b + c);
}

sum(1, 2, 3); // 6

// 배열 데이터를 인자로 전달하려면?
const num = [1, 2, 3];
sum(num[0], num[1], num[2]); // 6 (기존 방식)

// 전개 연산자를 사용하면?
sum(...num); // 6