[Java Script] 1. 변수와 자료형

1. 변수

어떤 정보에 이름을 붙여 저장하고 싶을 때 사용

name = "Mike";

자바스크립트에서 문자는 항상 "" 또는 ''로 감싸주어야 함

하지만

class = "수업";

위와 같은 코드는 오류 발생. why? class는 이미 사용되는 단어로 변수명으로 사용 불가함
이런 단어를 '예약어'라고 함

하지만, name = "Mike"; 와 같은 방식으로 변수명 선언 시 위험함
변수명이 겹칠 경우 마지막에 선언된 값으로 덮어씌워지기 때문
-> let, const로 이를 방지할 수 있다.

1) let

let name = "Mike";

//more lines...

let name = "June"; 

이렇게 작성하면 구문오류가 발생하면서 이미 사용되고 있는 변수명임을 알려줌
하지만

let name = Mike";

//more lines...

name = "June";

이렇게 작성하면 June으로 값이 덮어씌워짐
-> 변할 수 있는 값을 선언

2) const

const NAME = "Mike";

절대로 바뀌지 않는 상수 선언 시 사용, let과 달리 덮어씌워지지 않음
다른 개발자들에게 상수임을 알리기 위해 보통 대문자를 사용하여 선언
-> 변하지 않는 값을 선언

(+)
변수는 문자와 숫자, $와 '_'만 사용
첫글자는 숫자가 될 수 없음
예약어는 사용할 수 없음
가급적 상수는 대문자로
변수명은 읽기 쉽고 이해할 수 있게 선언(의미를 짐작할 수 있게)

2. 자료형

1)문자형

const name = "Mike"; //문자형 String
const age = 30;

const name1 = "Mike"
const name2 = "Mike"
const name3 = "Mike"

const message = "I'm a boy."; //""를 쓰는게 편리한 이유
const message2 = 'I\'m a boy.';
//''문자열 안에 '를 사용해야 할 경우 \를 특수문자 앞에 적어 특수문자로 인식하도록

const message3 = `My name is ${name}`;
// `(벡틱)을 사용하여 문자열 내부에 변수를 편리하게 표현할 수 있음
// 실수로 일반 따옴표''를 사용하면 변수명이 그대로 노출되므로 주의해야 함

const message4 = `나는 ${30+1}살 입니다`;
// 바로 표현식 넣기도 가능

2) 숫자형

const age = 30; // 숫자형 Number
const PI = 3.14;

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

const x = 1/0;
console.log(x) // 숫자를 0으로 나누면 Infinity

const name = "Mike";
const y = name/2;
console.log(y) // 문자열을 숫자로 나누면? NaN = Not a number의 약자

3) Boolean

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

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

console.log(name == "Mike")
console.log(age > 40) // 참 거짓 check

4) null 과 undefined

let age;
console.log(age) // undefine, 값이 할당되지 않음

let user = null;
console.log(user) // null, 존재하지 않는 값 = user는 존재하지 않음

5) typeof 연산자

const name = "Mike";

console.log(typeof 3); // 숫자형
console.log(typeof name); // 문자형
console.log(typeof true); // boolean
console.log(typeof "xxx"); // 문자형
console.log(typeof null); //object
console.log(typeof undefined); //undefined

//다른 개발자가 작성한 변수의 type을 알아야 하거나
//API 통신을 통해 받아온 데이터를 type에 따라 다른 방식으로 처리해야 할 때 많이 사용함

/*
typeof null; // "object" 객체형이라는 뜻, 하지만
null =! 객체형
자바스크립트 초기 오류이나 하위호환성을 위해 수정X

6) 문자형과 숫자형의 더하기

const name = "Mike";

const a = "나는 ";
const b = " 입니다.";
console.log(a + name + b);
// "나는 Mike 입니다."

const age = 30; // number
console.log(a + age + "살" + b);
// "나는 30살 입니다."
//숫자형과 문자형을 섞어서 더할 수도 있다. 문자형으로 변경된다는 점(?)

3. 창 띄우기

7) alert()

:경고창을 띄우는 함수

8) prompt()

:사용자에게 메시지를 보여주고 어떤 값을 입력 받을 수 있는 필드 제공
:취소를 누르면 null 값으로

const name = prompt("이름을 입력하세요.");
alert("환영합니다. " + name + "님");

const name = prompt("이름을 입력하세요.");
alert(`안녕하세요, ${name}님. 환영합니다.`);
//벡틱으로도 가능

const name = prompt("예약일을 입력해주세요.", "2020-10-");
//두번째 값은 입력 받을 default 값이 되어 가이드역할을 할 수 있음

9) confirm()

: 사용자에게 무언가 확인받을 때 사용

	const isAdult = confirm("당신은 성인 입니까?");
	console.log(isAdult)
    // 확인을 누르면 true, 취소를 누르면 false로 결과 값이 나옴
    // 사용자의 액션을 한번 더 확인해줄 때 자주 사용 ex. 정말 삭제하시겠습니까?
    

-> 이렇게 기본적으로 제공되는 창들은 간단하게 사용 가능하지만
1. 창이 띄워져 있는 동안 스크립트가 일시 정지됨
2. 스타일링 불가

4. 형변환(Type Conversion)

String() // 문자형으로 변환
Number() // 숫자형으로 변환
Boolean() // 불린형으로 변환

형변환은 왜 필요할까?
:자료형이 다를 경우에 더하기 할 경우 오류 발생

//const mathScore = prompt("수학 몇점?");
//const engScore = prompt("영어 몇점?");
const mathScore = 90;
const engScore = 80;
const result = (mathScore + engScore) / 2;

console.log(result);

위 코드에서 주석처리된 prompt 방식으로 컴파일 시 왜 85가 아닌 4540이 결과로 출력될까?
prompt 입력 -> 무조건 문자형이 됨 ex) "90"
"90"+"80" = "9080" //문자와 문자를 더하면 그대로 이어짐
"9080" / 2 = 4540 //숫자형이 아니더라도 나누기와 같은 표현식은 숫자형으로 자동 변환되어 계산
-> 자동 형 변환 <-> 명시적 형변환 //자동 형 변환은 편리하지만 원인을 알 수 없는 오류를 발생시킬 수 있으므로 항상 표현하고자 하는 형으로 명시적 형변환을 해주는 것이 좋음

1) String()

:괄호 안의 타입을 문자형으로 변경해줌

console.log(
String(3),
String(true),
String(false),
String(null),
String(undefined),
)
//결과 : "3" "true" "false" "null" "undefined"

2) Number()

: 괄호 안의 타입을 숫자형으로 변경해줌

console.log(
Number("1234"),
Number("1234abcd"), // 숫자에 문자가 포함되면 NaN 주의
Number(true), // true의 숫자형 = 1
Number(false) // false의 숫자형 = 0
)
//결과 : 1234 NaN 1 0

//주의사항
Number(null) // 0
Nummber(undefined) // NaN

3) Boolean()

: 괄호 안의 타임을 불린형으로 변경해줌
: false의 케이스만 기억하면 됨, 이 외에는 true
1) 0
2) 빈문자열""
3) null
4) undefined
5) NaN

console.log(
Boolean(1),  // true
Boolean("a"),  // true
Boolean(0),  // false
Boolean(""),  // false
Boolean(null),  // false
Boolean(NaN),  // false
Boolean(undefined)  // false
)

//주의사항
Number(0) // false
Number('0') // true

Number('') // false(빈문자열)
Number(' ') // true(공백)

• 출처 : 코딩앙마 '자바스크립트 기초 강좌 : 100분완성' 유투브 영상