표현식과 연산자

YangJiWon·2020년 8월 20일

모던 자바스크립트 입문을 정리한 내용입니다.

표현식

표현식이란 결과적으로 어떤 값으로 평가되는 것입니다. 여기에서 표현식을 평가한다는 말은 표현식의 값과 변수, 함수 등의 값을 바탕으로 식의 값을 계산하는 행위를 뜻합니다.
가장 간단한 표현식은 숫자, 문자열, 논리 값 등의 원시 값입니다.
변수, 프로퍼티, 배열 요소, 함수 호출, 메서드 호출도 표현식입니다.
표현식은 연산자를 통해 더욱 복잡한 표현식을 만들 수 있습니다.

산술 연산할 때 주의 사항

정수끼리 나누어도 결과가 부동소수점이 된다.
7 / 2 // -> 3.5
나머지 연산자 %의 결과는 부동소수점이다.

15 % 4 // -> 3
5 % 1.5 // -> 0.5

+연산자는 피연산자 중 하나가 문자열이면 나머지 피연산자를 문자열로 만든다.
1 + "2month" // -> "12month" : 숫자 1을 문자열 "1"로 바꾸고 연결
기타

계산할 수 없는 경우에는 NaN으로 평가합니다. 또한 산술 연산자의 피연산자가 true면 1, false와 null이면 0으로 평가합니다. undefined이면 NaN으로 평가합니다.

0/0 // -> NaN
"one" * 1 // -> NaN
true + true // -> 2
1 + null // -> 1 : null을 0으로 바꾸어서 계산
1 + undefined // -> NaN

증가 연산자 또는 감소 연산자를 연속으로 사용하면 참조 오류가 발생합니다.

부동소수점과 정확도 문제

산술 연산을 할 때는 숫자에 유효한 자릿구가 있으므로 계산할 때 오차가 발생한다는 점을 항상 염두에 두어야 합니다.
숫자를 자릿수가 정해진 부동소수점으로 표현하여 계산하면 오차가 발생하는데 이것을 정확도 문제라고 합니다.
정확도 문제가 일어나는 예시는 a / b // -> 0.7999999999999라서 a / b == 0.8 // -> false로 결괏값이 나온다는 점입니다.
이처럼 숫자를 비교할 때는 오차가 있다는 것을 고려해야 합니다.
Math.abs(a / b - 0.8) < 1e-10
표현식을 이렇게 수정하면 정확도 문제를 피할 수 있습니다.

다양한 문자열 메서드

문자열 메서드

동일 연산자와 일치 연산자

동일 연산자

동일 연산자는 좌변과 우변의 피연산자가 같은지를 확인합니다.

좌우 피연산자의 타입이 같을 때
변수의 데이터 타입에 따라 값이 달라지는데 원시 타입 변수의 값(데이터)과 객체 타입의 변수의 값(객체의 참조 = 메모리 주소)은 내용물이 다르기 때문입니다.
따라서 여기서는 객체 타입 변수의 값이 같은지를 판별하는 행위는 같은 객체를 가리키는지를 판별하는 것과 같습니다.

var a = [1, 2, 3];
var b = [1, 2, 3];
var c = a;
console.log(a == b); //-> false
console.log(a == c); //-> true

각 배열에는 같은 데이터가 담겨 있지만 메모리에서 차지하는 위치가 다릅니다. 따라서 a 값과 b 값이 다르다고 판정합니다.

좌우 피연산자의 타입이 다를 때
2.1 undefined와 null은 같은 것으로 친다.
2.2 한쪽이 숫자고 다른 한쪽이 문자열이면 문자열을 숫자로 변환해서 비교한다.
2.3 둘 중 한 쪽이 논리값이면 true = 1, false = 0으로 변환해서 비교한다.
2.4 한 쪽이 객체고 다른 한 쪽이 숫자 또는 문자열이면 객체를 toString이나 valueOf 메서드를 사용해서 원시 타입으로 변환한 다음에 비교한다.
2.5 앞의 규칙에서 벗어나면 모두 '같지 않음'으로 판정한다.

null == undefined 		//->true
1 == "1" 				//->true
"0xff" == 255 			//->true
true == 1 				//->true
true == "1" 			//->true
(new String("a")) == "a"//->true
(new Number(2)) == 2 	//->true
[2] == 2 				//->true

일치 연산자

일치(===)연산자는 피연산자를 평가한 후에 타입을 변환하지 않은 상태의 두 값을 엄격하게 비교합니다.
타입과 값이 모두 같으면 같다고 판정하고 그렇지 않으면 같지 않다고 판정합니다.
단, NaN만큼은 NaN을 포함하고 모든 값과 같지 않다고 판정합니다.
NaN === NaN //->false
NaN은 x !== x를 만족하는 유일한 값임을 확인할 수 있습니다. 변수 값이 NaN인지는 isNaN함수로도 확인할 수 있습니다.

