7. 자바스크립트 변수(JS Variables)

[참고] http://www.w3schools.com/js/js_variables.asp

JavaScript Variables

자바스크립트 변수는 데이터 값을 저장하기 위한 컨테이너 이다.

이 예에서 x, y, z는 변수이다.

Example

var x = 5;
var y = 6;
var z = x + y;

Try it Yourself »

위 예로부터 기대 할 수 있는 것

• x 는 값 5를 저장한다.
• y 는 값 6을 저장한다.
• z 는 값 11을 저장한다.

---

Much Like Algebra

이 예에서, price1, price2, total은 변수이다.

Example

var price1 = 5;
var price2 = 6;
var total = price1 + price2;

Try it Yourself »

그냥 대수처럼, 프로그래밍에서, 우리는 값을 저장하기 위해 변수를(price1 처럼) 사용할 수 있다. 

그리고 우리는 수식에서도 변수를 사용할 수 있다.(total = price1 + price2)

위 예에서 당신은 total이 11이라고 계산 할 수 있다.

	자바스크립트 변수는 데이터 값을 저장하는 컨테이너다.

---

JavaScript Identifiers(자바스크립트 식별자)

모든 자바스크립트 변수는 고유 이름으로 식별되어야 한다.

이러한 고유 이름을 식별자라 부른다.

식별자는 짧은 이름(x, y 같은), 이거나 더 세부적인 이름(age, sum, totlaVolume 같은)이 될 수 있다.

변수(고유 식별자) 이름을 구성하는 일반적인 규칙은 다음과 같다.

• 이름은 문자, 숫자, 밑줄, 달러 기호를 포함 할 수있다.
• 이름은 문자로 시작해야만 한다.
• 이름은 또한 $와 _로 시작할 수 있다.(하지만 우리는 이것을 이 듀토리얼에서 사용하진 않는다.)
• 이름은 대소 문자를 구분한다.(y와 Y는 다른 변수다.)
• 예약어(자바스크립트 키워드처럼)는 이름으로서 사용될 수 없다.

	자바스크립트 식별자는 대소 문자를 구분한다.

---

The Assignment Operator(할당 연산자)

자바스크립트에서, 등호(=)는 "같다"는 연산자가 아닌, "할당" 연산자이다.

이것은 대수학과 다르다. 다음은 대수학에서는 말이 되지 않는다.

x = x + 5

그러나 자바스크립트에서는, x에 x+5의 값을 할당하라는 말이 된다.

(그것은 x+5의 값을 계산하고 결과를 x의 값에 넣는다. 그 결과 x의 값은 5가 증가한다.)

	"같다" 연산자는 자바스크립트에서 == 같이 쓰여진다.

---

JavaScript Data Types

자바스크립트 변수는 "홍길동", 100 처럼 텍스트나 숫자 값으로 저장할 수 있다.

프로그래밍에서 텍스트 값은 텍스트 문자열 라고 불린다.

자바스크립트는 많은 데이터 타입을 다룰 수 있지만, 지금은 단지 숫자와 문자열 만을 생각하자.

문자열은 큰 따옴표나 작은 따옴표 안에서 쓰여진다. 숫자는 따옴표 없이 써진다.

만약 숫자를 따옴표로 묶을 경우, 텍스트 문자열로 처리할 것이다.

Example

var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';

Try it Yourself »

---

Declaring (Creating) JavaScript Variables(자바스크립트 변수 선언(만들기)

자바스크립트에서 변수를 만드는 것은 변수를 "선언한다"고 말한다.

var 키워드로 자바스크립트 변수를 선언할 수 있다.

var carName;

변수 선언 후, 변수는 비어있다(값이 없다).

변수에 값을 할당하기 위해 등호(=)를 사용한다.

carName = "Volvo";

변수를 선언했을 때 바로 변수에 값을 할당할 수도 있다.

var carName = "Volvo";

아래 예에서, 우리는 carName이라 불리는 변수를 만들고, 거기에 "Volvo"라는 값을 할당한다.

그리고 id="demo"인 HTML문단에 값을 출력한다.

Example

<p id="demo"></p>

<script>
var carName = "Volvo";
document.getElementById("demo").innerHTML = carName; 
</script>

Try it Yourself »

	스크립트 시작 부분에 모든 변수를 선언하는 것은 좋은 프로그래밍 습관이다.

---

One Statement, Many Variables(하나의 문장, 많은 변수)

하나의 문장에 많은 변수를 선언할 수 있다.

var로 문장을 시장하고 콤마(,)로 변수를 구분해라.

var person = "John Doe", carName = "Volvo", price = 200;

Try it Yourself »

선언은 여러줄에 걸쳐있을 수 있다.

var person = "John Doe",
carName = "Volvo",
price = 200;

Try it Yourself »

---

Value = undefined(값 = 정의되지 않은)

컴퓨터 프로그램에서 변수는 종종 값이 없이 선언된다. 값은 종종 계산되어야 하거나, 나중에 제공되야 하거나, 사용자 입력 값일 수도 있다.

값이 없이 선언된 변수는 undefind(정의되지 않은) 값을 가질 것이다.

변수 carName은 이 문장 실행 후 undefind(정의되지 않은) 값을 가질 것이다.

Example

var carName;

Try it Yourself »

---

Re-Declaring JavaScript Variables(재선언한 자바스크립트 변수)

만약 자바스크립트 변수를 재선언한다면, 그 변수는 원래의 값을 잃지 않을 것이다.

변수 carName은 이 문장 실행 후 여전히 "Volvo"라는 값을 가지고 있다.

Example

var carName = "Volvo";
var carName;

Try it Yourself »

---

JavaScript Arithmetic(자바스크립트 산수(연산))

수학과 마찬가지로, =, + 같은 연산자를 사용하여, 자바스크립트 변수와 연산을 수행 할 수있다.

Example

var x = 5 + 2 + 3;

Try it Yourself »

또한 문자열도 +를 할 수 있지만, 문자열을 연결 시켜준다.(한쪽 끝과 다른 한쪽 끝을 이어서)

Example

var x = "John" + " " + "Doe";

Try it Yourself »

Also try this:

Example

var x = "5" + 2 + 3;

Try it Yourself »

	만약 문자열에 숫자를 더한다면 숫자는 문자로서 취급되어 문자로 연결될 것이다.

---

Test Yourself with Exercises!

Exercise 1 »    Exercise 2 »    Exercise 3 »