모던 자바스크립트 튜토리얼 1

임효진·2022년 10월 16일

typeof 연산자

typeof 연산자는 인수의 자료형을 반환.
자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용.
typeof undefined// "undefined"typeof 0// "number"typeof 10n// "bigint"typeof true// "boolean"typeof "foo"// "string"typeof Symbol("id")// "symbol"typeof Math// "object"  (1)typeof null// "object"  (2)typeof alert// "function"  (3)

브라우저는 사용자와 상호작용할 수 있는 세 가지 함수를 제공.

alert

메시지를 보여줍니다.

prompt

사용자에게 텍스트를 입력하라는 메시지를 띄워줌과 동시에, 입력 필드를 함께 제공.

확인을 누르면 prompt 함수는 사용자가 입력한 문자열을 반환하고, 취소 또는 Esc를 누르면 null을 반환.

confirm

사용자가 확인 또는 취소 버튼을 누를 때까지 메시지가 창에 보여줌.

사용자가 확인 버튼을 누르면 true를, 취소 버튼이나 Esc를 누르면 false를 반환.

형 변환

문자형으로 변환

문자형으로의 형 변환은 문자형의 값이 필요할 때 발생.

alert메서드는 매개변수로 문자형을 받기 때문에, alert(value)에서 value는 문자형이어야 함.
만약, 다른 형의 값을 전달받으면 이 값은 문자형으로 자동 변환.

String(value) 함수를 호출해 전달받은 값을 문자열로 변환 할 수도 있음.

let value = true;
alert(typeof value);// boolean

value = String(value);// 변수 value엔 문자열 "true"가 저장.
alert(typeof value);// stringfalse는 문자열 "false"로, null은 문자열 "null"로 변환되는 것과 같이,
문자형으로의 변환은 대부분 예측 가능한 방식으로 발생.

숫자형으로 변환

숫자형으로의 변환은 수학과 관련된 함수와 표현식에서 자동으로 발생.

숫자형이 아닌 값에 나누기 /를 적용한 경우와 같음.
alert( "6" / "2" );// 3, 문자열이 숫자형으로 자동변환된 후 연산이 수행.Number(value) 함수를 사용하면 주어진 값(value)을 숫자형으로 명시해서 변환할 수 있습니다.
let str = "123";
alert(typeof str);// stringlet num = Number(str);// 문자열 "123"이 숫자 123으로 변환됩니다.

alert(typeof num);// number
아래는 숫자형으로 변환 시 적용되는 규칙.

전달받은 값 / 형 변환 후

undefined	NaN
null	0
true and false	1 과 0
string	문자열의 처음과 끝 공백이 제거됩니다. 공백 제거 후 남아있는 문자열이 없다면 0, 그렇지 않다면 문자열에서 숫자를 읽음.변환에 실패하면 NaN으로 됨.

alert( Number("   123   ") );// 123
alert( Number("123z") );// NaN ("z"를 숫자로 변환하는 데 실패함)
alert( Number(true) );// 1
alert( Number(false) );// 0

불린형으로 변환

숫자 0, 빈 문자열, null, undefined, NaN과 같이 직관적으로도 “비어있다고” 느껴지는 값들은 false.
그 외의 값은 true로 변환.
alert( Boolean(1) );// 숫자 1(true)
alert( Boolean(0) );// 숫자 0(false)

alert( Boolean("hello") );// 문자열(true)
alert( Boolean("") );// 빈 문자열(false)

기본 연산자와 수학

피연산자(operand) 는 연산자가 연산을 수행하는 대상. 5 * 2에는 왼쪽 피연산자 5와 오른쪽 피연산자 2,총 두 개의 피연산자가 있음. '피연산자’는 '인수(argument)'라는 용어로 불리기도 함.
피연산자를 하나만 받는 연산자는 단항(unary) 연산자 라고 칭함.피연산자의 부호를 뒤집는 단항 마이너스 연산자 -는 단항 연산자의 대표적인 예.

let x = 1;

