[모던 자바스크립트] 02 프로그래밍의 기본, 변수와 자료형 살펴보기

1. 프로그램에서 입력받고 출력하는 방법

• alert() 함수: 알림 창을 표시. alert() 함수의 소괄호 안에 메세지를 입력하거나 변수를 사용하면 알림 창에 텍스트나 변숫값을 표시할 수 있음.
• confirm() 함수: 확인 창을 표시. [확인]과 [취소] 버튼이 있어 사용자가 어떤 버튼을 클릭했는가에 따라 서로 다른 반환값을 나타냄. [취소]버튼 클릭시 false 반환.
• prompt() 함수: 사용자가 간단한 값을 입력할 수 있는 프롬프트 창을 표시. 입력 기본값을 지정할 수도 있음. 값 입력 취소시 null 반환.

 

2.  프로그램과 친해지려면 변수부터 익히자

• 변수 선언 let
• 상수 선언 const
• 변수 선언시 var를 사용하게 되면 변수 호이스팅이 발생.
• 호이스팅(hoisting): '끌어올린다'는 뜻. 상황에 따라 변수 선언 부분을 스코프의 가장 위쪽으로 끌어올린 식으로 해석. 

예약어	선언하지 않고 사용할 경우	재선언	재할당
var	오류 없음(호이스팅 발생)	O	O
let	오류 발생	X	O
const	오류 발생	X	X

 

 

3. 컴퓨터가 세상을 보는 방법, 자료형

• 자바스크립트의 자료형은 크게 '원시유형(primitive type)'과 '객체(object)'로 나뉨.
• 원시유형: 하나의 값만 저장하는 자료형. 숫자와 문자열, 논리형, undefined, null, symbol이 있음.
• 객체: 원시유형 외 모든 자료형.

 

• 템플릿 리터럴(template literal): 문자열과 변수, 식을 섞어서 하나의 문자열을 만드는 표현 형식. 백팃(``)을 사용하고, 변수나 식을 ${}로 묶어 표시함. '\n' 같은 줄 바꿈 기호를 넣지 않아도 사용자가 소스에 줄을 바꿔 입력하면 동일하게 출력됨.

let name = "김만재"
let classroom = 205
console.log(`${name}님, ${class}호 강의실로 입장하세요.`)

 

• 논리형(Boolean): 참(true)나 거짓(false)값을 표현하기 위한 데이터 유형.
  • truthy = true로 인정할 수 있는 값, falsy = false로 인정할 수 있는 값.
  • falsy: 숫자 0, "" (빈 문자열), NaN, undefined, null0
• undefined: 변수를 만들기만 하고 값을 할당하지 않았을 때 자바스크립트에서 자동으로 부여하는 초깃값. 값이면서 동시에 자료형. 
• null: 값이 없거나 유효하지 않은 값이라는 의미로, 자바스크립트에서 반환하거나 사용자가 할당할 수 있는 값. 값이면서 동시에 자료형. 

 

• 객체: 여러 개의 원시 유형을 하나로 묶어 놓은 것. JS는 배열이나 함수도 객체로 취급.
• 중괄호{} 안에, 키key:값value으로 구성. '키:값'쌍을 객체의 프로퍼티property라고 함.
• 키는 문자열이어도 큰따옴표를 사용하지 않지만 값의 경우엔 사용해야 함.
• 객체에 있는 여러 개의 프로퍼티 중 원하는 프로퍼티 값을 가져오려면 객체명.키 이름, 객체명["키 이름"]과 같은 형식을 사용.
• 심볼(symbol)
  • 유일성을 보장. 객체 프로퍼티의 키로 사용할 수 있음.
  • symbol() 함수 사용하여 생성.
  • 한 번 만들면 변경할 수도 없고, 같은 값을 가진 심볼을 만들 수도 없음.

 

4. 자바스크립트의 장점이자 단점, 자료형 변환

• Number() 함수: 소괄호 안에 값을 넣어주면 숫자로 변환할 수 있음.

기존 유형	변환 결과
true	1
false	0
숫자	숫자
null	0
undefined	NaN
정수 문자열	정수(맨 앞에 0이 있으면 제거)
실수 문자열	실수(맨 앞에 0이 있으면 제거)
16진수 문자열	10진수
빈 문자열	0
기타	NaN

 

• parseInt() 함수: 소괄호 안의 값을 정수로 변환.
• parseFloat() 함수: 소괄호 안의 값을 실수로 변환.

 

• toString() 함수: null 자료형과 undefined 자료형을 제외한 나머지 자료형을 문자열 데이터로 변환.
• String() 함수: null 자료형과 undefined 자료형까지 모두 포함해 문자열로 변환.

 

• Boolean() 함수: 다른 유형의 데이터를 논리형 데이터로 변환.

	true값이 되는 데이터	false값이 되는 데이터
숫자형	0이 아닌 값	0
문자열	빈 문자열이 아닌 모든 문자열	빈 문자열
undefined	-	undefined