Frontend/JS.info 정리

자바스크립트 기본 - 기본연산자와 수학

Creative_Lee 2021. 11. 15. 22:33

피연산자를 하나만 받는 연산자를 단항 연산자라고 부른다.

피연산자를 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번 실행됩니다.

쉼표 연산자는가독성에 좋지않고 사용빈도가 높지 않지만

여러 자바스크립트 프레임워크에서 트릭으로 사용하기 때문에 알아두면 좋습니다. 

 

 

 

 

 

 

 

기본이 중요하다.