JavaScript 필기노트 2

변수 유효범위 (Variable Scope)

JS에서는 객체 , 함수 모두 변수입니다. Scope란 변수의 유효 범위 , 즉 변수가 살아서 인정될 수 있는 범위를 말합니다.

 

1. JS의 지역변수

지역변수(Local Variable)는 함수 내에서 선언된 변수를 말합니다.

이러한 변수들의 유효 범위는 함수 내부입니다. 함수의 외부에서 사용하거나 접근하려고 하면 오류를 발생시킵니다.

함수의 매개변수 역시 함수 내부에서만 유효하고 함수의 외부에서는 접근 및 사용이 불가능합니다.

* 하지만 지역변수에 typeof 연산자에 대입하면 오류가 아닌 undefined를 반환합니다.

 

EX)

function localNum() {

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

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

}

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

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

 

2. JS의 전역변수

함수 외부에서 선언된 변수들을 전역변수라고 합니다.

프로그램의 어느 영역에서나 접근 및 사용이 가능하며 , 웹 페이지가 닫히는 순간 메모리에서 사라집니다.

 

EX)

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

function globalNum() {

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

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

}

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

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

 

전역 변수는 함수 외부 뿐만이 아니라, 내부에서도 접근하여 변경할 수 있습니다.

 

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

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

 

 

함수 호이스팅 (hoisting)

이 개념은 자바스크립트를 공부하면서 처음 본 개념인데요, 함수 내부에서 선언되는 변수들을 선언된 위치가 어딘지에 따라 상관없이 함수가 시작하자마자 선언해주는(초기화, 즉 값의 대입은 진행X) 개념입니다.

 

EX)

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

function printNum() {

    document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum + "입니다.<br>"); // ①

    var globalNum = 20; // globalNum을 지역 변수로 선언함. // ②

    document.write("지역 변수 globalNum 선언 후의 globalNum의 값은 " + globalNum + "입니다.<br>");

}

printNum();

 

위의 ①의 출력값은 undefined가 됩니다.

그 이유는 printNum 함수가 시작되자마자 ①줄이 시작되는게 아닌 바로 밑에 줄에있는 globalNum의 선언이 먼저 실행되기 때문입니다. 20이라는 값의 대입은 실행되지 않기 때문에 선언만 되어있는 변수로 ①에서 인식하기 때문에 undefined를 출력하게 됩니다.

 

★위와 같은 이유로 자바스크립트에서는 항상 함수 블록의 첫 부분에 변수를 선언하는 것이 좋습니다.

 

arguments 객체

arguments 객체란 함수에 전달하는 인수들의 총 개수와 index를 이용하여 인수에 접근할 수 있는 하나의 객체입니다.

하지만 배열과 비슷할 뿐, 실제로 Array객체는 아닙니다. legnth 프로퍼티가 있지만 진짜 배열 객체처럼 다룰 수는 없습니다.

 

EX)

 

function addNum() {

    var sum = 0;                                // 합을 저장할 변수 sum을 선언함.

    for(var i = 0; i < arguments.length; i++) { // 전달받은 인수의 총 수만큼 반복함.

        sum += arguments[i];                    // 전달받은 각각의 인수를 sum에 더함.

    }

    return sum;

}

addNum(1, 2, 3); // 6

addNum(1, 2);    // 3

addNum(1);       // 1

addNum();        // 0

addNum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55

 

Javascript의 객체

객체란 이름(name)과 값(value)으로 구성된 property의 정렬되지 않은 집합입니다.

 

EX)

var cat = "나비"; // 일반적인 변수의 선언

// 객체도 많은 값을 가지는 변수의 하나임.

var kitty = { name: "나비", family: "코리안 숏 헤어", age: 1, weight: 0.1 };

cat          // 나비

kitty.name   // 나비

 

JS에서는 숫자, 문자열, 불리언, undefined 타입을 제외한 모든 것이 객체입니다.하지만 숫자, 문자열, 불리언과 같은 원시 타입은 값이 정해진 객체로 취급되어, 객체로서의 특징도 가집니다.

 

객체의 생성

JS에서 객체를 생성하는 방법은 다음과 같습니다.

 

1. 리터럴 표기를 이용한 방법

2. 생성자 함수를 이용한 방법

3. Object.create() 메소드를 이용한 방법

 

위 방법들을 사용하여 생성된 메모리에 대입된 객체를 인스턴스라고 합니다.

 

 

예제 및 내용 참고 사이트 : http://www.tcpschool.com/javascript

코딩교육 티씨피스쿨