Post

Javascript 연산자 정리

Posted Updated
Preview Image
By Namyoonseo 17 min read

안녕하세요 오늘은 자바스크립트에서 자주 사용되는 연산자들에 대해 자세히 알아볼건데요. 자바스크립트의 연산자는 값을 조작하고, 변수 간의 연산을 수행하며, 조건을 평가하는 데 필수적인 도구입니다. 기본적인 연산자부터 조금 더 복잡한 연산자까지 살펴볼 것이니, 한번 알아보러 가보겠습니다.

할당 연산자

할당 연산자는 = 기호를 사용하여 값을 변수에 할당합니다. 예를 들어, let x = 5;는 변수 x에 5를 할당합니다. 또한, 복합 할당 연산자를 사용하여 연산과 할당을 동시에 수행할 수 있습니다. 예를 들어, x += 10;는 x = x + 10;과 동일하며 x의 값에 10을 더한 후 결과를 다시 x에 할당합니다.

예제

1
2
3
4
5
6

let x = 5;
let y = 10;
let z = 25;

x = y; // x 는 10입니다.
x = y = z; // x, y, z 는 모두 25입니다.

산술 연산자

산술 연산자는 수학적 연산을 수행하며, 가장 일반적인 연산자들로 +, -, *, /, %(나머지 연산자) 등이 있습니다. 예를 들어, let sum = 10 + 15;은 25라는 결과를 반환합니다. % 연산자는 나눗셈 후의 나머지를 반환하는데, 10 % 3;은 1을 결과로 가집니다.

  • 왼쪽의 피연산자에 오른쪽의 피연산자를 더함.
  • 왼쪽의 피연산자에서 오른쪽의 피연산자를 뺌.
  • 왼쪽의 피연산자에 오른쪽의 피연산자를 곱함. / 왼쪽의 피연산자를 오른쪽의 피연산자로 나눔. % 왼쪽의 피연산자를 오른쪽의 피연산자로 나눈 후, 그 나머지를 반환함.

예제

1
2
3
4
5

    피연산자1 + 피연산자2;	// 피연산지1에서 피연산자2를 더함
    피연산자1 - 피연산자2;	// 피연산자1에서 피연산자2를 뺌
    피연산자1 * 피연산자2;	// 피연산자1에서 피연산자2를 곱함
    피연산자1 / 피연산자2;	// 피연산자1을 피연산자2로 나눔
    피연산자1 % 피연산자2;	// 피연산자1을 피연산자2로 나눈 나머지

일반적인 수학 계산식과 동일하지만 주의할 점이 있는데요.

    1. 나누기 연산자(/)의 경우 정수(int, short, long)간 연산 결과는 정수입니다. 예를 들어 7 / 2의 연산을 수행할 경우 3.5인 소수점 형태의 결과를 반환하는 것이 일반적인 수학이라면, 프로그래밍 언어에서는 자료형(Data type)에 의해서 정수로 반환하여 나머지 수는 버리게 됩니다. 따라서 3인 정수 형태로 결과를 반환하게 됩니다.
    1. 모듈러 연산자(%)는 정수형 자료형만 연산이 가능합니다. 변수 선언시 int, short, long과 같은 정수형 자료형만 연산이 가능하며, float, double와 같은 부동소수 연산은 불가능합니다 따라서 7 % 2는 연산이 가능하지만, 7.0 % 2, 7 % 2.0, 7.0 % 2.0과 같은 연산은 불가능합니다.

비교 연산자

비교 연산자는 두 값을 비교하여 참 또는 거짓을 반환합니다. == (동등), != (부등), === (일치), !== (불일치), > (크다), < (작다), >= (크거나 같다), <= (작거나 같다) 등이 있습니다. 특히 ===와 !==는 타입까지 체크하는 엄격한 비교 연산자로, 자바스크립트에서는 이를 사용하는 것이 좋습니다.

