포스트

javascript operator

첫번째 사진

목차

  1. operator의 의미
  2. 연산자의 종류

1. operator의 의미

operator(연산자)란? 프로그램의 산술이나 연산식을 표현하고 처리하기 위해 제공되는 다양한 기호를 말합니다.

JavaScript는 이항 연산자와 단항 연산자를 모두 포함하며, 유일한 삼항 연산자로 조건 연산자도 가지고 있습니다. 이항 연산자는 총 두개의 피연산자가 필요합니다.

이항 연산자 : 피연산자1 연산자 피연산자2

이항 연산자의 예시로는 3+3 or a*b가 있습니다.

단항 연산자 : 연산자 피연산자 or 피연산자 연산자

단항 연산자의 예시로는 +3 or -3or +*borb++ 가 있습니다.

참고! 피연산자: 연산을 당하는 대상 단항 연산자: 피연산자 1개 필요 (피연산자가 1개인 연산자 -> 1개:단항) 이항 연산자: 피연산자 2개 필요 (피연산자가 2개인 연산자 -> 2개:이항) 삼항 연산자: 피연산자 3개 필요 (피연산자가 3개인 연산자 -> 3개:삼항) 단항 연산자는 뒤에서 더 다룰 예정입니다.

2. 연산자의 종류

할당 연산자

할당 연산자는 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다. 기본적인 할당 연산자는 오른쪽의 피연산자 값을 왼쪽 피연산자에 값에 할당하는 등호=로, x = yy의 값을 x에 할당합니다.

아래의 표에서 볼 수 있듯이 연산과 할당을 동시에 수행하는 복합 할당 연산자도 존재합니다.

할당 연산자
이름단축 연산자
할당x = yx = y
더하기 할당x += yx = x + y
빼기 할당x -= yx = x - y
곱하기 할당x *= yx = x * y
나누기 할당x /= yx = x / y
나머지 할당x %= yx = x % y
거듭제곱 할당x **= yx = x ** y
왼쪽 시프트 할당x << yx = x << y
오른쪽 시프트 할당x >>= yx = x >> y
부호 없는 오른쪽 시프트 할당x >>>= yx = x >>> y
비트 AND 할당x &= yx = x & y
비트 XOR 할당x ^= yx = x ^ y
비트 OR 할당x |= yx = x | y
논리 AND 할당x &&= yx && (x = y)
논리 OR 할당x ||= yx || (x = y)
널 병합 할당x ??= yx ?? (x = y)

속성 할당 어떤 표현식이 객체로 평가된다면, 할당 표현식의 좌황은 객체로 평가되는 표현식의 속성에 할당할 수 있습니다.

example 1

1
2
3
4
5
6
7
8
9
10
let obj = {};

obj.x = 3;
console.log(obj.x); // 3 출력
console.log(obj); // {x: 3} 출력

const key = 'y';
obj[key] = 5;
console.log(obj[key]); // 5 출력
console.log(obj); // {x: 3,y: 5} 출력

어떤 표현식이 객체로 평가되지 않으면, 그 표현식의 속성에 대한 할당 표현식은 실제로는 할당하지 않습니다.

example 2

1
2
3
4
5
6
7
8
9
10
11
12
13
let val = 0;

console.log(val.x = 3); // 3 출력
console.log(val.x); // undefined 출력
console.log(val); // 0 출력

//---------------------------------//
// 블로그 주인이 변경한 코드
let val = {}; //let val = 0; 을 왼쪽 코드처럼 변경을 하면 적용이 됩니다.

console.log(val.x = 3); // 3 출력
console.log(val.x); // 3 출력
console.log(val); // {x : 3} 출력

수정 불가능한 속성이나, 속성이 업는 표현식(null or undefined)으로 할당을 시도하면 오류가 발생합니다.

블로그 주인의 생각은..? object로 변수선 하면 즉 변경한 코드처럼 작성을 하면 생각했던 값을 출력할 수 있습니다. 그래서 0으로 변수 선언을 하면 저장할 수 있는 공간이 없어지게 된다고 생각합니다.. ㅎㅎ

구조 분해

