[JS] 모던 JavaScript 튜토리얼#2 자바스크립트 기본

상호작용

alert

alert함수는 사용자가 확인 버튼을 누를 때 까지 메시지를 보여주는 창이 계속 떠있는다. 메시지가 있는 작은 창은 모달 창(modal window)이라고 부른다. 사용자는 확인 버튼을 누르기 전 까지 모달 창 바깥에 있는 버튼을 누른다던지 행동을 할 수 없다.

alert("Hello");

 

 

 

propmt

propmt는 두 개의 인수를 받아 입력필드, 확인 및 취소 버튼이 있는 모달 창을 띄워준다. 사용자가 입력한 필드에 기재한 문자열을 반환한다. 입력 취소의 경우 null을 반환한다.

result = prompt(title, [default]);

• title : 사용자에게 보여줄 문자열
• default : 입력 필드의 초깃값 (생략가능)

IE환경에서는 두 번째 매개변수가 없는경우 undefined를 명시한다. 고로 모든 사용자에게 깔끔한 프롬프트를 보여주기 위해서는 두 번째 매개변수를 항상 전달하는 것이 좋다.

 

let test = prompt("Test", "");

 

 

confirm

cofirm함수는 매개변수로 받은 질문과 확인 및 취소 버튼이 있는 모달을 보여준다. 사용자가 확인을 누른경우 true, 취소를 누른경우 false를 반환한다.

 

 

형 변환

함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환된다. 이러한 과정을 형 변환(type conversion)이라고 한다. 예시로는 alert가 전달받은 값을 문자열로 자동변환 하는 것이 있다.

 

문자형으로 변환

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

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

value = String(value);	// value에 "true" 저장
alert(typeof value);	// string

 

숫자형으로 변환

수학과 관련된 함수와 표현식에서 숫자형으로 변환은 자동으로 일어난다. 예를 들어 숫자형이 아닌 값에 /를 적용한 경우가 있을 것이다.

Number(value)함수를 호출 해 주어진 값을 숫자로 변환 할 수 있다. 문자 기반 폼(form)을 이용해 입력받는 경우, 이러한 형변환이 필수적이다. 

alert("6" / "2");	// 3

let str = "123";
alert(typeof str);	// string

let num = Number(str);	// "123"이 123으로 변환
alert(typeof num);	// number

 

숫자 이외의 문자열을 숫자형으로 변환시에는 NaN이 된다.

 

아래의 표는 숫자형으로 변환시 적용되는 규칙이다.

전달받은 값	형 변환 후
undefined	NaN
null	0
true and false	1, 0
string	문자열의 처음과 끝 공백 제거 후 남아있는 문자열이 없다면 0, 그렇지 않다면 문자열의 숫자를 읽는다. 변환 실패시 NaN

 

불린형으로 변환

불린형으로의 변환은 논리 연산을 수행할 때 발생한다. Boolean(value)를 호출하면 명시적으로 형 변환을 수행할 수 있다.

• 숫자 0, 빈 문자열, null, undefined, NaN과 같이 직관적으로 비어있다고 느껴지는 값들 => false
• 이외의 값은 true

문자열 "0"은 true인 것에 주의하자.

 

기본 연산자와 수학

이번 챕터에서는 자바스크립트에서만 제공하는 연산자에 대해 알아본다. 먼저, 용어에 대해 정리하겠다.

 

단항, 이항, 피연산자

• 피연산자(operand)는 연산자가 연산을 수행하는 대상이다. 
  • 5 x 2에서는 두개의 피 연산자가 존재한다.
  • 인수(argument)라는 용어로 불리기도 한다.
• 단항(unary)연산자는 피연산자를 하나만 받는다. 
  • 대표적으로, -가 있다.(부호를 뒤집음)
• 이항(binary)연산자는 두 개의 피연산자를 받는다. 

 

수학

자바스크립트에서 지원하는 수학 연산자는 아래와 같다.

• 덧셈, 뺄셈, 곱셈, 나눗셈
• 나머지(%), 거듭제곱(**)

거듭제곱 연산자(exponentiation operator)

a**b를 수행하면 a를 b번 곱한 값이 반환된다.

console.log(2 ** 2);	// 4
console.log(2 ** 3);	// 8

 

문자열 연결

이항 연산자 +의 피연산자로 문자열이 전달되면 덧셈 연산자는 덧셈이 아닌 문자열을 연결한다.

console.log('1'+ 2);	// 12
console.log(2 + '1');	// 21
// 피연산자 중 어느 하나가 문자열이라면 다른 하나도 문자열로 변환

