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

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

alert(), confirm(), prompt()로 팝업 창 표시하기

alert() 함수

• alert문은 알림 창을 표시
• alert() 함수의 소괄호 안에 메시지를 입력하거나 변수를 사용하면 알림 창에 텍스트나 변숫값을 표시할 수 있음
  알림 창에 내용을 표시하려면 alert() 함수의 소괄호 안에 큰따옴표나 작은따옴표와 함꼐 내용 작성

- 알림 창에 내용을 표시하려면 alert() 함수의 소괄호 안에 큰따옴표나 작은따옴표와 함꼐 내용 작성

alert("안녕하세요?")

- 만약 a라는 변수에 숫자 10을 저장했다면 alert() 함수의 소괄호 안에 변수 이름을 지정해서 변수값을 표시할 수 있음

a = 10
alert(a)

 

confirm() 함수

• [확인] 버튼과 [취소] 버튼이 있어서 사용자가 어떤 버튼을 클릭했는가에 따라 다르게 동작하도록 할 수 있음 (→ '확인 창'이라고 함)
• 콘솔 창에서 입력하여 확인 창의 [취소] 버튼을 클릭하면 false가 나타남 → '반환값'이라고 함 (반환값을 확인하여 사용자가 어떤 버튼을 선택했는지 알 수 있음)
• 콘솔 창의 Clear Console (🚫 아이콘)을 클릭하여 콘솔 창에 있던 소스들을 지울 수 있음. 이전에 입력했던 소스는 화면에서 보이지 않을 뿐, 웹 브라우저 창을 닫지 않는 한 계속 그 값을 유지함

 

prompt() 함수

• prompt() 함수로 만드는 프롬프트 창은 사용자가 간단한 값을 입력할 수 있는 창임
• 프롬프트 창에 사용자가 입력한 값을 가져와 프로그램에서 처리할 수 있으므로 프로그램 실행에 필요한 간단한 값을 입력받을 때 자주 사용함
• 프롬프트 창을 만들 때 기본값을 지정하지 않으면 빈 텍스트 필드로 표시됨

- 예시1

prompt("이름을 입력하세요.")

• 프롬프트 창에 이름을 입력하고 [확인] 버튼을 클릭하거나 Enter를 누르면 입력했던 값이 즉시 콘솔 창에 표시됨
• 그 결과 prompt()의 반환값은 사용자가 입력한 내용이 되어 이 반환값을 프로그램에 사용할 수 있음

- 예시2

prompt("컨퍼런스 참석 여부(에/아니오)", "예")

• 프롬프트 텍스트 필드에 기본값 '예'가 표시됨. 사용자는 이 기본값을 지운 후 다른 내용을 입력해도 됨
• 프롬프트 창에 값을 입력하지 않고 그대로 [취소] 버튼을 클릭하면 null이 반환됨

 

※ 콘솔 창에 자꾸 undefined가 나타날 때

- 콘솔 창에서 alert 문을 실행했을 때는 undefined가, confirm 문이나 propmt 문을 실행했을 때는 반환값이 나타남

- 나타나는 이유: 콘솔 창에서 실행한 명령이 반환하는 값이 없기 때문

→ confirm 문은 true나 flase를 반환, prompt 문은 사용자가 입력한 값이 나타남. 하지만 alert 문은 소괄호 안의 내용을 그대로 알림 창에 표시할 뿐 반환하는 값이 없음

 

console.log()로 간단한 결과 확인하기

• 간단하게 텍스트로 보여 주는 명령
• 콘솔 창에 메시지를 표시하려면 큰따옴표 안에 메시지를 입력해야 함
• 변수와 함께 내용을 연결해서 표시할 수도 있음 → 연결 연산자(+)를 사용해도 되고, '템플릿 리터럴'이라는 문법을 사용해도 됨

console.log("자바스크립트를 공부 중입니다.")	// 큰따옴표 사용

// 연결 연산자 사용
name = "도레미"
console.log(name + "님은 자바스크립트를 공부 중입니다.")

 

document.write()로 웹 브라우저 창에 내용 표시하기

• 소괄호 안의 내용을 웹 브라우저 창에 표시해 줌
• (실제 웹 브라우저 창에 내용을 표시할 때는 DOM을 이용해 원하는 위치를 지정해야함)(후에 배울 예정)
• document.write() 함수는 console.log() 에서와 마찬가지로 연결 연산자(+)를 사용할 수도 있고, 템플릿 리터럴을 사용할 수도 있음

name = "도레미"
document.write("제 이름은 " + name + "입니다.")

 

 

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

변수

• '프로그램에서 사용하기 위해 값을 담아 놓는 바구니'라고 생각하자
• 일반적으로 변수는 프로그램 안에서 값이 달라질 수 있는 데이터를 가리킴 (값이 바뀌지 않는 변수: 상수)
• 자바스크립트에서는 프로그램 안에서 계속 값이 바뀌지 않더라도 변수를 만들어 사용함