구조 분해 할당 구문은 javascript 표현식 중 하나로, 객체나 배열을 생성할 때와 비슷한 구문으로 사용해서 어떤 객체나 배열에서 데이터를 추출할 수 있습니다.

1
2
3
4
5
6
7
8
9
var foo = ['one', 'two', 'three'];

// 구조 분해 없음
var one = foo[0];
var two = foo[1];
var three = foo[2];

// 구조 분해 사용
var [one, two, three] = foo;

구조 분해 없음에서 각 index를 변수 선언 할 때 사용하였는데 구조 분해 사용에서

1
var [one, two, three] = foo;

이 코드에서 맨 위에 선언했던

1
var foo = ['one', 'two', 'three'];

로 foo로 선언을 했으니 결론적으로

1
2
3
4
5
[one, two, three] = ['one', 'two', 'three'];

// one = 'one'
// two = 'two'
// three = 'three'

이렇게 됩니다. 그래서 각 index에 위치한 값이 할당이 되는 것입니다.

변환 값과 체이닝 일반적으로, 할당 표현식은 변수 선언(const, let, var)과 함께 쓰이거나 독립적인 명령문으로 사용됩니다.

1
2
3
4
5
6
7
// 변수 x를 선언해서 f()의 결과로 초기화
// x = f() 할당 표현식의 결과는 버려짐
let x = f();

// 변수 x를 선언해서 g()의 결과로 초기화
// x = g() 할당 표현식의 결과는 버려짐
x = g(); //변수 x를 g()의 결과로 재할당

그런데, 다른 표현식들처럼 x = f()와 할당 표현식도 결과 값으로 평가됩니다. 보통 이 값을 사용하진 않지만, 그래도 다른 평가식의 값으로 사용할 수 있다는 점이 바뀌지 않습니다.

할당체이닝이나, 다른 표현식에 중첩된 할당은 예상하기 힘든 동작을 보일 수 있습니다. 그래서 어떤 Javascript 스타일 가이드에서는 할당을 체이닝하거나 중첩하는 걸 지양하라 말합니다. (아래의 예처럼)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// bad
(function example() {
  // JavaScript interprets this as
  // let a = ( b = ( c = 1 ) );
  // The let keyword only applies to variable a; variables b and c become
  // global variables.
  let a = b = c = 1;
}());

console.log(a); // throws ReferenceError
console.log(b); // 1
console.log(c); // 1

// good
(function example() {
  let a = 1;
  let b = a;
  let c = a;
}());

console.log(a); // throws ReferenceError
console.log(b); // throws ReferenceError
console.log(c); // throws ReferenceError

할당 체이닝과 중첩을 가끔 마주치게 되므로 어떻게 동작을 하는지는 알아두는 것이 좋습니다.

할당 표현식을 체이닝하거나 중첩함으로써 할당의 결과를 다시 다른 변수에 할당할 수 맀습니다. 아니면 콘솔에 기록할 수 있고, 배열 리터럴이나 함수 호출에 사용할 수도 있습니다.

1
2
3
4
5
let x;
const y = (x = f()); //또는 const y = x = f(); 와 같음
console.log(y); // x = f() 할당의 반환 값을 기록

console.log((x = f())); // 반환 값을 직접 기록
1
2
3
4
5
6
7
8
9
10
11
12
let x;
const y = (x = function f() { }); // 또는 const y = x = f(); 와 같음.
console.log(y); // x = f() 할당의 반환 값을 기록. // 출력 [Function: f]

console.log((x = function f() { })); // 반환 값을 직접 기록. // 출력 [Function: f]

// 할당 표현식은 보통 표현식을 기대하는 곳이라면
// 어디에나 중첩해 사용할 수 있으며
// 배열 리터럴의 요소나 함수의 매개변수도 그런 곳 중 일부임.
console.log([0, (x = function f() { }), 0]); 

// 출력 [ 0, [Function: f], 0 ]

여기는 블로그 주인이 이해가 안되어서.. 조금 더 공부하고 부가적으로 재업로드 하겠습니다.

비교 연산자

