자바스크립트 - alert prompt confirm, 형 변환, 기본 연산자, 비교 연산자

alert, prompt, confirm 사용하기

 

1. alert

- 사용자가 확인 버튼을 누를 때까지 메시지를 보여주는 창을 띄움

- 모달 : 페이지의 나머지 부분과 상호작용이 불가능하다

- 모달 창을 띄우기 때문에 모달 창 바깥에 있는 버튼을 누르거나 다른 행동 불가

- alert("...");

 

2. prompt

- 텍스트 메시지와 입력 필드, 확인 및 취소 버튼의 모달 창의 띄워줌

- title : 사용자에게 보여줄 문자열 default : 입력 필드의 초깃값(선택값)

result = prompt(title, [default]); // default는 선택값으로 필수는 아님, 사용자가 입력한 값이 입력되는데 Internet Explorer에서는 항상 기본값을 넣어줘야함
let test = prompt("Test", ''); // 이렇게!

let age = prompt('나이를 입력해주세요.', 100); // 초깃값을 100이라고 줘서 100이 입력되어있음

 

3. 컴펌 대화상자

- 매개변수로 받은 질문과 확인 및 취소 버튼의 모달 창 띄워줌

- 확인을 누르면 true , 그 외는 false 반환

result = confirm(question);

let isBoss = confirm("당신이 주인인가요?");
alert( isBoss ); // 확인 버튼을 누르면 true 출력

형 변환

1. 문자형으로 변환

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

- String(value) 함수로 전달받은 값도 문자열로 변환 가능

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

value = String(value); // 변수 value엔 문자열 "true"가 저장
alert(typeof Value); // String

 

2. 숫자형으로 변환

- 수학과 관련된 함수와 표현식에서 자동으로 일어남

- Number(value) 함수를 사용하면 주어진 값을 숫자형으로 명시해서 변환

- 숫자 이외의 글자가 들어가 있는 문자열을 숫자형으로 변환하면 NaN이 나옴

- undefined ==> NaN  /  null ==> 0  /  true false ==> 1 0

alert( "6" / "2" ) // 3, 문자열이 숫자형으로 자동변환됨

let str = "123";
alert(typeof str); // String
let num = Number(str); // 문자열 "123"이 숫자 123으로 변환
alert(typeof num); // number

let age = Number("임의의 문자열 123");
alert(age); // NaN

alert( Number("    123    ") ); // 123
alert( Number("123z") ); // NaN
alert( Number(true)); // 1
alert( Number(false)); // 0

 

3. 불린형으로 변환

- 숫자 0, 빈 문자열, null, undefined, NaN과 같이 "비어있다"고 느껴지는 값들은 false가 됨

- 그 외의 값은 true로 변환

! 문자열 "0"은 true로 변환

 

alert( Boolean(1) ); // true
alert( Boolean(0) ); // false
alert( Boolean("hello") ); // true
alert( Boolean("") ); // false
alert( Boolean("0") ); // true
alert( Boolean(" ") ); // true

기본 연산자와 수학

1. '단항' '이항' '피연산자'

- 피연산자? 연산자가 연산을 수행하는 대상

- 단항? 피연산자를 하나만 받는 연산자

- 이항? 두 개의 피연산자를 받는 연산자

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

let x = 1, y = 3;
alert( y - x ); // 2, 이항 마이너스 연산자는 뺄셈

 

2. 나머지 연산자 %

- a % b 는 a를 b를 나눈 후 그 나머지를 정수로 반환

alert( 5 % 2 ); // 1
alert( 8 % 3 ); // 2

 

 

3. 거듭제곱 연산자 **

- a ** b를 평가하면 a를 b번 곱한 값이 반환

- 정수가 아닌 숫자에 대해서도 동작함. 1/2를 사용하면 제곱근을 구할 수 있음

alert( 2 ** 2 ); // 4
alert( 2 ** 3 ); // 8
alert( 2 ** 4 ); // 16
alert( 2 ** (1/2) ); // 2
alert( 2 ** (1/3) ); // 2

 

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

- 문자열을 병합하는 용도

- 피연산자 중 하나가 문자열이면 다른 하나도 문자열로 변환된다

let s = "my" + "string";
alert(s); // mystring

alert( '1' + 2 ); // 12
alert( 2 + '1' ); // 21
alert( 2 + 2 + '1' ); // 4+'1' = 41

