[코드팩토리] Operators : 연산자

연산자의 종류

산술 연산자

• 덧셈 (+)
• 뺄셈 (-)
• 곱셈 (*)
• 나눗셈 (/)
• 나머지 (나눗셈을 하고 났을 때의 나머지를 의미함, %)

아래처럼 괄호를 써서 우선 계산해야 하는 것도 표현 가능하다.

괄호가 없었으면 110이 나와야 하는 값이다.

증가와 감소

이미 담아둔 변수의 값에 +나 -의 기호로 수치를 더하는 방법이다.

연산자의 위치에 따른 계산 순서

연산자를 어디에 쓰느냐에 따라 계산 순서가 정해진다.

number와 result라는 변수에는 각각 1이라는 값을 담았다.

3번째줄에서 로그로 result나 number의 값을 출력하라고 하면 당연히 1이라는 값이 출력된다.

 

그리고 5번째줄에서 result의 값을 변경한다. (const로 선언하면 값을 못바꾼다. 예제는 let으로 선언했기에 가능하다.)

result의 값을 number의 값인 1에서 ++ 한 단계 증가시키도록 하였다. 그러면 2가 된다.

그러면 6번째줄에서 result와 number의 값을 출력시킬 때 2 1이 출력되어야 하는 것 같지만,

실제론 1 2로 출력된다.

그 이유는 5번째줄에서 result 다음 number ++; 이렇게 변수의 값을 변경하였는데, 이것을 해석할 때 result = number로 먼저 해석하고, number = number에 ++한 값. 이런 순서로 계산이 되었기 때문이다.

 

연산자 ++의 위치를 바꾸면 2 1로 출력된다.

이렇게 되면 number의 값을 먼저 ++ 시키고, 그 값을 result에 담게 된다. 즉 연사자의 위치에 따라서 계산 순서가 바뀐 것이다. 따라서 이 경우엔 number도 2가 되고, 그렇게 2가 된 값이 result에 담기게 되는 것이다.

 

이 개념을 알고는 있으면 좋은데 실무에서는 ++와 --를 먼저 쓰는 경우는 거의 없다. 실무에서는 뒤에 쓴다.

코더 입장에서 헷갈리는 개념이기 때문이다.

숫자가 아닌 데이터 타입에 연산자를 넣어 Number type으로 바꾸기

let age = 99; 는 숫자 타입이고, let age = '99';는 문자열(string) 타입이다.

둘 다 99라는 값을 보여주지만 따옴표를 넣고 안 넣고에 따라 엄연히 데이터 타입이 달라진다.

그런데 함수 앞에 연산자를 넣어주면 넘버타입으로 바꿀 수 있다.

 

그러나 스트링 값이 숫자가 아닌 진짜 문자를 넣으면 에러가 뜬다.

* NaN : Not a Number

할당 연산자 (assignment operator)

이미 지정된 변수의 값을 바꿀 때 사용하는데 앞의 증가와 감소에서 ++ --가 한 단계 증가와 감소를 하는 것이었다면 여기서는 =(이퀄)을 넣어 뒤에 나오는 숫자만큼 직접 증가, 감소시킬 수 있는 방법이다.

age라는 값을 32로 정해놓고 4번째줄에서 age += 30;라는 함수를 추가하여 32에 30을 더하도록 하였다.

주의할 점은 age = += 30;의 형태가 아니라 age += 30;의 형태로 사용했다는 것이다.

+ 말고도 -, /, *, % 모두 가능하다.

비교 연산자

단순 비교 연산자

== 부등호 두 개를 사용해서 왼쪽의 값과 오른쪽의 값이 같은지 확인할 수 있다.

5와 '5'는 다른 타입인데도 같은 값이라고 true로 출력된다.

그리고 0은 아무것도 없는 스트링인 ''과도 같은 값이다.

* 참고로 true는 1, false는 0으로도 다른 함수에서도 계산 가능하다. 하지만 직관적이기 않기 때문에 엑셀에서 true와 false를 그대로 사용하듯 이것도 true와 false로 그냥 쓰는 게 가독성이 좋다.

타입 비교 연산자

숫자 데이터 타입과 문자열 데이터 타입이 같을 수 없는데 같다고 true로 표기하기 때문에 이럴 때는 타입 비교 연산자를 사용하면 된다. ===를 세 개를 사용한다.

실제 실무에서는 == 두 개만 사용하는 경우는 없고 데이터 타입까지 비교하는 ===를 사용한다.

 

==와 ===는 비교 좌항과 우항이 같냐는 질문이었고,

!=, !== 처럼 느낌표를 붙이게 되면 같지 않냐는 질문이 된다. ! 느낌표는 전통적으로 프로그래밍 언어에서 반대의 개념을 갖는다.

 

