자바스크립트 입출력, 변수 (JavaScript input, output, variable)

자바스크립트 입출력, 변수 (JavaScript input, output, variable)

 

• script 태그 안에 작성
• 스크립트 문법은 body 태그 가장 하단 (추천)
• html태그들 보다는 밑에 두기
• F12 개발자 도구 → console탭

1. 출력문

• 콘솔창에 출력 : console.log()
• 에러창에 출력 : console.error()
• 팝업창에 출력 : alert()

console.log('콘솔창에 출력하기')
console.error('에러 확인하기')
alert('팝업창을 통해 출력하기')

 

2. 입력문

• confirm : 확인 질문 (확인, 취소) → 리턴 타입 boolean
• prompt : 입력 확인 → 리턴 타입 String

var dinner2 = prompt('어떤 메뉴 드셨나요?')
console.log(dinner2)

 

---

 

3.  변수

• 데이터를 담을 수 있는 공간
• var, let, const

① var : 재선언 O, 재할당 O, 호이스팅 O

console.log(color) // 호이스팅

var color = 'black' // 선언
var color = 'pink' // 재선언
color = 'yellow' // 재할당
console.log('var color : ' + color)

 

② let : 재선언 X, 재할당 O, 호이스팅 (부분적 O)

※ let, const 호이스팅 : let, const도 호이스팅이 일어나긴 하지만 TDZ(Temporal Dead Zone)에 저장을 해두고 선언이 나오기 전까지는 접근을 못하게 한다.

let color2 = 'black' // 선언
// let color2 = 'pink' // 재선언 불가
color2 = 'yellow' // 재할당
console.log('let color : ' + color2)

 

③ const : 재선언 X, 재할당 X, 호이스팅 (부분적 O)

누군가 재선언하거나 재할당하면 안되는 값, 변하면 안되는 값

// console.log(color3)
// const도 호이스팅이 일어나긴 함, let처럼 TDZ 임시저장
const color3 = 'pink' // 선언
// const color3 = 'black' // 재선언 불가
// color3 = 'yellow' // 재할당 불가

 

변수	재선언	재할당	호이스팅
var	O	O	O
let	X	O	O, TMZ 저장
const	X	X	O, TMZ 저장

 

---

 

▶ 예제

사용자에게 이름을 입력 받고, 입력 받은 이름을 console창에 두 줄로 어서오세요 / ~~님 환영합니다! 출력

let name = prompt('이름을 적어주세요.')

        console.log('어서오세요!')
        console.log(name+'님 환영합니다!')