2.5 변수
▲ 변수 : 변수는 값을 저장하는 데 사용되는 식별자입니다.
모든 데이터 유형을 저장할 수 있습니다.
▲ 변수 선언: 변수를 만들다
▲ 변수에 값 할당: 변수에 값 저장
▲ 변수 초기화: 변수가 선언된 후 처음으로 값을 할당합니다.
변수를 선언하는 방법
1. 변수 식별자
var로 선언한 변수는 같은 이름으로 여러 번 선언할 수 있습니다.
var 변수는 다시 선언하고 업데이트할 수 있습니다.
var 변수가 함수 외부에서 선언될 때 전역 범위(항상 사용 가능)
var 변수가 함수 내에서 선언될 때 함수 범위(함수 내에서만 사용 가능)2. 휴가 식별자
let으로 선언된 변수는 { } 내에서만 사용할 수 있습니다.
let은 업데이트할 수 있지만 재선언은 업데이트할 수 없습니다.
그러나 동일한 변수가 다른 범위에 정의되어 있으면 오류가 발생하지 않습니다.
let을 사용하면 변수가 범위에만 존재하므로 이전에 사용한 변수 이름에 대해 걱정할 필요가 없습니다.
또한 범위 내에서 동일한 변수를 두 번 이상 선언할 수 없습니다.3. 상수 식별자
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>
코드 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. Javascript의 데이터 유형
<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. (출력: 10, 변수값: 11)
2)알람(++숫자) : 숫자에 +1을 더한 후 출력을 11로 변경(출력: 12, 변수: 12)
3) 경고(숫자–) : 먼저 선언된 번호를 인쇄합니다.
출력 후 -1 (출력: 12, 변수 값: 11)
4) 알람(–숫자) : 숫자에 -1을 더한 후 출력이 11로 변경됨(출력: 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>