부동소수점
자바스크립트는 부동소수점 방식을 이용한다.
떠돌이 소수점이라고도 한다.
IEEE 754 표준을 사용한다.
인간은 10진수를 사용하지만 컴퓨터는 아니다. 때문에 부동소수점 표기방식을 이용하여 컴퓨터가 알아듣도록 바꿔주는 정규화 과정이 이루어진다.
문자
const word = '문자';
const word2 = "문자";
const word3 = `문자
`;몇 번째 글자가 뭔지 알고 싶을 때
const word='문자' console.log(word[]); []안에 0부터 입력
문자열의 길이를 알고자 할 때
const word='문자' console.log(word.length); => 2
문자의 연산
const word='문자1' const word2='문자2' // const words = word + word2 console.log(words); => 문자1문자2 // const words = word + ' ' + word2 console.log(words); => 문자1 문자2
연산자 (Operator)
산술 연산자
대입(할당) 연산자
오른쪽 값을 왼쪽에 할당
x = y x = y
복합 대입 연산자
+= : 앞과 뒤를 더해라
-= : 앞에서 뒤를 빼라
*= : 곱해라
/= : 나눠라
%= : 나머지를 구해라
증가 감소 연산자
++, --를 앞에쓰면 계산이 된 상태에서 복사되고, 뒤에 쓰면 그 이후에 복사가 된다.
let count = 0;
// 증감, 증가 단항 연산자
count--;
count--;
count--;
console.log(count); => -3
count++;
count++;
count++;
console.log(count); =>3단항 연산자 +와 숫자형으로의 변환
덧셈 연산자 +는 이항 연산자뿐만 아니라 단항 연산자로도 사용할 수 있습니다.
숫자에 단항 덧셈 연산자를 붙이면 이 연산자는 아무런 동작도 하지 않습니다. 그러나 피연산자가 숫자가 아닌 경우엔 숫자형으로의 변환이 일어납니다.
예시:
// 숫자에는 아무런 영향을 미치지 않습니다.
let x = 1;
alert( +x ); // 1
let y = -2;
alert( +y ); // -2
// 숫자형이 아닌 피연산자는 숫자형으로 변화합니다.
alert( +true ); // 1
alert( +"" ); // 0단항 덧셈 연산자는 짧은 문법으로도 Number(...)와 동일한 일을 할 수 있게 해줍니다.
개발을 하다 보면 문자열을 숫자로 변환해야 하는 경우가 자주 생깁니다.
HTML 폼(form) 필드에서 값을 가져왔는데 그 값이 문자형일 때 같이 말이죠.
실제로 폼에서 가지고 온 값은 대개 문자열 형태입니다.
이항 덧셈 연산자를 사용하면 아래와 같이 값이 문자열로 변해서 연결될 겁니다.
let apples = "2";
let oranges = "3";
alert( apples + oranges ); // 23, 이항 덧셈 연산자는 문자열을 연결합니다.원하는 대로 값을 더해주려면, 단항 덧셈 연산자를 사용해 피연산자를 숫자형으로 변화시키면 됩니다.
let apples = "2";
let oranges = "3";
// 이항 덧셈 연산자가 적용되기 전에, 두 피연산자는 숫자형으로 변화합니다.
alert( +apples + +oranges ); // 5
// `Number(...)`를 사용해서 같은 동작을 하는 코드를 작성할 수 있지만, 더 기네요.
// alert( Number(apples) + Number(oranges) ); // 5위 식을 수학자가 본다면 불필요한 덧셈 기호에 대해 언급하며 식이 이상하다고 지적할 겁니다. 프로그래머라면 아니겠지만 말이죠. 위 식은 우리가 의도한 대로 단항 덧셈 연산자가 먼저 문자열을 숫자로 변환시키고, 이항 덧셈 연산자가 그 결과들을 더해주고 있습니다.
비교 연산자
동등 연산자 (==)
피연산자가 서로 같으면 true를 반환 (느슨)
3 == var1
"3" == var1
3 == '3'
부등 연산자 (!=)
피연산자가 서로 다르면 true를 반환합니다. (느슨)
var1 != 4
var2 != "3"
일치 연산자(===)
두 피연산자의 값과 타입이 모두 같은 경우 true를 반환합니다. (엄격)
3 === var1
불일치 연산자 (!==)
피연산자의 값 또는 타입이 서로 다를 경우 true를 반환합니다. (엄격)
var1 !== "3"
3 !== '3'
nullish 병합 연산자 '??'
nullish 병합 연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 ‘확정되어있는’ 변수를 찾을 수 있습니다.
a ?? b의 평가 결과는 다음과 같습니다.
- a가 null도 아니고 undefined도 아니면 a
- 그 외의 경우는 b
nullish 병합 연산자 ??없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같습니다.
x = (a !== null && a !== undefined) ? a : b;비교 연산자와 논리 연산자만으로 nullish 병합 연산자와 같은 기능을 하는 코드를 작성하니 코드 길이가 길어지네요.
또 다른 예시를 살펴봅시다. firstName, lastName, nickName이란 변수에 사용자 이름이나 별명을 저장하는데, 사용자가 아무런 정보도 입력하지 않는 케이스도 허용한다고 해보겠습니다.
화면엔 세 변수 중 실제 값이 있는 변수의 값을 출력하는데, 세 변수 모두 값이 없다면 '익명의 사용자’가 출력되도록 해보죠.
이럴 때 nullish 병합 연산자 ??를 사용하면 값이 정해진 변수를 간편하게 찾아낼 수 있습니다.
let firstName = null;
let lastName = null;
let nickName = "바이올렛";
// null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛'??'와 '||'의 차이
nullish 병합 연산자는 OR 연산자 ||와 상당히 유사해 보입니다. 실제로 위 예시에서 ??를 ||로 바꿔도 그 결과는 동일하기까지 하죠. 관련 내용은 이전 챕터에서 살펴본 바 있습니다.
그런데 두 연산자 사이에는 중요한 차이점이 있습니다.
- ||는 첫 번째 truthy 값을 반환합니다.
- ??는 첫 번째 정의된(defined) 값을 반환합니다.
null과 undefined, 숫자 0을 구분 지어 다뤄야 할 때 이 차이점은 매우 중요한 역할을 합니다.
예시를 살펴봅시다.
height = height ?? 100;
height에 값이 정의되지 않은경우 height엔 100이 할당됩니다.
이제 ??와 ||을 비교해봅시다.
let height = 0;
alert(height || 100); // 100
alert(height ?? 100); // 0height || 100은 height에 0을 할당했지만 0을 falsy 한 값으로 취급했기 때문에 null이나 undefined를 할당한 것과 동일하게 처리합니다. 따라서 height || 100의 평가 결과는 100입니다.
반면 height ?? 100의 평가 결과는 height가 정확하게 null이나 undefined일 경우에만 100이 됩니다. 예시에선 height에 0이라는 값을 할당했기 때문에 얼럿창엔 0이 출력됩니다.
이런 특징 때문에 높이처럼 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합합니다.
문자열 비교 연산
길이가 길어도 앞 글자의 크기를 먼저 비교해서 반환한다.
논리 연산자
논리 연산자는 보통 불리언(논리) 값과 함께 사용해서 불리언 값을 반환합니다.
그러나 &&와 || 연산자는 사실 두 피연산자 중 하나를 반환하는 것으로, 만약 둘 중 하나가 불리언 값이 아니라면 논리 연산자의 반환 값도 불리언 값이 아닐 수 있습니다.
논리 AND (&&)
expr1 && expr2
좌항 후항 둘 다 참일 때 true를, 그 외에는 false를 반환합니다.
여러개가 있어도 마찬가지 입니다.
var a1 = true && true; // t && t returns true
var a2 = true && false; // t && f returns false
var a3 = false && true; // f && t returns false
ar a8 = true && true && true && true; // t && t && t && t returns true
var a9 = true && true && false && true; // t && t && f && t && t returns false논리 OR (||)
expr1 || expr2
둘 중 하나가 참일 때 true를, 그 외에는 false를 반환합니다.
var o1 = true || true; // t || t returns true
var o2 = false || true; // f || t returns true
var o3 = true || false; // t || f returns true논리 NOT (!)
!expr
피연산자를 true로 변환할 수 있으면 false를 반환합니다.
그 외에는 true를 반환합니다.
뒤집어서 생각하면 됩니다.
var n1 = !true; // !t returns false
var n2 = !false; // !f returns true
var n3 = !"Cat"; // !t returns false
조건 (삼항) 연산자
const temp = 1 === "1" ? "참일때" : "거짓일때";
// 아래 if문과 같은 뜻이다.
let temp2;
if (1 === "1") {
temp2 = "참일때";
} else {
temp2 = "거짓일때";
}
다중 ‘?’
물음표 연산자?를 여러 개 연결하면 복수의 조건을 처리할 수 있습니다.
예시:
let age = prompt('나이를 입력해주세요.', 18);
let message = (age < 3) ? '아기야 안녕?' :
(age < 18) ? '안녕!' :
(age < 100) ? '환영합니다!' :
'나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';
alert( message );물음표 연산자를 이런 방식으로 쓰는 걸 처음 본 분이라면 이 코드가 어떻게 동작하는지 파악하기 힘들 수 있습니다. 그러나 주의를 집중하고 보면, 단순히 여러 조건을 나열한 코드임에 불과하다는 것을 알 수 있습니다.
첫 번째 물음표에선 조건문 age < 3을 검사합니다.
그 결과가 참이면 '아기야 안녕?'를 반환합니다. 그렇지 않다면 첫 번째 콜론 ":"에 이어지는 조건문 age < 18을 검사합니다.
그 결과가 참이면 '안녕!'를 반환합니다. 그렇지 않다면 다음 콜론 ":"에 이어지는 조건문 age < 100을 검사합니다.
그 결과가 참이면 '환영합니다!'를 반환합니다. 그렇지 않다면 마지막 콜론 ":" 이후의 표현식인 '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!'를 반환합니다.
if..else를 사용하면 위 예시를 아래와 같이 변형할 수 있습니다.
if (age < 3) {
message = '아기야 안녕?';
} else if (age < 18) {
message = '안녕!';
} else if (age < 100) {
message = '환영합니다!';
} else {
message = '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';
}기타 연산자
void
표현식 결과를 버릴 때.
주어진 표현식을 평가하고 undefined를 반환합니다.
오직 undefined 원시값을 얻기 위해 void 0 또는 void(0)처럼 사용하는 경우도 볼 수 있습니다. 이런 경우 전역 undefined를 대신 사용해도 됩니다.
