[JavaScript] 자바스크립트 연산자

[JavaScript] 자바스크립트 연산자

---

데이터와 데이터를 처리해서 결과값을 반환하는 역할이 바로 '연산자'

▶ 문자열 붙이기

'+'를 이용한 문자열 붙이기

let str1 = "Hello"
let str2 = "javaScript"

result = str1 + " " + str2
console.log(result)
console.log("Hello"+"JavaScript")

'+'를 이용하여, 문자열을 붙일수 있습니다. 변수에 문자열을 넣은 다음, '+'로 붙일수도 있고, 문자열을 바로 붙일수도 있습니다.

백틱(`)을 사용하는 템플릿 리터럴 (Template literals)

let str = "javaScript"

console.log(`${str} 백틱을 사용한 템플릿 리터럴`)
// console.log(str + " 백틱을 사용한 템플릿 리터럴") 와 동일

 

'+'를 이용하는것보다 쉽게 문자열 데이터를 표현할 수 있습니다.

 

키보드에서 '백틱(`)키는 숫자 '1'키 왼쪽에 있습니다.

▶ 산술연산자

console.log(10 + 2)
console.log(10 - 2)
console.log(10 / 2)
console.log(10 * 2)
console.log(10 % 3)
console.log(10 ** 2)

사칙연산인 더하기,빼기,나누기,곱하기 ( +, -, /, * )와 나머지 연산 (//), 거듭제곱 (**)을 이용하여 숫자 데이터를 연산해 결과를 만들수 있습니다.

▶ 증감연산자

let num = 1
let num2 = 1
let num3 = 1
let num4 = 1

console.log(++num)
console.log(num2++)
console.log(--num3)
console.log(num4--)

값을 증가시키거나 감소시키는 연산자 (++,--)이며, 증감연산자는 변수 앞 혹은 변수 뒤중 어디에 놓느냐에 따라 차이가 있습니다.

증감연산자 위치	설명
++변수	값을 증가시킨 다음, 결과를 반환합니다.
변수++	결과를 먼저 반환한 다음, 값을 증가시킵니다.
--변수	값을 감소시킨 다음, 결과를 반환합니다.
변수--	결과를 먼저 반환한 다음, 값을 감소시킵니다.

코드와 결과를 보면 값이 다른걸 확인할 수 있습니다. 변수 앞에 증감연산자가 있다면, 값이 증가된 결과를 화면에 보여주며, 변수 뒤에 증감연산자가 있다면, 증가 혹은 감소를 시키지 않고 그대로 값을 출력해 보여줍니다.

▶ 대입연산자

let num1 = 10
let num2 = 5

let num3 = 10
let num4 = 5

num1 += num2  // num1 = num1 + num2
console.log(num1)

num3 -= num4  // num3 = num3 - num4
console.log(num3)

대입연산자는 ' =, += , -= '으로 변수에 값을 대입하거나, '+,-'로 연산을 한 다음, 변수에 값을 대입하게 됩니다. 

▶ 비교연산자

console.log(1 < 2)
console.log(2 <= 2)
console.log(1 > 2)
console.log(1 >= 2)

비교연산자는 '< , >, <=, >='로 데이터타입 'number'의 값을 비교하여, boolean 데이터 타입으로 결과를 보여줍니다. 결과값을 보면 'true, false'로 결과값이 반환된 모습을 볼 수 있습니다.

▶ 논리연산자

let logic = true
let logic2 = true
let logic3 = false
let logic4 = false

console.log(logic && logic2) // true and true
console.log(logic || logic2) // true or ture
console.log(logic2 && logic3) // true and false
console.log(logic2 || logic3) // true or false
console.log(logic3 && logic4) // false and false
console.log(logic3 || logic4) // false or false
console.log(!logic) // not true
console.log(!logic3) // not false

&& (and), || (or), !(not)을 논리연산자로 불리며, 조건문에서 많이 사용하게 될껍니다. 코드의 결과를 보면, '&& (and)' 논리연산자의 경우 연산 대상이 모두 'true'이면 'true'로 반환하며, 연산 대상중 하나라도 'false'이면 'false'로 결과를 반환합니다. '|| (or)' 논리연산자의 경우, 연산 대상중 하나라도 'true'이면 'true'로 결과가 반환되며, 'true'가 하나도 없을경우 'false'로 결과를 반환합니다. !(not) 연산자의 경우, 'true'이면 'false'로 반환, 'false'이면 'true'로 결과를 반환합니다.

▶ 일치연산자

console.log ( 1 === 1 )
console.log ( 1 === 2 )
console.log ( 'JavaScript' === 'JavaScript' )
console.log ( 'JavaScript' === 'javascript' )

일치연산자는 두 값이 일치한지를 확인하는 연산자로, 각 데이터 타입이 일치할 경우, 두 데이터값을 비교하여 'boolean'연산자 ( true / false )로 값을 반환해줍니다.

console.log ( 1 === '1')
console.log ( 1 == '1')

일치연산자의 경우 '=='와 '==='이렇게 2개가 있는데, 위의 코드를 보면, 1 == '1' 을 true로 값을 반환해줍니다. 데이터타입이 다름에도 불구하고, true로 값을 반환해주기 때문에, 잘못하면 코드에러를 발생시킬수 있으니, 될 수 있으면 '==='을 사용하도록 합시다.