JavaScript 01 : 변수 / 자료형 / 형변환

내용출처 : https://www.youtube.com/watch?v=KF6t61yuPCY

---

Javascript 이해하기

---

 

1. 변수

 

변수선언시 알아둘 점

• 끝에 세미콜론 붙여야 한줄 끝임을 인지
• 변수를 print할 경우 사용하는 방법

name = "Mike";
age = 30;

// 방법1
alert(name)

// 방법2
console.log(name)

• 주의할점은 위처럼 변수선언하는것은 문제라는 것 
• 왜냐하면 다시 변수 선언시, 덮어씌워지기 때문
• 유일한 변수임을 선언하기 위한 방법은 아래와 같음

// 방법1 ( let 사용 )
let grade = "F";

// .... 1000 lines

let grade = "A+"; 
--> 이처럼 선언시, 위에서 grade를 let로 선언했기에 에러발생
grade = "A+";
--> 이처럼 선언시, 위에서 정의한 grade에 덮어씌워짐


// 방법2 ( const 사용 ) (선호)
const GRADE = "F";
--> 이처럼 선언시, 어떤방법으로 GRADE를 재선언해도 에러발생 (절대 수정불가)
--> 대문자로 표기하는게 좋다.

• 종합하면 Javascript에서 변수선언시
  변하지 않는 값 : const로 선언
  변할 수 있는 값 let으로 선언
• 보통 처음에 변수선언시, const로 선언하고 변경여지가 있는 변수들은 let으로 변경
• 변수정의 시 유의사항
  1. 변수는 문자와 숫자 $와 _ 만 사용
  2. 첫글자는 숫자가 될 수 없음
  3. 예약어 사용불가 (예: class)
  4. 가급적 상수는 대문자로 선언
  5. 변수명은 읽기 쉽고 이해할 수 있게 선언

 

2. 자료형

 

문자열 변수 (string)

• 선언방법 세가지
  1. 큰 따옴표 (" ")
  2. 작은 따옴표 (' ')
  3. 백틱 (` `)  --> 백틱은 파이썬의 format string 기능 사용시 주로 사용

const name = "Mike";
const message = `My name is ${name}`;  --> 백틱 사용
console.log(message) 
결과 : My name is Mike

// 문자형끼리 더하기
const a = "나는 ";
const b = "입니다.";
console.log(a + name + b);
결과 : 나는 Mike 입니다.

// 문자형과 숫자 더하기
const age = 30;
console.log(a + age + "살" + b);
결과 : 나는 30살 입니다.

undefined

값이 정의되지 않았을때의 자료형

let age;
console.log(age);
결과 : undefined

null

값이 존재하지않을때의 자료형

let user = null;
console.log(user);
결과 : null

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); --> object
console.log(typeof undefined); --> undefined

 

 

3. alert / prompt / confirm

alert : 알려줌

prompt : 입력 받음

confirm : 확인 받음

// prompt 사용하기 : prompt는 입력받는 역할 
const name = prompt("이름을 입력하세요. ")  --> 확인/취소 버튼 생김
결과 : 확인버튼 누를경우 작성한값 리턴
결과 : 취소버튼 누를경우 null 리턴

// alert 사용하기 : alert는 경고창으로 띄어주는 역할
alert("환영합니다, " + name + "님"); 

// prompt 의 default 값 사용하기 --> prompt 두번째 인수는 default 값
const day = prompt("예약일을 입력해주세요.", "2020-10-");
console.log(day)

// confirm 사용하기
const isAdult = confirm("당신은 성인 입니까?") --> 확인/취소 버튼 생김
console.log(isAdult) 
결과 : 확인버튼 누를경우 True
결과 : 취소버튼 누를경우 False

 

 

4. 형변환

String() : 문자형으로 변환

Number() :  숫자형으로 변환

Boolean() : 불린형으로 변환

 

const mathScore = prompt("수학 몇점?");
const engScore = prompt("영어 몇점?");
const result = (mathScore + engScore) / 2;
console.log(result);
--> 수학 80 영어 70 넣을경우 4035라는 결과값 발생

이유 : prompt의 리턴값은 무조건 문자형(string)이다!


// 형변환 적용하기

const mathScore = Number(prompt("수학 몇점?"));
const engScore = Number(prompt("영어 몇점?"));
const result = (mathScore + engScore) / 2;
console.log(result);

// Number 형변환 주의점
1. Number(null) --> 0
2. Number(undefined) --> NaN

// boolean 값이 False로 되는 것들
1. 숫자 0 --> '0'은 True
2. "" (빈문자열) --> ' '는 True
3. null
4. undefined
5. NaN