, == 왼쪽의 피연산자와 오른쪽의 피연산자가 같으면 1을 반환함. , != 왼쪽의 피연산자와 오른쪽의 피연산자가 같지 않으면 1을 반환함. , > 왼쪽의 피연산자가 오른쪽의 피연산자보다 크면 1을 반환함. , >= 왼쪽의 피연산자가 오른쪽의 피연산자보다 크거나 같으면 1을 반환함. , < 왼쪽의 피연산자가 오른쪽의 피연산자보다 작으면 1을 반환함. , <= 왼쪽의 피연산자가 오른쪽의 피연산자보다 작거나 같으면 1을 반환함.

C언어에서 거짓(false)은 0이며, 0이 아닌 모든 것은 참(true)으로 인식됩니다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13

int num01 = 3;

int num02 = 7;  

 

printf("== 연산자에 의한 결괏값은 %d입니다.\n", num01 == num02);

printf("<= 연산자에 의한 결괏값은 %d입니다.\n", num01 <= num02);  

//== 연산자에 의한 결괏값은 0입니다.

//<= 연산자에 의한 결괏값은 1입니다.

논리 연산자

논리 연산자는 논리식을 판단하여, 참(true)과 거짓(false)을 반환합니다.

and, or, xor 연산자는 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽입니다.

! 연산자는 피연산자가 단 하나뿐인 단항 연산자이며, 피연산자의 결합 방향은 오른쪽에서 왼쪽입니다.

and 논리식이 모두 참이면 참을 반환함. (AND 연산) or 논리식 중에서 하나라도 참이면 참을 반환함. (OR 연산) xor 논리식이 서로 다르면 참을 반환함. (XOR 연산) && 논리식이 모두 참이면 참을 반환함. (AND 연산) || 논리식 중에서 하나라도 참이면 참을 반환함. (OR 연산) ! 논리식의 결과가 참이면 거짓을, 거짓이면 참을 반환함. (NOT 연산)

and와 && 연산자, or와 연산자는 정확히 같은 동작을 하며, 연산자의 우선순위에서만 차이가 발생합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13

$num_01 = true;

$num_02 = false;

 

var_dump($num_01 and $num_02);      // true and false -> false

var_dump($num_01 or $num_02);       // true or false -> true

var_dump($num_01 xor $num_02);      // true xor false -> true

var_dump( (3 < 5) or ("12" > 20) ); // true or false -> true

문자열 연산자

Javascript에서 문자열을 숫자로 변환하는 방법으로 다음 4가지 방법을 소개합니다.  

    1. parseInt() 함수 사용
    1. parseFloat() 함수 사용
    1. +, * 연산자 사용

”+” 단항 연산자 사용하기 (Unary plus)

문자열 앞에 단항 연산자 (+)를 붙여주면, 문자열을 숫자 타입으로 변환하여 리턴합니다. 만약, 문자열을 숫자로 변경할 수 없다면 NaN (Not a Number)를 리턴합니다.

1
2
3
4
5
6
7

document.writeln(+"10"); // 10
document.writeln(+"10.1"); // 10.1
document.writeln(+"-10"); // -10
document.writeln(+"abc"); // NaN
document.writeln(+true); // 1
document.writeln(+false); // 0

+”10” 정수 10을 리턴합니다. +”10.1” 실수 10.1을 리턴합니다. +”-10” 음수도 처리할 수 있습니다. +”abc” 숫자로 변경할 수 없는 문자열이기 때문에, NaN을 리턴합니다. +true, +false boolean 값은 true인 경우 1, false인 경우 0을 리턴합니다.

곱하기(*) 연산자 

숫자로 변환할 문자열에 “곱하기 1” 을 해주면 문자열이 숫자로 변환됩니다. 만약, 문자열을 숫자로 변경할 수 없다면 NaN (Not a Number)를 리턴합니다.

1
2
3
4

document.writeln("10" * 1); // 10
document.writeln("10.1" * 1); // 10.1
document.writeln("-10" * 1); // -10
document.writeln("abc" * 1); // NaN

