변수의 종류와 특징
. 전역변수 : - 함수 밖에서 선언된 변수
- 함수안에서 선언자 없이 선언된 변수
>> 함수 안/밖 그리고... 다른 함수안에서도 호출 가능하다.
. 지역변수 : - 함수 안에서 선언된 변수
>> 함수 안에서 호출 가능하다.
. 블록변수 : - if,while,for문등 블록안에서 선언된 변수
>> 해당 블록 안에서만 호출가능하다.
. var num;
- 변수,상수 모두 사용
- 함수 안/밖에서는 num, this.num 형식으로 모두 호출가능
. let , const
- let 변수, const 상수에 사용
- var과 다르게 this호출은 불가하다.
<body>
<h3>변수선언 - 지역,전역,블록변수</h3>
<hr>
<script type="text/javascript">
var x; 선언만 한것
let a = 50;
const c = 60;
function f1() {
let y; 지역변수
let b = 60; 지역변수
const d = 70; 지역상수
x = 10; 전역변수에 값 할당
y = 20; 지역변수에 값 할당
z = 30; 선언자 없는 전역변수
********** 블 록**************
if (y==20){
let t = 40; // 블록변수
t++;
//접근
document.write('블록안쪽: 블록변수 t= '+ t +'<br><br>');
document.write('블록안쪽: var선언된 전역변수 x= '+ x +'<br>');
document.write('블록안쪽: var선언된 전역변수 this.x= '+ this.x + '<br><br>');
document.write('블록안쪽: 함수안에서 선언자 없는 전역변수 z= '+ z + '<br><br>');
document.write('블록안쪽: let선언된 전역변수 a= '+ a + '<br>');
document.write('블록안쪽: let선언된 전역변수 this.a= ' + this.a + '<br><br>');
document.write('블록안쪽: let선언된 지역변수 b= '+ b + '<br>');
document.write('블록안쪽: let선언된 지역변수 this.b= ' + this.b + '<br><br>');
document.write('블록안쪽: const선언된 전역변수 c= '+ c + '<br>');
document.write('블록안쪽: const선언된 전역변수 this.c= ' + this.c + '<br><br>');
document.write('블록안쪽: const선언된 지역상수 d= '+ d + '<br>');
document.write('블록안쪽: const선언된 지역상수 this.d= ' + this.d + '<br><br>');
document.write('<hr>');
}
*********************************
//접근
//document.write('함수안 블록바깥쪽: 블록변수 t= '+ t +'<br><br>');
document.write('함수안 블록바깥쪽: var선언된 전역변수 x= '+ x +'<br>');
document.write('함수안 블록바깥쪽: var선언된 전역변수 this.x= '+ this.x + '<br><br>');
document.write('함수안 블록바깥쪽: 함수안에서 선언자 없는 전역변수 z= '+ z + '<br><br>');
document.write('함수안 블록바깥쪽: let선언된 전역변수 a= '+ a + '<br>');
document.write('함수안 블록바깥쪽: let선언된 전역변수 this.a= ' + this.a + '<br><br>');
document.write('함수안 블록바깥쪽: let선언된 지역변수 b= '+ b + '<br>');
document.write('블록안쪽: let선언된 지역변수 this.b= ' + this.b + '<br><br>');
document.write('함수안 블록바깥쪽: const선언된 전역변수 c= '+ c + '<br>');
document.write('함수안 블록바깥쪽: const선언된 전역변수 this.c= ' + this.c + '<br><br>');
document.write('함수안 블록바깥쪽: const선언된 지역상수 d= '+ d + '<br>');
document.write('함수안 블록바깥쪽: const선언된 지역상수 this.d= ' + this.d + '<br><br>');
document.write('<hr>');
}
//호출
f1();
//접근
document.write('함수밖: var선언된 전역변수 x= '+ x +'<br>');
document.write('함수밖: var선언된 전역변수 this.x= '+ this.x + '<br><br>');
document.write('함수밖: 함수안에서 선언자 없는 전역변수 z= '+ z + '<br><br>');
document.write('함수밖: let선언된 전역변수 a= '+ a + '<br>');
document.write('함수밖: let선언된 전역변수 this.a= ' + this.a + '<br><br>');
//document.write('함수밖: let선언된 지역변수 b= '+ b + '<br>');
//document.write('함수밖: let선언된 지역변수 this.b= ' + this.b + '<br><br>');
document.write('함수밖: const선언된 전역변수 c= '+ c + '<br>');
document.write('함수밖: const선언된 전역변수 this.c= ' + this.c + '<br><br>');
//document.write('함수밖: const선언된 지역상수 d= '+ d + '<br>');
//document.write('함수밖: const선언된 지역상수 this.d= ' + this.d + '<br><br>');
document.write('<hr>');
//다른함수
function f2() {
document.write('<br>');
document.write('다른 함수속: var선언된 전역변수 x= '+ x +'<br>');
document.write('다른 함수속: var선언된 전역변수 this.x= '+ this.x + '<br><br>');
document.write('다른 함수속: 함수안에서 선언자 없는 전역변수 z= '+ z + '<br><br>');
document.write('다른 함수속: let선언된 전역변수 a= '+ a + '<br>');
document.write('다른 함수속: let선언된 전역변수 this.a= ' + this.a + '<br><br>');
//document.write('다른 함수속: let선언된 지역변수 b= '+ b + '<br>');
//document.write('다른 함수속: let선언된 지역변수 this.b= ' + this.b + '<br><br>');
document.write('다른 함수속: const선언된 전역변수 c= '+ c + '<br>');
document.write('다른 함수속: const선언된 전역변수 this.c= ' + this.c + '<br><br>');
//document.write('다른 함수속: const선언된 지역상수 d= '+ d + '<br>');
//document.write('다른 함수속: const선언된 지역상수 this.d= ' + this.d + '<br><br>');
document.write('<hr>');
}
//호출 f2()
f2();
</script>
</body>
변수 호이스팅(hoisting)
- 변수 선언들은 어느 코드가 실행되기 전에 먼저 처리된다
- 다시 말해, 변수는 어디에서 선언되더라도 최상위에서 선언된 것과 동등하다
<script type="text/javascript">
var a;
var a= 10;
var a= 30;
document.write('출력1~~~~~~~~~');
let c = 100;
//let c = 200;
let d = 600;
let e = 500;
let sum = d + e;
function f(){
let c = 500;
m = 1500;
document.write('var로 선언된 전역변수 a의 최종값='+a+'<br>');
document.write('지역변수 c= '+c+'<br>');
document.write('전역변수 d= '+d+'<br>');
document.write('전역변수 sum= '+sum+'<br>');
document.write('함수보다 아래에 있는 전역변수 g='+g+'<br>');
}
document.write('출력2~~~~~~~~~<br>');
let g = 500; //g 전역변수 선언
f();
document.write('출력3~~~~~~~~~~~<br>')
</script>
자료형
. Number - 숫자
- 정수형
- 실수형 >>> 부동소수점방식 저장
. String - 문자형 "", '' 상관없이 지정가능
. Boolean - 논리형 true, false
. Undefined - undefined : 할당되지 않은 변수에 대해서 브라우저 엔진이 자동 할당해준다.
. Null - null : 개발자가 직접 어떤 값을 할당할지 모를 때 초기값을 부여
. NaN - not a number
. 객체 (Object) : 기본적으로 자바스크립트는 모든 것은 객체이다.
*진수 128 64 32 16 8 4 2 1
0 0 0 0 0 1 0 1
0 0 0 0 1 0 1 0 (2진수)
3자리씩 (8진수)
4자리씩(16진수)
<script type="text/javascript">
let int = 3;
let oct = 052; 0~ 8진수 : 000 101 010 -- 2진수 --> 000101010 --> 42
document.write(oct+'<br>');
let hex = 0xA49; 0x~ 16진수: ~~9 A B C D E F
1010 0100 1001 ---> 101001001001 -->2633
document.write(hex);
let f = 3.14;
//---------------------
let c = '자바스크립트'; ' ' 또는 " " 상관없다
let b = true;
// --------------------
var num1 = 015;
var num2 = 0x15;
var con = true;
document.write('8진수 015는 십진수로 ?? '+ num1);
document.write('16진수 0x15는 십진수로 ??'+ num2);
document.write('con 블린변수의 값은??' + con);
// 당신은 '누구'세요?
document.write('<br>당신은 \'\누구\'\세요?'); \' \" \\
</script>
</body>
</html>
형 변환(type Conversion)
; 문자 >> 숫자, 숫자 >> 문자 등 데이터타입을 변환하는 것을 형변환이라고 함
; 자바스크립트는 자동으로 형변환이 되어 개발자가 문제가 되기도 함
<script type="text/javascript">
document.write("<h3>자바스크립트의 자동형변환</h3><hr>");
document.write('10'+'5'+'<br>'); //문자 + 문자 = 문자
document.write('10' + 5 + '<br>'); //문자 + 숫자 = 결합
document.write(10 + 5 + '<br>') //숫자 + 숫자 = 연산
document.write('가' + 10 + 5 + '<br>');
document.write(10 + 5 + '가' + '<br>');
document.write(10 + 5 + true + '<br><hr>');
document.write('10' - '5' + '<br>'); //더하기만 문제군ㅇㅅㅇ
document.write('10' - 5 + '<br>');
document.write('10' * '5' + '<br>');
document.write('10' / '5' + '<br>');
document.write('10' % '5' + '<br>');
document.write('10' * false + '<br><hr>');
let num1 = prompt('숫자를 입력해 주세요>> ','0');
let num2 = prompt('숫자를 입력해 주세요>> ','100');
첫번째 - 문자 결합됨
let sum = num1 + num2
두번째 - 정수변환 후 연산
형변환 : 문자 -> 정수(parseInt()),
문자 -> 실수(parseFloat())
sum = parseInt(num1) + parseInt(num2);
세번째 - parseInt(prompt) 활용
let num1 =parseInt(prompt('숫자를 입력해 주세요>>','0'))
let num2 =parseInt(prompt('숫자를 입력해 주세요>>','100'))
let sum = num1 + num2
document.write('sum ='+sum+'<br>');
</script>
typeof 연산자 : 어떤 자료형인지 반환해준다.
<body>
<script type="text/javascript">
document.write(typeof"점심시간"+"<br>");
document.write(typeof 3.14 +"<br>");
document.write(typeof NaN +"<br>");
document.write(typeof false +"<br>");
document.write(typeof [1,2,3,4] + "<br>");
document.write(typeof function(){}+"<br>");
document.write(typeof myCar +"<br>");
document.write(typeof null +"<br>");
</script>
</body>
연산자 (operator)
- 우선순위가 있다
- 2 + 4 * 3 / 2 - 7 ** 2 = ?
.산술연산자 : +,-,*,/,%
.대입연산자 : =, +=, -=, *=, /=, %=
.증감연산자 : ++, --
.비교연산자 : ==, !=, < ,<= , >, >=
.논리연산자 : &&, ||, !
.조건연산자 : 조건문? 참:거짓 (삼항연산자)
.연결연산자 : + (결합)
.비트연산자 : &, |, ^
.시프트연산자: >>, <<, >>>, <<<
<script type="text/javascript">
document.write('<h3>대입연산자</h3><hr>');
let a,b,c,d,e;
a=b=c=d=e=14;
a += 5; // a = a + 5
b -= 5; // b = b - 5
c *= 5; // c = c * 5
d /= 5; // d = d / 5
document.write('a값은 a='+a+'<br>');
</script>
<script type="text/javascript">
let a = 5;
document.write('<h3>논리연산자</h3>');
document.write('a>1 && a<5:' +(a>1 && a<5)+'<br>'); and T && F >> F
document.write('a>1 || a<5:' +(a>1 || a<5)+'<br>'); or T || F >> F
document.write('!(a>1): '+ !(a>1)+ '<br>'); not ! T >> F
document.write('a>1 & a<5: '+(a>1 & a<5)+'<br>'); T 1
F 0
& 0
let b = 11;
let c = 15;
</script>
증감연산자 : ++, --
. 전위증감 : 먼저 자신을 증감시킨후 연산시킴
. 후위증감 : 연산 후에 자신을 증감시킴
<script type="text/javascript">
let a = 9;
let b = 10;
let c;
document.write('<h3>증감연산자</h3>');
c = ++a +b ;
document.write('전위증감: c = ++a + b >> '+ c+ '<br>');
document.write('연산후 a값: a= '+a+'<br><hr>');
후위증가
d = a++ +b;
document.write('후위증감: d = a++ + b >> ' + d + '<br>');
document.write('연산후 a값: a = '+a+'<br><hr>');
후위감소
document.write('b-- : '+ b--+'<br>');
document.write('b-- 이후의 b: '+b+ '<br>');
전위감소
document.write('--b: '+--b+'<br>');
</script>
조건연산자(삼항연산자)
. 단순한 두개의 비교문 실행시에 활용함
<script type="text/javascript">
let a=3, b=5;
두수의 차이?
document.write('두 수의 차이: '+((a>b) ? (a-b):(b-a) ));
</script>
let a=3, b=5;
두수의 차이?
document.write('두 수의 차이: '+((a>b) ? (a-b):(b-a) ));
</script>
'IT 공부 > JavaScript' 카테고리의 다른 글
Date 객체 (0) | 2022.06.08 |
---|---|
실습 (0) | 2022.06.07 |
함수 (1) | 2022.06.07 |
조건문, 반복문 (0) | 2022.06.03 |
자바스크립트 기본구조 (0) | 2022.06.02 |