[JavaScript]변수/자료형/대화상자/형변환

참고자료 : https://www.youtube.com/watch?v=KF6t61yuPCY

1. 변수
변수를 선언할 때에는 '변수명 = 값'으로 작성한다.
문자열을 선언할 때에는 큰따옴표나 작은따옴표로 값을 둘러싼다.
alert(변수명)을 실행하면 화면에 알림창에 값이 뜬다.
console.log(변수명)을 실행하면 콘솔에 값이 뜬다.

name = "Mike";
age = 30;

alert(age);
console.log(age);

team 단위로 작업을 하다보면 같은 변수명을 사용하게 될 수도 있다.
변수명 앞에 let으로 선언하면 동일한 변수명을 선언했을 때 SyntaxError를 발생시킨다.

let name = "Mile";

// 1000 lines..

let name = "google";

let으로 선언한 변수는 수정할 수 있다.
const로 선언한 변수는 수정할 수 없다.

let grade = "F";
grade = "A";

const PI = 3.141592;
const MAX_VALUE = 5;

변수명 규칙
- 변수는 문자, 숫자, $, _만 사용
- 첫 글자 숫자X
- 예약어 사용X
- 상수는 대문자로
- 변수명은 읽기 쉽고, 이해할 수 있게 선언


2. 자료형
1) 문자형 String
문자형 String을 나타낼 때에는,
큰따옴표("), 작은따옴표('), 백틱(`)을 사용한다.

const name1 = "Mike"
const name2 = 'Mike'
const name3 = `Mike`

문자열을 나타낼 때 작은따옴표를 사용했지만 문자열 내부에 작은따옴표가 필요할 때 백슬래시(\)를 사용한다.
백틱과 ${변수명}을 이용하면 문자열 내부에 변수값을 넣을 수 있다.

const name = "Mike";

const message = "I'm a boy.";
const message2 = 'I\'m a boy.';
const message3 = `My name is ${name}`;
const message4 = `나는 ${30+1}살 입니다.`;

2)  숫자형 String
숫자형 Number는 사칙연산(+, -, *, /, %)가 가능하다.

const age = 30;
const PI = 3.14;

console.log(1+2); //더하기
console.log(10-3); //빼기
console.log(3*2); //곱하기
console.log(6/3); //나누기
console.log(6%4); //나머지

1을 0으로 나오면 Infinity(무한대)가 나온다.
문자열을 상수로 나누면 NaN(Not a Number)가 나온다.

const x = 1/0;
console.log(x); //Infinity

const name = "Mike";
const y = name/2;
console.log(y); //NaN : Not a Number

3) boolean
boolean은 true/false를 나타낸다.
참이면 true, 거짓이면 false를 출력한다.

const a = true; //참
const b = false; //거짓

const name = "Mike";
const age = 30;

console.log(name == 'Mike'); //true
console.log(age > 40); //false

4) undefined/null
undefined는 값이 할당되지 않은 경우이다.
null은 값이 존재하지 않는다는 의미이다.

let age;
console.log(age); //undefined

let user=null; //null

5) typeof
typeof는 변수의 type을 출력한다.

const name = "Mike";

console.log(typeof 3); //number
console.log(typeof name); //string
console.log(typeof true); //boolean
console.log(typeof "xxx"); //string
console.log(typeof null); //obejct 
console.log(typeof undefined); //undefined

 

3. 대화상자
1)  alert
alert -> 알려줌
확인을 누르기 전까지 계속 대화상자를 띄움

2) prompt
prompt -> 입력받음
사용자에게 대화상자로부터 값을 입력받음
기본값은 null값
default 값 부여 가능

const name = prompt("이름을 입력하세요.");
alert("환영합니다, " + name + "님"); //큰따옴표 사용

const name = prompt("이름을 입력하세요.");
alert(`안녕하세요, ${name}님. 환영합니다`); //백틱 사용

const date = prompt("예약일을 입력하세요.", "2021-01-"); //기본값 사용
alert(`예약일은 ${date}입니다.`)

3)  confirm
confirm -> 확인받음
사용자에게 확인을 받기 위한 목적으로 사용
확인(true)과 취소(false) 버튼이 있음

const isAdult = confirm("당신은 성인입니까?");
console.log(isAdult);

 

 

4) 정리

alert('삭제 되었습니다.');
prompt('예약을 입력하세요.', '2021-01-');
confirm('결제를 취소하시겠습니까?');

 

5) 단점
- 스크립트가 일시 정지됨
- 스타일링 불가(위치, 모양 다름, 브라우저마다 다름)


4.  형변환(Type Conversion)
1) 자동 형변환
- "6"/"2"=3과 같이 자동으로 형변환을 함
- 오류가 발생하면 찾기 힘들다

2) 명시적 형변환
- String() -> 문자형
- Number() -> 숫자형

Number(123abc) //NaN
Number(true) //1
Number(false) //0
Number(null) //0
Number(undefined) //NaN

- Boolean() -> boolean형
숫자 0, 빈 문자열 ", null, undefined, NaN

Number(0) //0(false)
Number('0') //0(true)
Number('') //0(false)
Number(' ') //0(true)