변수와 자료형

1.변수 선언

1)지역변수 & 전역변수

지역변수 : 함수 내부에서 'var 변수명;'
전역변수 : 함수 내부에서 '변수명;'
전역변수 : 함수 밖에서 '변수명;' 혹은 'var 변수명;'

// 함수 외부
str1 = "전역변수";
var str2 = "var전역변수";

// 함수 내부
var str1 = "지역변수1"
var str3 = "지역변수2"

console.log('str1 : ' + str1);              /* 지역 변수 */
console.log('this.str1 : ' + this.str1);    /* 함수 안에 있는 전역변수 */
console.log('window.str1 : ' + window.str1);/* 전역변수 : 함수 내부에서는 전역변수를 this.나 window.을 찍어서 구분해줘야한다 */
// 자바 때, 매개변수도 지역변수. 구분을 위해서 this썼었음
// js도 위처럼 this나 window 써서 구분해줌

console.log('str2 : ' + str2);               // var전역변수
console.log('this.str2 : ' + this.str2);     // var전역변수
console.log('window.str2 : ' + window.str2); // var전역변수

console.log('str3 : ' + str3);               // 지역변수
console.log('this.str3 : ' + this.str3);     // undefined : 없다는 얘기 // 지역변수인데 전역변수 구분용 접두어를 붙여놨으니 undefined
console.log('window.str3 : ' + window.str3); // undefined  : js에서는 정의가 안된 데이터 '취급'함

 - 지역변수 : 함수 내부에서 'var 변수명;'으로 선언하면 지역변수가 됨

 - 전역변수 : 

함수 내부에서 '변수명; '으로 선언하거나 함수 밖에서 '변수명;' 혹은 'var 변수명;'으로 선언하면 전역변수가 됨

2)우선권 : 전역과 지역변수의 우선권

전역변수와 지역변수가 동일한 이름인 경우,

함수 내부에서 변수 명을 호출하면 지역변수가 우선권을 가짐

window. this. : 전역변수와 지역변수 구분하는 코드

전역 변수 사용 시 'window. 변수 명;' 혹은 'this.변수 명;'으로 표현하여 지역변수와 구분

전역변수는 해당 window내에서 어디든 사용할 수 있으며, 지역변수는 해당 함수 내에서만 사용 가능

window.onload = function()

페이지가 로드되면 자동으로 실행하는 함수

한 페이지에서 하나의 onload함수만 기술 가능 페이지가 로드가 되면 한번에 여러개 실행되고 싶으면 한번에 하나만 가능해서 단점으로 생각해서 제이쿼리에서 여러개 실행가능하게 만들어둠

window.onload = function(){

추가자료

https://itworldyo.tistory.com/101

2.자료형

JS에서는 자료형 별로 변수 타입이 지정되지 않고,

리터럴에 의해서 자료형 결정

JS 데이터 타입

string

number

boolean

Array(object)

Object(object)

function

<h3>자료형</h3>
<p>자바스크립트에서는 자료형 별로 변수 타입이 지정되지 않고 리터럴에 의해서 자료형 결정</p>
<button onclick="typeTest();">자료형 테스트</button>
<script>
  function typeTest(){
    var name = "강건강";                     // 문자열
    var age = 20;                           // 숫자
    var check = true;                       // 논리값        
    var hobby = ['축구', '야구', '농구'];    // 배열
    var user = {                             // 객체   
        name: '강건강',
        age: 20,
        id: 'user01'              
    };
    var testFunction = function(num1, num2){
        var sum = num1 + num2;
        alert(sum);
    };
    
    // 콘솔창에서 '값' 확인
    console.log(name);
    console.log(age);
    console.log(check);
	  console.log(hobby);     // (3) ['축구', '야구', '농구']
    console.log(user);      // {name: '강건강', age: 20, id: 'user01'}
    console.log(testFunction); // ƒ (num1, num2){
                               //                var sum = num1 + num2;     
                               //                 alert(sum);
                               //               }
    // 콘솔창에서 '타입' 확인
		console.log(typeof(name));  // string
    console.log(typeof(age));   // number
    console.log(typeof(check)); // boolean
    console.log(typeof(hobby)); // object   // array
    console.log(typeof(user));  // object
    console.log(typeof(testFunction));  // function
    // typeof연산자 : 값의 자료형을 확인하는 연산자
  }
</script>