비교 연산자는 피연산자를 서로 비교하고, 비교 결과가 true인지에 따라 논리 값을 반환합니다. 피연산자로는 숫자, 문자열, 논리형 객체 값을 사용할 수 있습니다. 문자열은 Unicode 값을 사용한 표준 사전식 순서에 따라 비교합니다. 만역 두 피연산자다 서로 다른 타입이면, Javascript는 피연산자들을 서로 비교하기에 적합한 타입으로 변환합니다. 이 동작은 대게 두 값을 모두 숫자오 변환한 후 결과를 낳습니다. 비교 연산에서 발생하는 타입의 유일한 예외는 ===!== 연산자를 사용해 엄격 일치와 불일치 비교룰 수행하은 경우인데, 두 연산자는 비교 전에 피연산자를 변환하지 않습니다. 아래의 표는 다음 예제 코드처럼 비교 연산자를 설명합니다

1
2
3
// 먼저 아래처럼 변수 선언을 합니다.
const var1 = 3;
const var2 = 4;
비교 연산자
연산자설명true를 반환하는 예제
동등 (==)피연산자가 서로 같으면 true를 반환합니다.3 == var1

"3" == var1

3 == '3'
부등</a> (!=)피연산자가 서로 다르면 true를 반환합니다.var1 != 4
var2 != "3"
일치 (en-US) (===) 두 피연산자의 값과 타입이 모두 같은 경우 true를 반환합니다. Object.is와 JavaScript에서의 같음을 참고하세요.3 === var1
불일치 (en-US) (!==)피연산자의 값 또는 타입이 서로 다를 경우 true를 반환합니다.var1 !== "3"
3 !== '3'
(en-US) (>)왼쪽 피연산자가 오른쪽 피연산자보다 크면 true를 반환합니다.var2 > var1
"12" > 2
크거나 같음 (en-US) (>=) 왼쪽 피연산자가 오른쪽 피연산자와 같거나 크면 true를 반환합니다.var2 >= var1
var1 >= 3
작음 (en-US) (<) 왼쪽 피연산자가 오른쪽 피연산자보다 작으면 true를 반환합니다.var1 < var2
"2" < 12
작거나 같음 (en-US) (<=) 왼쪽 피연산자가 오른쪽 피연산자와 같거나 작으면 true를 반환합니다.

var1 <= var2
var2 <= 5

참고 =>는 연산자가 아니라 화살표 함수의 표기법입니다.

산술 연산자

산술 연산자는 두 개의 숫자 값(리터럴 또는 변수)을 피연산자로 받아서 하나의 숫자 값을 반환합니다. 표준 산술 연산자는 더하기 (+), 빼기(-), 곱하기(*), 나누기(/)입니다.

이 연산자들은 대부분의 다른 프로그래밍 언어에서 부동소수점 값을 연산할 때와 동일하게 동작합니다. (0 으로 나눌 경우 Infinity를 반환하는 것에 주의 해야합니다.) 예를 들어,

1
2
1 / 2; // 0.5
1 / 2 == 1.0 / 2.0; // 0.5 참

Javascript는 표준 산술 연산자(+, -, *, /)외에도 아래의 표에서 나열된 산술 연산자를 제공합니다.

산술 연산자
연산자설명예제
나머지
(%)
이항 연산자입니다. 두 피연산자를 나눴을 때의 나머지를 반환합니다.12 % 5 는 2를 반환합니다.
증가
(++)
단항 연산자입니다. 피연산자에 1을 더합니다. 전위 연산자(++x)로 사용하면 피연산자에 1을 더한 값을 반환합니다. 후위 연산자(x++)로 사용한 경우 피연산자에 1을 더하기 전의 값을 반환합니다. x가 3일 때, ++xx에 4를 할당한 후 4를 반환합니다. 반면 x++는 3을 먼저 반환한 후 x에 4를 할당합니다.
감소
(--)
단항 연산자입니다. 피연산자에서 1을 뺍니다. 반환 값은 증가 연산자처럼 동작합니다. x가 3일 때, --xx에 2를 할당한 후 2를 반환합니다. 반면 x--는 3을 먼저 반환한 후 x에 2를 할당합니다.
단항 마이너스
(-)
단항 연산자입니다. 피연산자의 부호를 반대로 바꾼 값을 반환합니다.x가 3일 때, -x는 -3을 반환합니다.
단항 플러스
(+)
단항 연산자입니다. 피연산자가 숫자 타입이 아니면 숫자로 변환을 시도합니다. +"3"3을 반환합니다.
+true1을 반환합니다.
거듭제곱
(**)
base^exponent, 즉 baseexponent로 거듭제곱한 결과를 반환합니다.
base : 밑
exponent : 지수
2 ** 38을 반환합니다.
10 ** -10.1을 반환합니다.