alert( 6 - '2' ); // 뺄셈과 나눗셈은 숫자로 바꾼 후 연산 진행 4
alert( '6' / '2' ); // 3

 

5. 단항 연산자 +와 숫자형으로의 변환

- 숫자에 단항 덧셈 연산자를 붙이면 아무런 동작도 하지 않음

- 피연산자가 숫자가 아닌 경우엔 숫자형으로 변환이 일어남

let x = 1;
alert( +x ); //1
let y = -2;
alert( +y ); // -2
alert( +true ); // 1
alert( +"" ); // 0

let apples = "2";
let oranges = "3";
alert( apples + oranges ); // 23 문자열을 연결해서 연결

alert( +apples + +oranges ); // 5 숫자로 변환돼서 연결

 

6. 할당 연산자

- 할당할 때 쓰임 '='

- 할당 연산자 체이닝 : 여러 개를 연결할 수도 있음

- 복합 할당 연산자 : += *= /= -= 연산자를 활용하여 짧은 문법 제작 가능, 대부분 가능

let a = 1;
let b = 2;
let c = 3 - (a = b + a); // a = 2 + 1
alert( a ); // 3
alert( c ); // 3 - 3 = 0

let a, b, c;
a = b = c = 2 + 2; // 우측부터 진행
c = 4
b = 4
a = 4

let n = 2;
n += 5; // n = 5 + n 7
n *= 2; // n = 2 * n 14

7. 증가 감소 연산자

- 증가 연산자 : ++는 변수를 1 증가

- 감소 연산자 : --는 변수를 1 감소

- ++와 --연산자는 변수 앞이나 뒤에 올 수 있음

- counter++은 후위형, counter--은 전위형

let counter = 1;
alert( 2 * ++counter ); // ++counter 먼저 적용 2 후에 2 * 2는 4의 결과값 변환

let counter = 1;
alert( 2 * counter++ ); // counter++은 '기존'값을 반환하기 때문에 2

let counter = 1;
alert( 2 * counter );
counter++; // 풀어쓰면 이렇게 됨. 결국 결과값은 2가 나옴

비교 연산자

1. 불린형 반환

alert(2>1); // true
alert(2==1); // true
alert(2!=1); // true

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

 

2. 문자열 비교

- 두 문자의 첫 글자를 비교

- 첫 글자가 같을 시 다음 글자를 비교, 끝날 때까지 계속 진행

- 비교가 종료되었고 문자열의 길이도 같다면 동일하다고 결론, 그러나 다 같고 문자열의 길이가 다르다면 긴 문자열이 더 크다고 봄

alert('Z'>'A'); // true
alert('Glow'>'Glee'); // true
alert('Bee'>'Be'); // true

 

3. 다른 형을 가진 값 간의 비교

- 기본적으로 숫자형으로 알아서 바꿔서 비교

alert('01'==1); // true 숫자 1로 변환된 후 비교
alert(true==1); // true
alert(false==0); // true

let a = 0;
alert(Boolean(a)); // 숫자 0은 false 반환

let b = "0";
alert(Boolean(b)); // 문자 0은 true 반환

 

4. 일치 연산자

- 동등 연산자 ==는 0과 false를 구별하지 못한다

- 피연산자가 빈 문자열일 때도 구별하지 못함

- 둘 다 숫자형으로 변환하면 0이기 때문

- 이럴 때는 ===를 사용하면 연산자까지 비교하게 됨, 형이 다를 경우 false를 반환

alert(0==false); // true 0 == 0
alert(''==false); // true 0 == 0
alert(0===false); // false,형이 다름

 

5. null과 undefined와 비교하기

- 일치 연산자 ===를 사용하여 null과 undefined를 비교 : 자료형이 다르므로 거짓 반환

- 동등 연산자 ==를 사용하여 null과 undefined를 비교 : 특별한 규칙이 적용돼 참 반환 '커플'이라고 생각하기

- 산술 연산자나 기타 비교 연산자를 사용하여 null과 undefined를 비교 : null은 0, undefined는 NaN 변함

alert(null===undefined); // false
alert(null==undefined); // true

 

6. null vs 0 / undefined

- 기타 비교 연산자 <, >, <=, >=는 null이 숫자형 0으로 변환

- 동등 연산자 ==는 형 변환을 하지 않기 때문에 false 변환

- undefined는 다른 값과 비교해서는 안 됨. 전부 거짓 나옴

alert(null>0); // false
alert(null==0); // false
alert(null>=0); // true