null === undefined 			//-> false
1 === "1" 				//-> false
"0xff" === 255 				//-> false
true === 1 				//-> false
true === "1" 				//-> false
(new String("a")) === "a"		//-> false
(new Number(2)) === 2 			//-> false
[2] === 2 				//-> false

피연산자의 평가

피연산자	평가되는 값
0, -0, 빈 문자열(""), NaN, null, undefined	false
0을 제외한 숫자, 빈 문자열을 제외한 문자열, 모든 객체, 심벌	true

논리곱 연산자와 논리합 연산자의 단락 평가

논리곱 연산자와 논리합 연산자는 단락 평가를 합니다. 단락 평가란 첫 번재 피연산자의 값이 표현식을 결정하면 두 번째 피연산자를 평가하지 않는 것을 말합니다.
a && b란 논리식이 있습니다. a를 평가한 값이 false이면 b의 값이 관계없이 표현식 전체 값이 false가 됩니다.
이와 같이 a || b도 a를 평가한 값이 true라면 b의 값이 관계없이 표현식 전체 값이 true가 됩니다.

이 때 논리곱 연산자와 논리합 연산자는 논리값(true, false)대신에 마지막으로 평가한 피연산자 값을 반환합니다.

var p = null;
p && p.name // -> null: p가 false로 평가되므로 p를 반환함
p = { name : "Tom", age : 18 };
p && p.name // -> "Tom" : p가 true로 평가되므로 p.name을 반환함

|| 연산자는 여러 개의 값 후보 중에서 null 또는 undefined가 아닌 값을 선택하고자 할 때 유용하게 사용됩니다.

var time = time_interval || animationSettings.time || 33;
function f(x) {
  x = x || 100;
  ...
}

명시적 타입 변환

숫자를 문자열로 변환하기

숫자 + 문자열

10 + "cookies" // -> "10cookies"
100 + "" // -> "100"
("0000" + 12).slice(-4) // -> "0012

Number 객체의 메서드를 활용하는 방법

var n = 26;
n.toString() // -> "26"
n.toString(2) // -> "11010" : 2진수 문자열로 변환
n.toString(16) // -> "1a" : 16진수 문자열로 변환
(26).toSTring(16) // -> "1a" : 숫자에서 바로 메서드를 사용하고자 할 때는 소괄호로 묶는다

var x = 1234.567;
x.toString() // -> "1234.567"
x.toString(16) // -> "4d2.9126e978d5"
x.toFixed(0) // -> "1235"
x.toFixed(2) // -> "1234.57"
x.toFixed(4) // -> "1234.5670"
x.toExponential(3) // -> "1.235e+3"
x.toPrecision(3) // -> "1.23e+3"
x.toPrecision(6) // -> 1234.57

String 함수를 활용하는 방법

String(26) // -> "26"
String(1234.567) // -> "1234.567"
String(0x1a) // -> "26"

String("ABC") // -> "ABC"
String(true) // -> "true"
String(false) // -> "false"
String(NaN) // -> "NaN"
String({x:1, y:2}) // -> "[object Object]"
String([1, 2, 3]) // -> "1, 2, 3"

문자열을 숫자로 변환하기

수식 안에서 묵시적으로 변환하는 방법

var s = "2";
s - 0 // -> 2
+s // -> 2

parseInt와 parseFloat 함수를 사용하는 방법

parseInt("3.14") // -> 3
parseFloat("3.14") // -> 3.14
parseInt("3.14 meters") // -> 3: 숫자 다음에 등장하는 문자열은 무시
parseFloat("3.14 meters") // -> 3.14 : 숫자 다음에 등장하는 문자열은 무시
parseInt("0xFF") // -> 255 : 문자열 앞부분에 "0x"가 있으므로 16진수로 해석
parseInt("0.5") // -> 0
parseInt(".5") // -> NaN : 문자열 앞부분에 "."이 있으므로 해석하지 않음
parseInt("abc") // -> NaN : 숫자로 해석할 수 없음
parseInt("\100") // -> NaN : 문자열 앞부분에 "\"가 있으므로 해석하지 않음

parseInt("101", 2) // -> 5 : 문자열을 2진수로 해석해서 변환
parseInt("ff", 16) // -> 255 : 문자열을 16진수로 해석해서 변환

Number 함수를 활용하는 방법

Number("2.71828") //-> 2.71828
Number(123) // -> 123
Number(true) // -> 1
Number(NaN) // -> NaN
Number(undefined) // -> NaN
Number(null) // -> 0
Number({x:1, y:2}) // -> NaN
Nubmer([1, 2, 3]) // -> NaN