console.log(2 + 2 + '1');	// 41

 

단항 덧셈 연산자를 사용한 숫자형으로의 변환

숫자에 단항 덧셈 연산자를 붙이면 아무런 동작을 하지 않지만, 피 연산자가 숫자가 아닌 경우, 숫자형으로의 변환이 일어난다. Number()와 동일한 일을 할 수 있는것이다.

alert(+true);	// 1
alert(+"");	// 0

 

개발시 문자열을 숫자로 변환해야 하는 경우가 굉장히 자주 생기는데, 실제로 폼에서 가지고 온 값을 아래와 같이 쉽게 숫자로 변환시킬 수 있다.

let apples = "2";
let oranges = "3";

alert( apples + oranges );	// 23
alert( +apples + +oranges);	// 5

 

연산자 우선순위

하나의 표현식에 둘 이상의 연산자가 있는 경우, 실행순서는 연산자의 우선순위에 의해 결정된다. 아래의 사실을 기억해두자.

• 우선순위는 소괄호를 사용하여 무력화시킬 수 있다.
• 동일한 기호에서, 이항연산자보다 단항연산자의 우선순위가 더 높다.

 

할당 연산자 체이닝

할당 연산자는 아래와 같이 여러개를 연결할 수 있다.

let a, b, c;
a = b = c = 2 + 2;

// 평가는 우측부터 진행된다.
// 위의 코드는 가독성이 매우 떨어지므로 아래와 같이 줄을 나눠 코드를 작성하자.

c = 2 + 2;
b = c;
a = c;

 

 

비교 연산자

비교 연산자는 불린값을 반환한다. 반환된 불린값은 변수에 할당 할 수 있다.

let result = 5 > 4;	
console.log(result);	// true;

 

 

문자열 비교

자바스크립트는 유니코드 순으로 문자열을 비교한다. 알고리즘은 다음과 같다.

1. 두 문자열의 첫글자를 비교
2. 첫 번째 문자열의 첫 글자가 다른 문자열의 첫 글자보다 크면, 첫 번째 문자열이 더 크다고 결론내고 비교 종료
3. 두 문자열의 첫 글자가 같으면 두 번째 글자를 같은 방식으로 비교
4. 글자 반 비교가 끝날 때 까지 반복
5. 비교가 종료되고, 문자열의 길이또한 동일하다면 동일하다고 결론냄. 비교가 종료되었으나 두 문자열의 길이가 다르면 길이가 더 큰 문자열이 더 크다고 결론냄.

대문자 'A'와 소문자 'a' 비교시 소문자 'a'가 더 크다. 유니코드에서는 소문자가 대문자보다 더 큰 인덱스를 갖기 때문.

 

 

다른 형과의 값 비교

비교하려는 값의 자료형이 다르면 자바스크립트는 이 값들을 숫자형으로 바꾼다. 불린값의 경우 true는 1, false는 0으로 변환된 후 비교가 이루어진다.

alert('2' > 1);	// true. 2 > 1로 비교
alert('01' == 1);	// true. 1 == 1로 비교

 

일치 연산자

동등 연산자(equality operator) ==은 0과 false를 구별하지 못한다. 이러한 문제는 동등 연산자 ==가 형이 다른 피연산자 비교시 피연산자를 숫자형으로 바꾸기 때문이다.

alert(0 == false);	// true
alert('' == false);	//true

 

그렇다면 0과 false를 구별하는 방법이 무엇일까?

바로 일치 연산자(strict equality operator) === 를 사용하면 형 변환 없이 값을 비교할 수 있다.

일치 연산자는 엄격한 동등 연산자로, 자료형의 동등 여부까지 검사하기 때문이다.

alert(0 === false);	// false

// 불일치 연산자 또한 엄격한 버전이 존재한다. !==

 

null vs 0

console.log(null > 0);	// false
console.log(null == false);	// false
console.log(null >= 0)	// true

 위와같은 결과가 나오는 이유는 비교 연산자의 동작의 경우 null이 숫자형으로 변환되어 0으로 연산을 수행하지만, 동등 연산자에서는 형변환을 하지 않으므로 false가 나온 것이다.

 

 

비교가 불가능한 undefined

console.log(undefined > 0);	//false, undefined: NaN
console.log(undefined < 0);	//false, undefined: NaN
console.log(undefined == 0);	//false

undefined는 항상 false를 반환한다.null과 같고 그 이외의 값과는 같지 않기때문에 위와 같은 결과가 나온것이다.