참고! 리터럴(Literal)? 데이터(값) 그 자체를 뜻합니다. 즉 변수에 넣는 변하지 않는 데이터를 의미하는 것. const a = 1 여기서 a는 상수, 1은 리터럴입니다.

상수(constant)? 상수는 변하지 않믄 변수를 뜻합니다.

  • 상수에 넣는 데이터로는 숫자만 오는 것이 아니라 클래스나 구조테 같은 객체도 올 수 있습니다.
  • 참조변수를 상수로 지정할 때, 참조변수 안의 속성의 데니터 까지도 변하지 않는다고 생각할 수 있지만, 참조뱐수의 메모리의 주소 값이 변하지 않는다는 의미일 뿐, 그 주소가 가리키는 데이터들은 병할 수 있습니다.
1
2
3
const a = { name: "JY", age: 20};
a = [ apple, banana ]; // 불가능
a.age = 10; // 가능

비트 연산자

비트 연산자는 피연산자를 10진수, 16진수, 8진수 숫자로 취급하지 않고 대신 32개 비트의 집합으로 취급합니다. 예를 들어, 10진수 9는 2진수 1001로 나타냅니다. 비트 연산자는 이러한 이진법 표현에 대해 연산을 수행하지만, 변환할 땐 JavaScript 표준 숫자로 반환합니다.

비트 연산자
연산자사용법설명
비트 ANDa & b두 피연산자의 각 자리 비트의 값이 모두 1인 위치에 1을 반환합니다.
비트 ORa | b두 피연산자의 각 자리 비트의 값이 모두 0인 위치에 0을 반환합니다.
비트 XOR (en-US)</a>a ^ b두 피연산자의 각 자리 비트의 값이 서로 같은 위치에 0을 반환합니다. [두 피연산자의 각 자리 비트의 값이 서로 다른 위치에 1을 반환합니다.]
비트 NOT~ a피연산자의 각 자리의 비트를 뒤집습니다.
왼쪽 시프트a << b a의 이진 표현을 b만큼 왼쪽으로 이동하고, 오른쪽은 0으로 채웁니다.
오른쪽 시프트a >> ba의 이진 표현을 b만큼 오른쪽으로 이동하고, 1 미만으로 이동한 비트는 버립니다.
부호 없는 오른쪽 시프트a >>> ba의 이진 표현을 b만큼 오른쪽으로 이동하고, 1 미만으로 이동한 비트는 버립니다. 왼쪽은 0으로 채웁니다.

논리 연산자

논리 연산자는 보통 불리언(논리)값과 함께 사용해서 불리언 값을 변환합니다. 그러나 &&|| 연산자는 사실 두 피연산자 중 하나를 반환 한 것으로, 만약 줄 중 하나가 불리언 값이 아니라면 논리 연산자의 반환 값도 불리언 값이 아닐 수 있습니다.

논리 연산자
연산자사용법설명
논리 AND (&&)expr1 && expr2 expr1false로 변환할 수 있으면 expr1을 반환합니다. 그 외의 경우에는 expr2를 반환합니다. 따라서 불리언 값과 함께 사용한 경우, 둘 다 참일 때 true를, 그 외에는 false를 반환합니다.
논리 OR (||)expr1 || expr2 expr1true로 변환할 수 있으면 expr1을 반환합니다. 그 외의 경우에는 expr2를 반환합니다. 따라서 불리언 값과 함께 사용한 경우, 둘 중 하나가 참일 때 true를, 그 외에는 false를 반환합니다.
논리 NOT (!)!expr 단일 피연산자를 true로 변환할 수 있으면 false를 반환합니다. 그 외에는 true를 반환합니다.

false 로 변환할 수 있는 표현식은 평가 결과가 null. 0, NaN, 빈 문자열(""),undefined인 경우입니다.

