IT 공부/JavaScript

변수, 연산자

toraa 2022. 6. 3. 17:23

  변수의 종류와 특징
      . 전역변수 :  - 함수 밖에서 선언된 변수
               - 함수안에서 선언자 없이 선언된 변수  
               >> 함수 안/밖 그리고... 다른 함수안에서도 호출 가능하다.    
      . 지역변수 : - 함수 안에서 선언된 변수
               >> 함수 안에서 호출 가능하다.
      . 블록변수 : - 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