“10” * 1 정수 10을 리턴합니다. “10.1” * 1 실수 10.1을 리턴합니다. “-10” * 1 음수도 처리할 수 있습니다. “abc” * 1 숫자로 변경할 수 없는 문자열이기 때문에, NaN을 리턴합니다.

삼항 연산자

삼항 연산자는 다른 언어에는 존재하지 않는 C언어만의 독특한 연산자입니다.

이 연산자는 C언어에서도 유일하게 피연산자를 세 개나 가지는 조건 연산자입니다.

물음표(?) 앞의 조건식에 따라 결괏값이 참(true)이면 반환값1을 반환하고, 결괏값이 거짓(false)이면 반환값2를 반환합니다. 이때 반환값에는 값뿐만 아니라 수식, 함수 호출 등 여러 가지 형태의 명령문이 올 수 있습니다.

1
2
3
4
5
6
7
8
9
10

int num01 = 15;

int num02 = 8;

int result;  

result = (num01 > num02) ? num01 : num02;

printf("둘 중에 더 큰 수는 %d입니다.\n", result);  
// 결과값 둘 중에 더 큰 수는 15입니다.

삼항 연산자는 짧은 if / else 문 대신에 사용할 수 있으며, 코드를 간결하게 작성할 수 있도록 도와줍니다.

쉼표 연산자

쉼표(,) 연산자는 얼핏 연산자가 아닌 것처럼 보이지만 다양한 용도로 사용되는 연산자입니다. 이 연산자는 어떠한 연산을 수행하는 것이 아니라 다음과 같은 상황에서 사용됩니다.

  • 두 연산식을 하나의 연산식으로 나타내고자 할 때
  • 둘 이상의 인수를 함수로 전달하고자 할 때 ````javascript int num01 = 15, num02 = 8;

printf(“첫 번째 수는 %d이고, 두 번째 수는 %d입니다.\n”, num01, num02);
//첫 번째 수는 15이고, 두 번째 수는 8입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

위의 예제에서 쉼표 연산자는 둘 이상의 변수를 동시에 선언하기 위해서 사용했습니다.

그리고, printf() 함수에서는 둘 이상의 인수를 동시에 printf() 함수로 전달하기 위해서 사용했습니다.

#### sizeof 연산자
사용자의 컴퓨터 환경에 따라 타입에 할당되는 메모리의 크기가 달라질 수 있습니다.
sizeof 연산자는 단항 연산자로 피연산자의 크기를 바이트 단위로 반환합니다.
이 연산자는 피연산자로 타입뿐만 아니라 변수나 상수를 전달받을 수도 있습니다.
sizeof 연산자에 변수나 상수가 피연산자로 전달되면, 해당 변수나 상수에 해당하는 타입의 크기를 반환해 줍니다.
````javascript
int num01 = 15;

int num02 = 8;

int result;  

result = (num01 > num02) ? num01 : num02;

printf("둘 중에 더 큰수는 %d입니다.\n", result);

// 출력값 둘 중에 더 큰수는 15입니다.

sizeof 연산자를 통해 현재 여러분이 사용하는 컴퓨터 환경에서의 타입 크기를 알아볼 수 있습니다.

타입 연산자

typeof는 변수나 값의 타입을 문자열로 반환합니다. 예를 들어, typeof “Hello”는 “string”을 반환합니다. 이 연산자는 디버깅할 때 또는 변수의 타입을 확인할 때 유용합니다.

1
2
3
4
5
6

console.log(typeof 3) //number
console.log(typeof "3") //string
console.log(typeof true) //boolean
console.log(typeof null) //object
console.log(typeof 객체) //object
console.log(typeof undefined) //undefined

이상으로 자바스크립트의 주요 연산자들을 살펴보았습니다. 이 연산자들을 이해하고 잘 활용한다면, 코드를 보다 효율적으로 작성하고 문제를 해결하는 데 큰 도움이 될 것입니다.

javascript
javascript
This post is licensed under CC BY 4.0 by the author.