x = -x;
alert( x );// -1, 단항 마이너스 연산자는 부호를 뒤집음.

나머지 연산자 %

나머지 연산자(remainder operator)는 % 기호로 나타내지만, 비율을 나타내는 퍼센트와 관련이 없음.
나머지 연산자를 사용한 표현식 a % b는 a를 b로 나눈 후 그 나머지(remainder)를 정수로 반환.
alert( 5 % 2 );// 5를 2로 나눈 후의 나머지인 1을 출력
alert( 8 % 3 );// 8을 3으로 나눈 후의 나머지인 2를 출력

거듭제곱 연산자**

거듭제곱 연산자(exponentiation operator)를 사용한 a ** b를 평가하면 a를 b번 곱한 값이 반환.
alert( 2 ** 2 );// 4  (2 * 2)
alert( 2 ** 3 );// 8  (2 * 2 * 2)
alert( 2 ** 4 );// 16 (2 * 2 * 2 * 2)

이항 연산자'+'와 문자열 연결

이항 연산자 +의 피연산자로 문자열이 전달되면 덧셈 연산자는 덧셈이 아닌 문자열을 병합(연결).

let s = "my" + "string";
alert(s);// mystring
첫 번째 피연산자가 문자열인지, 두 번째 피연산자가 문자열인지는 중요치않음.
피연산자 중 어느 하나가 문자열이면 다른 하나도 문자열로 변환.
alert(2 + 2 + '1' );// '221'이 아니라 '41'이 출력.

비교 연산자

다른 연산자와 마찬가지로 비교 연산자 역시 값을 반환. 반환 값은 불린형.

true가 반환되면, ‘긍정’, ‘참’, '사실’을 의미.
false가 반환되면, ‘부정’, ‘거짓’, '사실이 아님’을 의미.
alert( 2 > 1 );// true
alert( 2 == 1 );// false
alert( 2 != 1 );// true
반환된 불린값은 다른 여타 값처럼 변수에 할당 할 수 있음.

let result = 5 > 4;// 비교 결과를 변수 할당
alert( result );// true

문자열 비교

자바스크립트는 ‘사전’ 순으로 문자열을 비교.
'사전편집(lexicographical)'순이라고 불리기도 하는 이 기준을 적용하면
사전 뒤쪽의 문자열은 사전 앞쪽의 문자열보다 크다고 판단.

실제 단어를 사전에 실을 때 단어를 구성하는 문자 하나하나를 비교하여 등재 순서를 정하는 것과 같이
자바스크립트도 문자열을 구성하는 문자 하나하나를 비교해가며 문자열을 비교.
alert( 'Z' > 'A' );// true
alert( 'Glow' > 'Glee' );// true
alert( 'Bee' > 'Be' );// true

문자열 비교 시 적용되는 알고리즘은 다음과 같음.
두 문자열의 첫 글자를 비교.
첫 번째 문자열의 첫 글자가 다른 문자열의 첫 글자보다 크면(작으면), 첫 번째 문자열이 두 번째 문자열보다 크다고(작다고) 결론 내고 비교를 종료.
두 문자열의 첫 글자가 같으면 두 번째 글자를 같은 방식으로 비교.
글자 간 비교가 끝날 때까지 이 과정을 반복.
비교가 종료되었고 문자열의 길이도 같다면 두 문자열은 동일하다고 결론. 비교가 종료되었지만 두 문자열의 길이가 다르면 길이가 긴 문자열이 더 크다고 결론.

다른 형을 가진 값 간의 비교

비교하려는 값의 자료형이 다르면 자바스크립트는 이 값들을 숫자형으로 변경.
alert( '2' > 1 );// true, 문자열 '2'가 숫자 2로 변환된 후 비교가 진행됩니다.
alert( '01' == 1 );// true, 문자열 '01'이 숫자 1로 변환된 후 비교가 진행됩니다.

불린값의 경우 true는 1, false는 0으로 변환된 후 비교
alert( true == 1 );// true
alert( false == 0 );// true