다음 코드는 && (논리 AND) 연산자의 예제입니다.

1
2
3
4
5
6
7
var a1 = true && true;      // t && t는 true 반환
var a2 = true && false;     // t && f는 false 반환
var a3 = false && true;     // f && t는 false 반환
var a4 = false && (3 == 4); // f && f는 false 반환
var a5 = 'Cat' && 'Dog';    // t && t는 Dog 반환
var a6 = false && 'Cat';    // f && t는 false 반환
var a7 = 'Cat' && false;    // t && f는 false 반환
1
2
3
4
5
6
7
8
9
10
11
for (var i = 1; i < 8; i++) {
  var a1 = true && true;
  var a2 = true && false;
  var a3 = false && true;
  var a4 = false && (3 == 4);
  var a5 = 'Cat' && 'Dog';
  var a6 = false && 'Cat';
  var a7 = 'Cat' && false;
  console.log(`a${i} = `, eval(`a${i}`));
}
// 블로그 주인이 반목문을 이용하면 편하지 않을까??해서 고민한 코드....

빈 문자열이면 false, 빈 문자열이 아니면 true

다음 코드는 ||(논리 OR) 연산자의 예제입니다.

1
2
3
4
5
6
7
var o1 = true || true;      // t || t는 true 반환
var o2 = false || true;     // f || t는 true 반환
var o3 = true || false;     // t || f는 true 반환
var o4 = false || (3 == 4); // f || f는 false 반환
var o5 = 'Cat' || 'Dog';    // t || t는 Cat 반환
var o6 = false || 'Cat';    // f || t는 Cat 반환
var o7 = 'Cat' || false;    // t || f는 Cat 반환

다음 코드는 ! (논리 NOT) 연산자의 예제입니다.

1
2
3
var n1 = !true;  // !t는 false 반환
var n2 = !false; // !f는 true 반환
var n3 = !'Cat'; // !t는 false 반환

단락평가 논리 연산자는 왼쪽에서 오른쪽의 순서로 평가하므로, 다음 규칙을 사용해서 “단락(short-circuit) 평가가 가능한지 판별합니다.

  • false && 아무거나는 거짓으로 단락 평가합니다.
  • true || 아무거나는 참으로 단락평가합니다.

논리 규칙은 위의 단락 평가가 항상 옳음을 보증합니다. “아무거나”부분의 표현식은 평가도 하지 않으므로, 해당 표현식에서 유발하게 되는 부수 효과도 전혀 발생하지 않음에 주의하세요.

참고로 ||을 사용하는 두 번째, 단락 평가의 경우, 최근 코드에서는 새로운 널 병합 연산자(??)를 사용할 수도 있습니다. 널 병합 연산자는 첫번째 연산자가 널과 유사한, 즉 null이거나 undefined일 때만 두 번째 피연산자를 반환합니다. ''0도 유효한 값이라면 널 병합 연산자가 기본 값을 나타낼 때 더 졸은 선택지입니다.

참고!
Nullish coalescing operator(널 병합 연산자 - ??) 왼쪽 피 연산자가 null또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자입니다.

문자열 연산자

문자열에 사용할 수 있는 비교 연산자들 외에도, 문자열 연결(+)연산자는 두 문자열의 값을 서로 연결한 새로운 문자열을 반환합니다.

example1,

1
console.log('나만의 ' + '문자열'); // 콘솔에 "나만의 문자열"을 기록

단축 할당 연산자인 += 또한 문자열을 연결할 때 사용할 수 있습니다.

example2,

1
2
3
var mystring = '';
mystring += '';
// "한글"로 평가되며, mystring에 "한글"을 할당함

조건 (삼항) 연산자

조견 연산자는 Javascript에서 3개의 피연산자를 받는 유일한 연산자입니다. 조건 연산자는 주어진 조건에 따라 두 값 중 하나를 반환합니다.

1
condition ? val1 : val2;

만약 condition이 참이라면, 조건 연산자는 vall을 반환하고, 그외에는 val2를 반환합니다. 다른 연산자를 사용할 수 있는 곳이라면 조건 연산자도 사용할 수 있습니다.

examlpe,

