🌈 연산자
1. 연산자 종류
- 수학연산자, 증감연산자, 할당연산자, 비교연산자, 논리연산자, 동등연산자 등
1) 사칙 연산자
덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/), 몫(//), 나머지(%), 거듭제곱(**)// 이항연산자 '+'와 문자열 연결 let s = "my" + "string"; alert(s); // mystring // 덧셈에서 문자열에 있으면 문자로 연결됨 alert( '1' + 2 ); // "12" alert( 2 + '1' ); // "21" // 덧셈에서 숫자끼리 만났을 때는 덧셈이 되지만, 문자열을 만나면 합쳐짐 alert(2 + 2 + '1' ); // '221'이 아니라 '41'이 출력됩니다. // 뺄셈, 나눗셈, 곱셈에서는 문자형을 숫자형으로 자동 변환된 후 연산이 이뤄짐 alert( 6 - '2' ); // 4 alert( '6' / '2' ); // 3, 두 피연산자가 숫자로 바뀐 후 연산이 진행됩니다.
2) 증감연산자
- 숫자를 순차적으로 증가시키거나 감소시키는 것이 증감연산자임
- 증감연사자는 전위형과 후위형으로 나뉨
- 전위형(++변수 또는 --변수)은 자신의 값을 증가 또는 감소 시킨 뒤 값을 변수에 할당
- 후위형(변수++ 또는 변수--)은 변수에 먼저 할당시킨 뒤, 자신을 증가 또는 감소 시킴
// 1씩 증가 let counter = 2; counter++; // counter = counter + 1과 동일하게 동작함 alert( counter ); // 3 // 1씩 감소 let counter = 2; counter--; // counter = counter - 1과 동일하게 동작함 alert( counter ); // 1// 증감연산자 전위형 // counter를 먼저 증가시킨 뒤, 증가된 값을 반환하여 할당함 let counter = 1; let a = ++counter; console.log(counter) // 2 console.log(a); // 2 // 증감연사자 후위형 // count를 먼저 할당한 뒤, 자신을 증가시킴 let counter = 1; let a = counter++; // (*) ++counter를 counter++로 바꿈 console.log(counter); // 2 console.log(a); // 1 // 전위형 vs 후위형 예제 let counter = 2; // 초기 counter 2로 선언 const preIncrement = ++counter; console.log(`preIncrement: ${preIncrement}, counter: ${counter}`); // preIncrement: 3, counter: 3 const postIncrement = counter++; console.log(`postIncrement: ${postIncrement}, counter: ${counter}`); // postIncrement: 3, counter: 4 const preDecrement = --counter; console.log(`preDecrement: ${preDecrement}, counter: ${counter}`); // preDecrement: 3, counter: 3 const postDecrement = counter--; console.log(`postDecrement: ${postDecrement}, counter: ${counter}`); // postDecrement: 3, counter: 2
3) 할당연산자
- 할당할 때 쓰이는 "="도 연산자의 일종임
- 표현식(오른쪽)에서 계산이 먼저 이뤄지고, 그 결과가 변수(왼쪽)으로 할당됨
- 할당연산자는 우선순위가 낮은 편에 속함
// assignment operators let x = 3; let y = 6; x += y; // x = x + y console.log(x,y) // 9 6 x -= y; // x = x - y console.log(x,y) // 3 6 x *= y; // x = x * y console.log(x,y) // 18 / 6 x /= y; // x = x / y console.log(x,y) // 3 / 6 // let n = 2; console.log(n) // 2 n = n + 5; console.log(n) // 7 n = n * 2; console.log(n) // 14 // let n = 2; n *= 3 + 5; // n = n * (3 + 5) -> 할당연산자가 우선순위 낮아 오른쪽 연산(3+5)부터 연산됨 console.log(n); // 16
4) 비교연산자
- 크다(a>b), 작다(a<b) 등을 비교.
- 연산 결과를 Boolean형으로 반환
//comparison operators console.log(10 < 6); // false console.log(10 <= 6); // false console.log(10 > 6); // true console.log(10 >= 6); // ture
5) 논리연산자
- ||(or), &&(and), !(not)
// logical operators : ||(or), &&(and), !(not) const value1 = false; //false const value2 = 4 < 2; //false // || (or) : finds the first turthy value(가장 처음 나오는 true를 찾음) // 이 때문에 함수 같은 경우는 || 맨 뒤에 둠, 함수가 true가 되서 뒤에 것들이 실행 안될 수 있기 때문 console.log(`or: ${value1 || value2 || check()}`); function check() { for (let i = 0; i < 10; i++) { console.log("🥰"); } return true; } // && (and) : finds the first falsy value(가장 처음 나오는 false를 찾음) // 첫번째 value1가 flase기 때문에 뒤에 모두 실행 안됨 console.log(`and: ${value1 && value2 && check()}`); function check() { for (let i = 0; i < 10; i++) { console.log("🥰"); } return true; } // !(not) console.log(!value1); // ture
6) 동등연산자
- 동등연산자는 같은지(==) 또는 다른지(!=)를 비교
- 동등연산자는 데이터 타입이 다른 피연산자를 비교할 때 피연산자를 숫자형으로 변환 후 비교함
- 이에 동등연산자 "=="은 0과 false를 구별하지 못함(서로 같다고 판단함)
- 이를 구별하기 위해서는 보다 엄격한 동등연산자인 일치 연산자(===, !==)를 사용하면 형 변환 없이 값을 비교 가능
- 동등연사자의 예외 규칙으로 null과 undefined를 비교할 때, 특별한 규칙이 적용되 true를 반환
- 따라서 동등연산자는 일관성이 부족하기 때문에, JavaScript를 쓸 때 일치연산자를 사용하는 것을 권장
// 동등연산자(==) : lose equality, with type conversion console.log(10 == '10'); // ture console.log(10 === 10); // ture console.log(10 === '10'); // false console.log(0 == false); // true console.log('' == false); // true console.log( 0 === false ); // false(형변환없음. 형이 다르기 때문에 false) // 동등연산자 예외 console.log(null == undefined); // true console.log( null === undefined ); // false
7) null vs undefined / null vs 0 / undefined vs 0
- null과 undefined 등의 예외에 대해서 알고 있어야 함
// null vs undefined console.log( null == undefined ); // true // -> 예외적으로 동등연산자(==)는 null이나 undefined가 피연산자로 있을 때 형변환을 하지 않음. // -> 그럼에도 불구하고 true가 나온 것은 동등연산자에서 null과 undefined를 특별한 커플로 취급하기 때문. console.log( null === undefined ); // false -> 형을 바꾸지 않기 때문 // // null vs 0 console.log( null > 0 ); // false -> null이 숫자형 0으로 반환되기 때문에 크지 않음 console.log( null == 0 ); // false -> 동등연산자에서 null을 만나때는 형변환 안이뤄짐(예외) console.log( null >= 0 ); // true -> 비교연산자에서는 null이 숫자형 0으로 반환된기 때문에 true // // undefined vs 0 alert( undefined > 0 ); // false -> undefined 숫자형으로 형변환되면 NaN이기 때문 alert( undefined < 0 ); // false -> undefined 숫자형으로 형변환되면 NaN이기 때문 alert( undefined == 0 ); // false -> 형변환 되지 않음. 즉, undefined는 null 또는 undefined랑만 같음
Keep Going, Keep Coding!