[JS-보충] 22-09-26 변수 유효범위, typeof

공부참고사이트 : https://www.w3schools.com/js/default.asp

JavaScript Tutorial

---

변수의 유효 범위

function test1(){
  var a = 1;
  b = 2;
  let c = 3;
}

test1();
//alert(a); //안찍힘
//alert(b); //var가 안붙으면 전역변수 찍힘
//alert(c); //지역변수이기 때문에 안찍힘

지역 변수(local variable)

지역 변수(local variable)란 함수 내에서 선언된 변수를 가리킵니다.

이러한 지역 변수는 변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라집니다.

함수의 매개변수 또한 함수 내에서 정의되는 지역 변수처럼 동작합니다.

function localNum() {

    var num = 10; // 지역 변수 num에 숫자 10을 대입함.

    document.write("함수 내부에서 변수 num의 타입은 " + typeof num + "입니다.<br>"); // number

}

localNum();       // 함수 localNum()을 호출함.

document.write("함수의 호출이 끝난 뒤 변수 num의 타입은 " + typeof num + "입니다."); // undefined

자바스크립트에서는 선언되지 않은 변수를 사용하려고 하거나 접근하려고 하면 오류를 발생시킵니다.

하지만 선언되지 않은 변수에 대한 typeof 연산자의 결괏값은 undefined 값을 반환합니다.

전역 변수(global variable)

전역 변수(global variable)란 함수의 외부에서 선언된 변수를 가리킵니다.

이러한 전역 변수는 프로그램의 어느 영역에서나 접근할 수 있으며, 웹 페이지가 닫혀야만 메모리에서 사라집니다.

var num = 10; // 전역 변수 num을 선언함.

function globalNum() {

    document.write("함수 내부에서 변수 num의 값은 " + num + "입니다.<br>"); // 10

    num = 20; // 전역 변수 num의 값을 함수 내부에서 변경함.

}

globalNum();  // 함수 globalNum()을 호출함.

document.write("함수의 호출이 끝난 뒤 변수 num의 값은 " + num + "입니다."); // 20

 

위의 예제처럼 전역 변수는 함수 외부뿐만 아니라 내부에서도 접근하여 변경할 수 있습니다. 

 

자바스크립트에서 지역 변수를 선언할 때에는 반드시 var 키워드를 사용하여 선언해야 합니다.

함수 내부에서 var 키워드를 사용하지 않고 변수를 선언하면, 해당 변수는 지역 변수가 아닌 전역 변수로 선언됩니다.

function globalNum() {

    num = 10; // var 키워드를 사용하지 않고 변수 num을 선언함.

    document.write("함수 내부에서 변수 num의 값은 " + num + "입니다.<br>"); // 10

}

globalNum();  // 함수 globalNum()을 호출함.

document.write("함수의 호출이 끝난 뒤 변수 num의 값은 " + num + "입니다."); // 10

 

또한, 전역 변수와 같은 이름의 지역 변수를 선언하면, 해당 블록에서는 해당 이름으로 지역 변수만을 호출할 수 있습니다.

var num = 10; // 전역 변수 num을 선언함.

function globalNum() {

    var num = 20; // 같은 이름의 지역 변수 num을 선언함.

    document.write("함수 내부에서 변수 num의 값은 " + num + "입니다.<br>"); // 20

}

globalNum(); // 함수 globalNum()을 호출함.

document.write("함수의 호출이 끝난 뒤 변수 num의 값은 " + num + "입니다."); // 10

 

위의 예제와 같은 경우 해당 블록에서 전역 변수를 호출하려면, 전역 변수가 window 객체의 프로퍼티임을 명시하면 됩니다.

var num = 10; // 전역 변수 num을 선언함.

function globalNum() {

    var num = 20; // 같은 이름의 지역 변수 num을 선언함.

    document.write("함수 내부에서 지역 변수 num의 값은 " + num + "입니다.<br>");

    document.write("함수 내부에서 전역 변수 num의 값은 " + window.num + "입니다.<br>");

}

globalNum(); // 함수 globalNum()을 호출함.

 

Window 객체

window 객체는 웹 브라우저의 창(window)을 나타내는 객체로, 대부분의 웹 브라우저에서 지원하고 있습니다.

자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 됩니다.

window 객체의 메소드는 전역 함수이며, window 객체의 프로퍼티는 전역 변수가 됩니다.

문서 객체 모델(DOM)의 요소들도 모두 window 객체의 프로퍼티가 됩니다.

---

typeof

typeof 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환합니다.

 

자바스크립트에있는 자료형을 살펴보자. 

1.  숫자형 number 정수, 실수

       document.write(10,typeof(10),"<br>");
       document.write(10.1,typeof(10.1),"<br>");
       
       var myNum=10;
       document.write(myNum,typeof(myNum),"<br>");
       myNum=10.1;
       document.write(myNum,typeof(myNum),"<br>");

 

2. 블리언 boolean 자료형  true,false

       var myBoolean=true;
       document.write(myBoolean,typeof(myBoolean),"<br>");
       myBoolean=false;
       document.write(myBoolean,typeof(myBoolean),"<br>");

3. 문자열 string '' "" 로 묶어서 표현한다.

        var myString ="hello";
        document.write(myString,typeof(myString),"<br>");

4. 배열자료형 Array

       var myArray=["A","B","C"];
       document.write(myArray[0],"<br>");
       myArray[0]="D";
       document.write(myArray[0],"<br>");
       document.write(myArray,"<br>");
       var myArray=["A",1,[1,2,3]]; //다양한 자료를 담을수 있다.
       document.write(typeof(myArray));// array -> object
        var myArray=["A",1,[1,2,3]]; //다양한 자료를 담을수 있다.
        myArray[2][1]=10;
        document.write(myArray);

5. 객체 자료형 object

json = 자바스크립트 객체

         //json
       var myObject={};
       var myPerson={
           firstName:"jone",
           age:40,
           eyeColor:"blue"
       }
       document.write(myPerson.firstName,myPerson.age,myPerson.eyeColor,"<br>");
       myPerson.age=50;
       document.write(myPerson.firstName,myPerson.age,myPerson.eyeColor,"<br>");
       document.write(typeof(myPerson),"<br>")

6.함수 function

       var myFunction=function(){
           alert('hello');
       }
       document.write(myFunction,typeof(myFunction));
       myFunction();

기타사항

        var a;
        document.write(a,typeof a,"<br>");
        var b=null;
        document.write(b,typeof b);

undefined 자료형이 결정되지 않고 값은 할당되지 않음
null  자료형은 object 이고   값은 할당되지 않음