1
var status = age >= 18 ? '성인' : '미성년자';

위의 명령문은 age가 18이상이라면 status변수에 “성인”을 할당하고, 그렇지 않으면 “미성년자”를 할당합니다.

쉼표 연산자

싐표 연산자(,)는 두 피연산자를 모두 평가한 후 오른쪽 피연산자의 값을 반환합니다. 쉼표 연산자는 주로 for반복문 안에서 사용하여 한 번의 반복으로 여러 변수를 변경할 때 사용합니다. 꼭 필요하지 않다면, 그 외의 상황에 사용하는 것은 좋지 않은 코드 스타일로 여겨져, 쉼표 연산자보다는 두개의 분리된 명령문을 사용하는 편이 낫다고 합니다.

example,

1
2
3
4
5
6
var x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var a = [x, x, x, x, x];

for (var i = 0, j = 9; i <= j; i++, j--);
                                      ^
console.log('a[' + i + '][' + j + ']= ' + a[i][j]);

쉼표 연산자의 예제로, 10행 10열의 2차원 배열 a를 가정할 때, 아래의 코드는 쉼표 연산자를 사용해서 두 개의 변수를 한번에 업데이트하는 모습을 보입니다. 코드의 실행 결과는 a의 요소를 대각선((0, 0), (1, 1), (2, 2), …)으로 출력한 것입니다.

단항 연산자

단항 연산은 오직 하나의 피연산자만 사용하는 연산입니다.

1. delete delete연산자는 객체의 속성을 삭제합니다. 구문은 다음과 같습니다.

1
2
3
delete object.property;
delete object[propertyKey];
delete objectName[index];

위의 구문에서,objectName은 객체의 이름이고, property는 객체에 존재하는 속성, propertykey는 존재하는 속성을 가리키는 문자열이나 심볼입니다.

delete연산자가 속성을 성공적으로 삭제한 이후, 해당 속성을 접근하려고 하면 undefined가 반환됩니다. delete는 속성을 제거할 수 있는 경우에는 true를 반환하고, 제거 할 수 없을 땐 false를 변환합니다.

1
2
3
4
delete Math.PI; // false 반환 (설정 불가한 속성 삭제 불가)

const myObj = {h: 4};
delete myobj.h; // true 반환 (사용자 정의 속성 삭제 가능)

Math.PI 속성은 원의 둘레와 지름의 비율, 약 3.14159의 값을 가집니다. javascript에 있는 속성이므로 변환이 불가합니다.

배열의 원소 삭제하기 배열도 평범한 객체이므로, 기술적으로는 delete를 사용해서 요소를 제거하는 것이 가능합니다.
그러나 이 방법은 좋은 방법이 아니므로 피해야한다고 합니다. 배열의 속성을 제거해도 배열 길이 속성은 영향을 받지 않으며, 다른 요소의 인덱스도 그대로 남아있습니다.
이런 동작을 원한다면 단순히 값을 undefined로 덮어쓰는 편이 훨씬 낫다고 합니다. 실제로 배열을 변경하고자하면 splice와 같은 다양한 배열 매서드를 사용하는 것이 좋습니다.

2. typeof typeof연산자는 다음과 같은 방법으로 사용합니다.

1
2
typeof operand
typeof (operand)

typeof연신자는 평가 전의 피연산자 타입을 나타내는 문자열을 반환합니다. operand는 문자열, 변수, 키워드, 객체 등 타입을 알아낼 값입니다. 주위의 괄호는 선택사항입니다.

example,

1
2
3
4
5
var myFun = new Function('5 + 2');
var shape = 'round';
var size = 1;
var foo = ['Apple', 'Mango', 'Orange'];
var today = new Date();

typeof연신자는 위의 변수들에 대해서 다음과 같은 값을 반환합니다.

1
2
3
4
5
6
typeof myFun;     // "function" 반환
typeof shape;     // "string" 반환
typeof size;      // "number" 반환
typeof foo;       // "object" 반환
typeof today;     // "object" 반환
typeof dontExist; // "undefined" 반환

키워드 truenull에 대해서는 다음과 같은 결과를 반환합니다.

1
2
typeof true; // "boolean" 반환
typeof null; // "object" 반환
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.