모던 자바스크립트 Deep Dive(3)

Daon·2023년 3월 21일

모던자바스크립트

목록 보기

3/12

_표현식과 연산자

표현식

값은 다양한 방법으로 생성이 가능하다. 다양한 방법이란 표현식이다.
프로그래밍 언어에서 표현식은 중요한 역할을 한다.

표현식은 리터럴, 식별자, 연산자, 함수 등의 조합을 뜻한다.
표현식은 리터럴표현식, 식별자표현식, 연산자표현식 등으로 나누어져 있지만 결국
평가되어 하나의 값을 만든다는 점에서 동일하다.

// 리터럴 표현식
10

// 식별자 표현식
sum

// 연산자 표현식
10 + 20

// 함수/메소드 호출 표현식
square()

표현식에서 중요한 개념은 이들은 결국 동등한 관계이기에 값처럼 사용이 가능하다
값이 위치할 수 있는 자리에는 표현식도 위치할 수 있다는 의미다.

var x = 10;

// 연산자 표현식
x + 30;  // 식별자 표현식과 숫자 리터럴과 연산자의 조합

연산자

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산등을 수행해 하나의 값을 만든다.
이때 연산의 대상을 피연산자라고 한다.

연산자의 종류

산술 연산자
- 이항 산술 연산자
- 단항 산술 연산자
- 문자열 연결 연산자
할당 연산자
비교 연산자
- 동등/일치 비교 연산자
- 대소 관계 비교 연산자
삼항 조건 연산자
논리 연산자
쉼표 연산자
그룹 연산자
typeof 연산자

산술 연산자

산술 연산자는 피연산자 대상으로 수학적 계산을 통하자 새로운 숫자 값을 만든다.
연산이 불가능한 경우 NaN을 반환한다.

1. 이항 산술 연산자

이항 산술 연산자는 2개의 피연산자 대상으로 연산하여 숫자 타입의 값을 만든다.
모든 이항 산술 연산자는 피연산자의 값을 바꾸진 않는다.

+: 덧셈
-: 뺄셈
*: 곱셈
/: 나눗셈
%: 나머지

2. 단항 산술 연산자

단항 산술 연산자는 1개의 피연산자를 대상으로 연산한다.
증가/감소연산자는 피연산자의 값을 변경하는 부수 효과가 있다.

++ : 증가
-- : 감소
+: 어떠한 효과도없음
-: 양수를 음수로, 음수를 양수로 반전

var x = 5, result;

// 선대입 후증가 (Postfix increment operator)
result = x++;
console.log(result, x); // 5 6

// 선증가 후대입 (Prefix increment operator)
result = ++x;
console.log(result, x); // 7 7

// 선대입 후감소 (Postfix decrement operator)
result = x--;
console.log(result, x); // 7 6

// 선감소 후대입 (Prefix decrement operator)
result = --x;
console.log(result, x); // 5 5

-10 // -10
-'10' // -10
-true // -1
-false // -0

-단항 연산자 같은 경우 피연산자의 부호를 반전한 값을 반환
숫자 타입이 아닌 경우 숫자 타입으로 반환한다. 이 때 부수효과는 없다.

문자열 연결 연산자

+연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 작동한다.
그 외의 경우는 덧셈 연산자이다.

// 문자열 연결 연산자
'1' + '2'      // '12'
'1' + 2       // '12'

// 산술 연산자
1 + 2          // 3
1 + true       // 2 (true → 1)
1 + false      // 1 (false → 0)
true + false    // 1 (true → 1 / false → 0)
1 + null       // 1 (null → 0)
1 + undefined // NaN (undefined → NaN)

개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동변환 되는것을
암묵적 타입 변환 또는 타입 강제변환이라고 한다.

할당 연산자

할당 연산자는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.
할당 연산자는 좌항에 값을 할당하므로 부수 효과가 있다.

var x;

x = 10;   // 10
x += 5;   // 15
x -= 5;   // 10
x *= 5;   // 50
x /= 5;   // 10
x %= 5;   // 0

var str = 'My name is ';
str += 'Lee'; // My name is Lee

비교 연산자

비교 연산자는 좌항, 우항의 피연산자를 비교하여 불리언 값을 반환한다.

1. 동등/일치 비교 연산자

