Chapter 02 자바스크립트 기본 - 변수
2.5 변수
▲ 변수 : 변수는 값을 저장할 때 사용하는 식별자. 모든 자료형을 저장할 수 있음.
▲ 변수를 선언한다 : 변수를 만드는 것
▲ 변수에 값을 할당한다 : 변수에 값을 저장하는 것
▲ 변수를 초기화한다 : 변수를 선언한 후에 처음 값을 지정하는 것
변수 선언 방식
1. var 식별자
var 로 선언한 변수는 동일한 이름으로 여러 번 중복해서 선언이 가능하다.
var 변수는 재선언되고, 업데이트 될 수 있다.
var 변수가 함수 외부에서 선언될 때는 전역 범위(전체에서 사용 가능)
var 변수가 함수 내부에서 선언될 때는 함수 범위(함수 안에서만 사용 가능)
2. let 식별자
let으로 선언된 변수는 { } 내에서만 사용가능하다.
let은 업데이트될 수 있지만, 재선언은 불가능하다.
그러나 동일한 변수가 다른 범위 내에서 정의된다면, 에러 발생하지 않음.
let 을 사용하는 경우라면, 변수가 범위 내에서만 존재하기 때문에 이전에 이미 사용한 적이 있는 변수 명에 대해서 더 이상 신경쓰지 않아도 괜찮다. 또한, 범위 내에서 동일한 변수를 두 번 이상 선언할 수 없다.
3. const 식별자
const 로 선언된 변수는 일정한 상수 값을 유지.
const는 업데이트도, 재선언도 불가능하다. 따라서 모든 const 선언은 선언하는 당시에 초기화되어야 합니다.
변수는 들어 있는 자료형에 따라 모든 연산이 가능하다.
▲ 복합 대입 연산자 : 대입 연산자와 다른 연산자를 함께 사용하는 연산자
| 연산자 | 설명 |
| += | 기존 변수의 값에 값을 더하기 |
| -= | 기존 변수의 값에 값을 빼기 |
| *= | 기존 변수의 값에 값을 곱하기 |
| /= | 기존 변수의 값에 값을 나누기 |
| %= | 기존 변수의 값에 나머지를 구하기 |
▲ 증감 연산자 : 복합 대입 연산자를 간략하게 사용한 형태
| 연산자 | 설명 |
| 변수++ | 기존 변수의 값에 1을 더하기(후위) |
| ++변수 | 기존 변수의 값에 1을 더하기(전위) |
| 변수-- | 기존 변수의 값에 1을 빼기(후위) |
| --변수 | 기존 변수의 값에 1을 빼기(전위) |
▲ 변수의 특성 : 변수는 컵과 같다. 하나의 컵은 하나의 내용물만 담을 수 있다는 점이 변수의 특성과 같다..!
코드 2-15. 변수의 선언
<script>
//변수를 선언
var pi;
</script>
코드 2-16. 변수의 선언과 할당
<script>
//변수를 선언
var pi;
//변수에 값을 할당
pi = 3.14159256;
</script>
코드 2-17. 변수의 선언과 초기화
<script>
//변수를 선언하고 초기화
var pi = 3.14159256;
</script>
코드 2-18. 변수의 사용(1)
<script>
//변수를 선언하고 초기화
var pi = 3.14159256;
//출력
alert(pi);
</script>
코드 2-19. 변수의 사용(2)
<script>
//변수를 선언하고 초기화
var radius = 10;
var pi = 3.14159265;
//출력
alert(2 * pi * radius);
</script><코드설명> 반지름이 10인 원의 둘레가 구해짐
코드 2-20. 여러 변수의 선언
<script>
//변수를 한 번에 선언
var radius, pi;
//변수에 값을 할당
radius = 10;
pi = 3.14159265;
//출력
alert(2 * pi * radius);
</script><코드설명> 쉼표를 사용해 식별자를 연속으로 입력하고, 한꺼번에 선언할 수 있음
코드 2-20. 여러 변수의 선언
코드 2-21. 복수 변수의 선언과 초기화
<script>
//변수 선언과 초기화를 한번에
var radius=10, pi=3.14159265;
//출력
alert(2 * pi * radius);
</script>
코드 2-22. 자바스크립트의 자료형
<script>
//변수 선언
var stringVar = 'String';
var numberVar = 273;
var booleanVar = true;
var functionVar = function(){};
var objectVar = {};
</script>
코드 2-23. 복합 대입 연산자
<script>
//변수 선언
var value = 10;
//복합 대입 연산자 사용
value += 10;
//출력
alert(value); //20
</script>
코드 2-24. 복합 대입 연산자의 활용
<script>
window.onload = function(){
//변수 선언
var list = '';
//연산자 사용
list += '<ul>';
list += ' <li>Hello</li>';
list += ' <li>JavaScript...!</li>';
list += '<ul>';
//문서에 출력
document.body.innerHTML = list;
}
</script><코드 결과>
코드 2-25. 증감 연산자(1)
<script>
//변수 선언
var number = 10;
//++증감 연산자 사용
number++;
//출력
alert(number); //11
</script>
코드 2-26. 증감 연산자(2)
<script>
//변수 선언
var number = 10;
//출력
alert(number++); //10
alert(number++); //11
alert(number++); //12
</script><코드 설명> 후위는 해당 문장을 실행한 후에 값을 더하라는 의미. alert(number++)는 alert(number)를 실행한 후에 숫자 1을 더하라는 의미
코드 2-27. 증감 연산자 (2) - 풀이
<script>
//변수 선언
var number = 10;
//출력
alert(number); number += 1;
alert(number); number += 1;
alert(number); number += 1;
</script><코드 설명> 위의 코드를 쉽게 풀어서 쓴 코드.
코드 2-28. 증감 연산자 (3)
<script>
//변수 선언
var number = 10;
//출력
alert(++number); //11
alert(++number); //12
alert(++number); //13
</script>
코드 2-29. 증감 연산자 (4)
<script>
//변수 선언
var number = 10;
//출력
alert(number++); //10
alert(++number); //11+1 = 12
alert(number--); //12
alert(--number); //11-1 = 10
</script><코드 설명>
1)alert(number++) : 선언된 number를 출력. 출력 후 +1하기. (출력:10, 변수값:11)
2)alert(++number) : 11로 변한 number에 +1을 한 뒤 출력하기 (출력:12, 변수:12)
3)alert(number--) : 선언된 number를 우선 출력하기. 출력 후 -1 하기 (출력:12, 변수값:11)
4)alert(--number) : 11로 변한 number에 -1을 한 뒤 출력하기 (출력:10, 변수 10)
코드 2-31. 변수의 특성
<script>
//변수 선언
var cup = 'Coffee';
cup = 'Green Tea';
cup = 'Water';
alert('Drink ' + cup + '..!'); //Drink Water ..!
</script><코드 설명> 하나의 컵은 하나의 내용물만 담을 수 있다. 커피를 주면 커피를 담지만, 녹차를 주면 원래 있던 커피를 버리고 녹차를 담는다. 따라서 마지막에 녹차를 버리고 물을 담았기 때문에, 출력되는 창에는 물이 나오게 되는 것
코드 2-32. 변수의 재정의
<script>
//변수 선언
var favoriteFood = '김치찌개';
var favoriteFood = '라면';
var favoriteFood = '냉면';
alert(favoriteFood); //냉면
</script>
코드 2-34. 변수 정리
<script>
//1번 문제
var value = 10;
value += 20;
alert(value); //30
//2번 문제
var value = 'Hello' + '..!';
alert(value + 'JavaScript'); //Hello...!JavaScript
</script>