피연산자를 하나만 받는 연산자를 단항 연산자라고 부른다.
피연산자를 2개 받는 연산자를 이항 연산자라고 부른다.
1. 마이너스 연산자 ( - )
단항 마이너스 연산자는 부호를 뒤집어 준다.
이항 마이너스 연산자는 뺄샘을 해준다.
let num = 1;
num = -num;
console.log(num) // -1
2. 플러스 연산자 ( + )
단항 플러스 연산자는 피연산자가 숫자일 경우 아무런동작을 하지 않는다.
단항 플러스 연산자는 피연산자가 숫자가 아닌경우 숫자형으로의 변환이 일어난다.
단항 플러스 연산자( + ) 하나로 Number( ... ) 와 같은 일을 할 수 있다.
let num1 = 1 console.log(+num1) // 1 -> number
let num2 = -1 console.log(+num2) // -1 -> number
let num3 = true console.log(+num3) // 1 -> number
let num4 = false console.log(+num4) // 0 -> number
let num5 = "" console.log(+num5) // 0 -> number
let num6 = "123" console.log(+num6) // 123 -> number
let num7 = "number" console.log(+num7) // NaN -> number
이항 플러스 연산자는 덧샘을 해주고 문자열을 병합해 준다.
/ 피연산자 중 하나가 문자열이라면 다른 하나도 문자열로 변환되어 병합된다. /
let octopus = "8"
let squid = "10"
let human = 2
let dog = 4
console.log(octopus + squid) // "810" -> string
console.log(octopus + human) // "82" -> string
console.log(+octopus + +squid) // 18 -> number
console.log(human + dog + octopus) // "68" -> string
하나의 표현식에 둘 이상의 연산자가 있다면 연산자의 우선순위에 맞춰서 실행 순서가 정해진다.
우선 순위가 같을 경우 왼쪽부터 오른쪽으로 순차적으로 진행된다.
/ 위 예제에서 human + dog 는 6이고 6 + "8" 은 문자열로 변환되어 병합되어서 "68" 의 결과값이 나온다. /
동일한 기호의 단항연산자는 이항 연산자 보다 우선순위가 높다.
/ 위 예제에서 단항 +연산자가 이항 +연산자보다 먼저 적용됐는데 그 이유이다. /
우선순위를 변경하고 싶을때는 괄호( ) 를 사용하면 된다.
이항 플러스 연산자를 제외한
다른 산술 연산자는 오직 숫자형의 피연산자만을 다루고, 피연산자가 숫자형이 아닌 경우 숫자형으로 바꿉니다.
console.log(2 - "2") // 0 -> number
console.log(2 / "2") // 1 -> number
console.log(2 * "2") // 4 -> number
3. 나머지 연산자 ( % )
나머지 연산자를 사용한 표현식 a % b 는
a를 b로 나눈 후 나머지를 정수로 반환해준다.
console.log( 7 % 2 ) // 1 -> number
console.log( "7" % 2 ) // 1 -> number
4. 거듭제곱 연산자 ( ** )
거듭제곱 연산자를 사용한 표현식 a ** b 는
a를 b번 곱한 값을 반환해준다.
정수가 아닌 숫자에 대해서도 동작한다.
console.log( 2 ** 3 ) // 8 -> number
console.log( "2" ** "3" ) // 8 -> number
console.log( 4 ** (1/2) ) // 2 -> number
5. 할당 연산자 ( = )
자바스크립트의 대부분의 연산자들은 값을 반환합니다.
할당 연산자 또한 값을 반환합니다.
x = value 를 호출하면 x에 value가 할당됨과 동시에 value를 반환합니다.
let num1 = 2
let num2 = 3
let num3 = 4 - ( num1 = num2 - num1) // 4 - 1 = 3
console.log(num3) // 3
console.log(num1) // 1
위 예제 (num1 = num2 - num1) 에서
num1에 3 - 2 의 값 1을 할당하고 1을 반환하면서
num3에 4 - 1 값을 할당합니다.
/ 할당 연산자는 우선순위가 낮기 때문에 대부분의 다른 계산들이 먼저 이루어 지고 할당이 이루어 집니다. /
코드를 작성 할 때 이런식으로 작성 하지는 않지만 알고있어야 한다.
5-1. 할당 연산자 체이닝
할당 연산자는 여러 개를 연결할 수도 있다.
여러개를 연결한 경우, 우측부터 실행된다.
let num1
let num2
let num3
num1 = num2 = num3 = 1 + 1
console.log(num1) // 2
console.log(num2) // 2
console.log(num3) // 2
하지만 가독성을 위해서는 아래 예시처럼 코드를 작성하는 것이 좋다.
let num1
let num2
let num3
num3 = 1 + 1
num2 = num3
num1 = num3
console.log(num1) // 2
console.log(num2) // 2
console.log(num3) // 2
5-2. 복합 할당 연산자 ( -= , += , *= , /= )
변수에 연산자를 적용하고 그 결과를 같은 변수에 저장해야 하는 경우 복합 할당 연산자를 사용한다.
let num1 = 10
num1 += 10 //num1 = num1 + 10
num1 -= 15 //num1 = num1 - 15
num1 *= 2 //num1 = num1 * 2
num1 /= 1 //num1 = num1 / 1
console.log(num1) // 10
복합 할당 연산자 역시 할당연산자와 같은 우선순위를 가지기 때문에
대부분의 다른 연산자가 실행 된 후에 실행됩니다.
let num1 = 5
num1 *= 1 + 2
console.log(num1) // 15
6. 증가, 감소 연산자 ( -- , ++ )
숫자를 하나 늘리거나 줄일 때 사용합니다.
변수에만 사용할 수 있습니다.
let increase = 1
let decrease = 1
increase++; // increase = increase + 1 의 결과와 같습니다.
decrease--; // decrease = decrease - 1 의 결과와 같습니다.
console.log(increase) // 2
console.log(decrease) // 0
console.log(1++) // error
증가, 감소 연산자는 변수의 앞이나 뒤에 올 수 있습니다.
증가, 감소 연산자 역시 값을 반환하는데, 그 값을 사용할 때 연산자에 위치에 따라 값이 달라집니다.
변수의 앞에 쓰는 경우
-> 값을 증가, 감소 시키고 이후 새로운 값을 반환합니다.
변수의 뒤에 쓰는 경우
-> 기존 변수의 값을 반환하고 값을 증가, 감소 시킵니다.
let num1 = 1
let num2 = ++num1 //console.log(num2) --> 2
let num1 = 1
let num2 = num1++ //console.log(num2) --> 1
증가, 감소 연산자의 우선순위가 다른 대부분의 산술 연산자 보다 높기 때문에
증가, 감소 연산자가 먼저 평가 됩니다.
7. 쉼표 연산자 ( , )
쉼표 연산자는 여러 표현식을 코드 한줄에서 평가할 수 있게 해줍니다.
이때 마지막 표현식의 결과만 반환됩니다.
쉼표 연산자의 우선순위는 할당연산자 ( = ) 보다도 낮습니다.
for (a = 1, b = 3 , c = a + b; c < 10; c++) {
console.log(c)
}
// 마지막 표현식인 c = a + b 만 반환됩니다. --> 4
// console.log(c) 는 6번 실행됩니다.
쉼표 연산자는가독성에 좋지않고 사용빈도가 높지 않지만
여러 자바스크립트 프레임워크에서 트릭으로 사용하기 때문에 알아두면 좋습니다.
'Frontend > JS.info 정리' 카테고리의 다른 글
자바스크립트 기본 - if와 ? 조건 처리 , switch (0) | 2021.11.18 |
---|---|
자바스크립트 기본 - 비교 연산자 (0) | 2021.11.17 |
자바스크립트 기본 - 상호작용 (0) | 2021.11.14 |
자바스크립트 기본 - 자료형 (0) | 2021.11.13 |
자바스크립트 기본 - 변수와 상수 (0) | 2021.11.13 |