동등 비교 (==)연산자는 좌항, 우항의 피연산자를 비교 할 때 암묵적 타입 변환을 통해
타입을 일치시킨 후 같은 값을 갖는지 비교한다.
따라서 비교과정에서 타입이 다르더라도 같은 값이면 true를 반환한다.

'' == '0'           // false
0 == ''             // true
0 == '0'            // true

false == 'false'    // false
false == '0'        // true

false == undefined  // false
false == null       // false
null == undefined   // true

동등 연산자는 편리한 경우도 많지만 수많은 부작용을 일으키므로 사용하지 않는 편이 좋다.
아래에 예제와 같이 일치 비교(===)연산자를 통해서 하도록 하자.

// 일치 비교
5 === 5   // true
5 === '5' // false

NaN같은 경우는 따로 isNaN()함수를 통해서 비교해야한다
숫자 0도 0 === -0 (true)이기에 조심해야한다

2. 대소 관계 비교 연산자

대소 관계 비교 연산자는 피연산자의 크기를 비교하여 불리언 값을 반환한다.

삼항 조건 연산자

삼항 조건 연산자는 조건식의 평가 결과에 따라 반환값을 결정한다 (if문과 같은 과정)

var x = 2;

// x가 짝수이면 '짝수'를 홀수이면 '홀수'를 반환한다.
// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다.
var result = x % 2 ? '홀수' : '짝수';

console.log(result); // 짝수

if문과 비슷하지만 if문의 경우 표현식이 아닌 문이다.
따라서 삼항 조건 연산자 같은 경우 값으로 평가 될 수 있지만 if문에 경우는 값으로 평가 될 수없다.

논리 연산자

논리 연산자는 우항, 좌항의 피연산자를 논리 연산한다(or, and)
논리 부정같은 경우 언제나 불리언 값을 반환한다. 하지만 논리합(||), 논리곱(&&) 같은 경우는 불리언 값을 언제나 반환하진 않는다.

논리 부정 연산자는 언제나 불리언 값을 반환한다.
여기서 동적으로 피연산자가 불리언 값이 아니면 암묵적 타입 변환한다.

// 암묵적 타입 변환
!0 // true

위에서 발한 논리곱(||), 논리합(&&) 두 연산자는 불리언 값이 아닌 일반적인 문에서도 사용 가능하다. 이를 단축평가라고 한다.

// 단축 평가
'Cat' && 'Dog' // “Dog”

단축 평가 같은 경우 아래의 상황에서 유용하게 사용된다.

객체가 null인지 확인하고 참조

var elem = null;

console.log(elem.value); // TypeError: Cannot read property 'value' of null
console.log(elem && elem.value); // null

또는 함수의 인수를 초기화 할 때 사용한다.

// 단축 평가를 사용한 매개변수의 기본값 설정
function getStringLength(str) {
  str = str || '';
  return str.length;
}

쉼표 연산자

쉼표 연산자는 왼쪽 피연산자부터 차례대로 평가하고 마지막에 평가가 끝나면 평가 결과를 반환한다.

var x, y, z;
x = 1, y = 2, z = 3; // 3

그룹 연산자

그룹연산자 ((...)) 연산자 내의 표현식을 최우선으로 평가한다

10 * 2 + 3   // 23
10 * (2 + 3) // 50

typeof 연산자

typeof 연산자는 연산자 뒤에 위치한 피연산자의 데이터 타입을 문자열로 반환한다.
총 7가지의 문자열로 데이터 타입을 반환 string, number, boolean, undefined, symbol, object, function 중 하나이다. null 값은 없다.

null 같은 경우는 object를 반환한다 JS 첫번째 버전에서 이렇게 설계된걸
현재 버전에서 반영하지 못하고 있다고 한다.

따라서 null 타입을 확일 할 때는 일치 연산자(===)를 사용하자.

typeof연산자는 선언하지 않은 식별자를 연산할 때
undefined를 반환하는데 카일 심슨의 “You don’t know JS”에서는 특별한 안전 가드(safety guard)로 설명한다. 하지만 모던 자바스크립트 개발에서는 대부분 모듈을 사용하고 전역 변수인 플래그를 사용하지 않으므로 의도적으로 사용할 필요는 없다.

Daon

같이 일하고싶은 그런 개발자!

이전 포스트

모던 자바스크립트 Deep Dive(2)

다음 포스트

모던 자바스크립트 Deep Dive(3)