<자바스크립트 기초> 09. 변수의 유효범위

 * 유효범위

 - 변수는 각각 유효범위(Scope)를 가진다. 이 때 스크립트 전체에 영향을 미치는 변수를 전역변수라 하고, 특정 부분에서만 작동하는 변수를 지역변수라 한다. 아래에서 더 자세히 알아보자.

 

* 전역변수

var a = 100;

 위는 전역변수이다. a를 100이라 선언했으므로, 어디에서든 a를 다른 값으로 주지 않는 한 100이다. 즉 어디에서나 쓸 수 있다. 그러나 이러한 점 때문에 최대한 안쓰는 것이 좋다. 겹칠우려가 있으며, 이 때는 뒤에서 선언된 것만 인식된다.

 

* 지역변수

function sample() {
    var b = 200;
}

 위와 같이 함수 내에서 생성된 변수를 지역변수라 한다. 이는 변수가 선언된 함수 내에서만 작동한다. 이 함수 밖에서 b를 호출하면 정의되지 않았다고 뜬다. 즉 생명주기가 함수의 끝이다.

 

 * 생성자

 - 생성자(constructor)은 함수로써 비슷한 구조의 객체들을 만들어 내는 것을 말한다. 이를 이용하면 위에서 언급했던 전역변수를 최대한 안쓰는 것에 근접할 수 있다.

function Person(username, grade) {
    this.username = username;
    this.grade = grade;
    this.introduce = function () {
        console.log(this.username + '의 점수는 ' + this.grade + '입니다.');
    }
 }

var p1 = new Person('harry', 80);
var p2 = new Person('iu', 98);
var p3 = new Person('suzy', 95);

p1.introduce();
p2.introduce();
p3.introduce();

//harry의 점수는 80입니다.
//iu의 점수는 98입니다.
//suzy의 점수는 95입니다.

 - 위에서 생성자는 Person이다. 참고로 생성자는 관례적으로 대문자로 시작한다. 어쨋든 생성자함수를 통해 객체를 만들어 주었다. 이름과 점수를 값으로 각각 넣고 introduce라는 함수를 객체에 넣어서 로그를 찍도록 하였다.

 

 - 이 때, 변수 p1에는 username이라는 키에 harry라는 값을 넣고 grade라는 키에 80이라는 값을 넣었다. new를 입력한 이유는 new를 입력하지 않을 경우 함수의 this는 p1이 아닌 window(최상위객체)를 인식하기 때문이다.

 

 - 마지막으로 p1.introduce를 이용하여 introduce의 값을 불러왔고, 함수이므로 ()를 입력하여 실행시켰다. 이 때 이와 같이 .~~() 와 같이 실행하는 것을 메소드라 한다. 그리고 생성된 객체 하나하나를 인스턴스라 한다.

 

 - 위를 프로토타입으로 조금 더 개선해보자.

 

function Person(username, grade) {
    this.username = username;
    this.grade = grade;
 }
 
 Person.prototype = {
    constructor : Person,
    introduce : function() {
        console.log(this.username + '의 점수는 ' + this.grade + '입니다.');
    }
}

var p1 = new Person('harry', 80);
var p2 = new Person('iu', 98);
var p3 = new Person('suzy', 95);

p1.introduce();
p2.introduce();
p3.introduce();

//harry의 점수는 80입니다.
//iu의 점수는 98입니다.
//suzy의 점수는 95입니다.

 : 결과는 위와 같다. 이는 Person에 prototype객체를 추가하여 각 인스턴스마다 같은 값이나 함수를 공유하는 것들을 묶어 메모리를 절약하게 하였다.

 

 - 주의해야 할 것은 prototype의 객체를 추가하면 기존에 기본적으로 프로토타입에서 가지고 있던 constructor가 리셋되므로 다시 객체명을 적어주어야 한다는 것이다. 그리고 객체이므로 ; (세미콜론) 이 아니라 ,(반점)으로 구분해줘야 한다.

 

 

---

 

 

 

참고

 

 

이 글은 1분코딩의 자바스크립트 기본 강의를 유튜브와 인프런에서 수강하고 개인적으로 정리하며 작성한 글입니다.

 

 

 

1분코딩

1분코딩

인프런

인터랙티브 웹 개발 제대로 시작하기 - 인프런