!= 는 ==에 대비되는 개념이기에 좌항과 우항이 넘버, 스트링이어도 값이 같기에, 같은데 다르냐고 물었기 때문에 false라는 값으로 반환되었고,

!==는 ===에 대비되는 개념으로 여기서 5와 '5'는 다른 타입이기 때문에 값이 다른데, 다른데 다르냐고 물었기 때문에 true라는 값으로 반환되었다.

이것도 역시 실무에서는 !=를 쓸 일이 없다.

대소 비교 연산자

좌항과 우항의 크기를 비교하는 연산자이다. 부등호로 표기한다.

삼항 조건 연산자 (ternary operator)

?를 기준으로 true일 때 출력할 값과 false일 때 출력할 값을 지정해주는 것이다.

10이 0보다 크냐라는 질문에 값이 true이면 물음표 오른쪽 중 : 콜론의 왼쪽 값을 출력하고, false이면 오른쪽 값을 출력하라는 의미이다. 당연히 콘솔에는 "큽니다"라는 값이 출력된다.

논리 연산자

• &&(and) : 모든 값이 true일 때 true를 출력한다.
• ||(or) : 하나라도 true일 때 true를 출력한다. (원화 표시 백슬래시를 쉬프트 누른 것)

 

 

단축평가 (Short Circuit Evaluation)

난해한 개념이라 이해하기 보다는 암기하는 게 편하다.

이 연산자는 계속해서 2~3개 이상의 값도 연결해서 넣을 수 있다.

실무에서 자주 쓰인다.

• && 를 사용했을 때 좌측이 true면 우측 값을 반환
• && 를 사용했을 때 좌측이 false면 좌측 값을 반환
• || 를 사용했을 때 좌측이 true면 좌측 값을 반환
• || 를 사용했을 때 좌측이 false면 우측 값을 반환

예제를 함께 봐야 이해가 쉽다.

1번째줄 : &&를 사용했다. 좌측이 true면 우측값을 반환한다. => "장원영"

2번째줄 : &&를 사용했다. 좌측이 false면 좌측값을 반환한다. => false

3번째줄: ||를 사용했다. 좌측이 true면 좌측값을 반환한다. => true

3번째줄: ||를 사용했다. 좌측이 false면 우측값을 반환한다. => "장원영"

 

계속 연결해서 사용할 수도 있다.

1번째줄 : &&를 사용했다. true && true부터 계산한다. 좌측이 true면 우측값을 반환한다. 우측값은 true && "장원영"이다. 반환하고 보니 또 &&이 사용됐다. 좌측이 true면 우측값을 반환한다. => 장원영

 

2번째줄 : &&를 사용했다. true && false부터 계산한다. 좌측이 true면 우측값을 반환한다. 우측값은 false && "장원영"이다. 반환하고 보니 또 &&이 사용됐다. 좌측이 false면 좌측값을 반환한다. false && "장원영"의 좌측값은 false다. 앞의 true는 이미 계산이 끝나서 우측값을 반환했기 때문에 우측값에서 좌측값을 반환한 것이다.

지수 연산자 (제곱)

**로 표기하며, 제곱(승)을 의미한다.

2 ** 2는 2의 제곱, 즉 4이며 2 ** 10은 2 * 10 = 20이 아니라 2의 10제곱인 1,024다.

null 연산자

의미 : 좌측값이 null이나 undefined일 때 우측값을 반환해라.

 

1번줄에서 name이라는 변수의 값을 지정하지 않았다. ☞ undefined 상태

4번줄에서 name이라는 변수의 값을 변경해주려고 한다. 그런데 = 우측을 보니 name이라는 변수가 ?? (null이거나 undefined일 때 우측값을 반환해라)라고 설정했다.

따라서 name = "장원영" 으로 변수의 값이 변경되었다. 5번에서 콘솔에 띄워보니 "장원영"으로 출력된다.

 

그리고 7번에서 다시 name의 변수를 변경하기 위해 name ?? "안유진";이라고 입력했다.

그리고 8번에서 콘솔에 띄워보니 "장원영"으로 출력됐다.

name에는 이미 4번줄에서 ?? 이라는 null 연산자를 사용하여 장원영이라는 string을 담았기 때문에 더이상 name은 더이상 undefined 상태가 아니기 때문에 이 코드는 실행되지 않는다. 따라서 콘솔에는 똑같이 "장원영"으로 출력된다.

 

위에서 연산자의 순서에 따라 계산의 순서가 정해지는 규칙에 따라 아래와 같이 입력할 수도 있다.

 

 

출처 : https://youtu.be/ZOVG7_41kJE?si=dYkMzILOkao27bRp