※ 자바스크립트에서 변수 이름을 지정할 경우의 규칙 1. 변수 이름은 숫자로 시작할 수 없고 이름 안에 공백이 포함되어 있으면 안된다. 2. current, _current, $current  // 사용가능     25current, curr ent, current*  // 사용불가능 3. 자바스크립트는 영문자의 대소문자를 구별한다. 따라서 current와 Current, CURRENT는 모두 다른 이름이다. 4. 자바스크립트에서 한 단어로 이루어진 변수를 사용할 때는 주로 영문자의 소문자를 사용하고, 두 단어 이상으로 이루어진 변수를 사용할 때는 tatal_area처럼 언더바로 연결하거나 totalArea처럼 중간에 영문자의 대문자를 섞어 사용한다. 5. let 등 자바스크립트에서 미리 정해 놓은 예약어는 변수 이름으로 사용할 수 없다. 6. 무의미한 변수 이름은 피한다.

 

변수 선언하고 값 할당하기

변수 선언

• 변수(값을 변경할 수 있음)라면 예약어 let, 상수(값이 바뀌지 않음)라면 예약어 const를 쓰고 뒤에 변수 이름을 적음

let 변수명
const 변수명

 

변수에 값 할당하기

• = 기호를 사용해 변수에 값을 저장할 수 있음
• 변수를 선언 한 수 값을 따로 선언할 수 있고, 변수를 선언하면서 값을 동시에 할당할 수도 있음

// 변수 선언 후 값 할당
let sum;
sum = 10;

// 변수 선언과 값 동시 할당
lent sum = 10;

• let은 변수 선언과 할당을 한 후 다른 값을 다시 할당 하면 값이 바뀐다.
• const는 변수 선언과 할당을 한 후 다른 값을 다시 할당 하면 오류가 발생한다.(const는 한 번 값이 저장되면 그 값이 바뀌지 않으므로)

 

변수 선언할 상수가 필요한 이유

• 프로그램에서 같은 값을 여러 번 사용할 경우 아예 상수에다가 값을 할당해 놓고 그 상수를 가져와 사용함

 

var와 변수 호이스팅

• 에크마스크립트 2015 이전에는 변수 선언 시 var 예약어를 사용함
• 지금도 사용하지만, '호이스팅(hoisting)'이라는 개념을 조심해야함
• 호이스팅: 끌어올린다. (→ 상황에 따라 변수의 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것)

var x = 10;
var sum = x + y;
var y = 20;
console.log(sum)	// 실행 → NAN (Nao A Number)

• y 선언 전 x+y가 실행됨. sum을 실행 시키면 오류가 발생하지 않고 Nan이 표시된다. (→ 호이스팅)
• 자바스크립트는 해석기가 함수 소스를 훑어보면서 변수를 따로 기억해 둠(즉, 변수를 사용하기 전 기억해두므로써 선언한 것과 같은 효과를 가지는데, 이것이 바로 호이스팅임)

위의 코드는 아래와 같은 방식으로 처리됨

var x = 10;
var y;
var sum = x + y;
y = 20;
console.log(sum)

• let이나 const를 사용할 경우, 변수를 선언 전에 사용하면 오류가 발생함 (변수 선언보다 변수 사용 소스가 먼저 오는 상황을 고칠 수 있음)
• var를 사용했을 경우, 호이스팅이 발생하면 오류 없이 결과값이 예상한 것과 다르게 나타나므로 오류를 찾기 어려워짐 → 변수를 선언할 때 var를 사용하지 말아야하는 이유

 

변수 재선언하고 재할당하기

• var를 사용한 변수는 재선언과 재할당 가능

function add(a, b){
	return a+b;
}

var sum = add(10, 20);
console.log(sum)	// 30
var sum = 100;		// var 변수는 재선언, 재할당 가능
console.log(sum)	// 100

• 다시 sum 변수를 선언하면 기존 값이 사라지면서, sum 변수가 새롭게 만들어짐(즉, 변수를 재선언하고 새로운 값을 재할당함)
• 간단한 소스면 기억할 수 있지만, 복잡하면 실수로 같은 이름을 가진 변수를 재선언할 수 있음
  → let이나 const 예약어를 사요한 변수에서는 오류가 발생하므로 변수 재선언을 허용하지 않음
  - let 변수는 값을 변경할 수 있으므로 재할당 가능
  - const 변수는 재선언, 재할당 불가능

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

 

 

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

typeof() 함수

• 자바스크립트에 미리 만들어져 있는 함수
• 소괄호 안에 값이나 변수를 넣으면 어떤 자료형인지 알려줌

typeof(값 또는 변수)

let data = 5
typeof(data)	// "number"

 

숫자형

• 큰따옴표가 없이 입력하면 숫자로 인식 (따옴표로 묶으면 문자열로 이식)

typeof(10)	// 'number'
typeof("10")	// 'string'
typeof(3.145)	// 'number'

자바스크립트에서 0.1+02는 0.30000000000000004 → 복잡하거나 정밀한 계산은 자바스크립트를 사용하지 않는것이 좋음

 

문자열

• 문자열 또는 string 자료형은 작은따옴표(')나 큰따옴표(")로 묶은 데이터를 의미

typeof("안녕하세요?")	// 'string'
typeof("10")	// 'string'
typeof("")	// 'string', 빈 문자열

 

특수 기호 표시하기

• 특수 문자('나 " 등)를 표시하려면 백슬래시(\) 다음 입력해야 함

 

 

 

 

교재: Do it! 모던 자바스크립트 프로그래밍의 정석