[1분코딩] 자바스크립트 기초 - 변수

 

1분 코딩 자바스크립트 기초 강의 Part 2 정리

 

 

[변수]

 

1) 변수의 유효범위(Scope)

1-1) 전역변수

→ 모든 범위에서 사용 가능한 변수

→ 연결되어있는 다른 파일에서도 접근가능

var a = 100; //전역변수

console.log(a); //콘솔창에 100이 출력됨

function sample(){
console.log('sample함수에서 출력한' + a); //콘솔창에 결과값 출력됨
}

sample(); // 함수 실행

<script src="other.js"></script> //other파일에서도 a 변수에 접근 가능

1-2) 지역변수 

→ 변수가 선언된 함수 안에서만 사용 가능 

→ 변수가 선언된 함수가 종료되면 변수도 같이 사라짐 

function sample2(){
var b = 200; //지역변수
console.log('sample함수에서 출력한' + b); //콘솔창에 결과값 출력됨
}

sample(); // 함수 실행

console.log(b); //지역변수는 선언된 함수 내부에서만 사용 가능하므로 
                //콘솔창에 정의되지 않았다는 에러가 뜸

 

1-3) 같은 이름의 변수 : 지역변수와 전역변수의 이름이 같을 경우

→ 콘솔창에 출력하라고 명령한 곳으로부터 가장 가까운 변수에 적용됨

→ 함수를 방이라고 생각했을 때 방 안에서 a를 찾으면 가장 가까운 곳에 있는 a가 먼저 대답하고

만일 방 안에 a가 없을 경우에는 밖에서 응답한다고 생각하면 됨 그런 개념임

→ 따라서 예제에서는 sample3 안에 있는 콘솔출력 명령은 sample3 안에 있는 지역변수를 적용시킴

var a = 100; //전역변수

function sample3(){
var a = 'sample3 내부의 변수 a'; //지역변수
var b = 200; //지역변수

console.log(a); // 콘솔창에 sample3 내부의 변수 a 라고 출력됨
}

sample3();

 

1-4) 함수 안에 함수의 변수 유효 범효범위

→ 지역변수는 무조건 다른 함수에서 접근을 못하는 것이 아니라 같은 함수 안에 있으면 사용가능함

//sample3 함수 안에 있는 지역변수 a를 
//sample3 함수 안에 있는 sample4함수가 사용하는 경우

function sample3(){
var a = 'sample3 내부의 변수 a'; //지역변수
var b = 200; //지역변수

console.log(a); // 콘솔창에 sample3 내부의 변수 a 라고 출력됨

function sample4(){
console.log(b); // 콘솔창에 200 출력됨
}

sample4(); //함수실행

}

sample3(); //함수실행

 

//sample4 함수 안에 있는 지역변수 c를 
//sample3 함수에서 사용하는 경우

function sample3(){

function sample4(){
var c = 500;
}

console.log(c); // 콘솔창에 출력되지 않음 
                // 변수 c는 함수 sample4의 지역변수이므로 함수 밖을 벗어난 호출은 불가   

sample4(); //함수실행

}

sample3(); //함수실행

 

1-5) 사용 예시

→ 전역변수

: 선택지 5가지 중에서 하나를 선택한 사항을 저장한 후에 어딘가에 다시 사용하거나 공유하고 싶을때

: 전역변수는 많이 쓰는 게 좋지 않음 개발자들끼리 같은 이름의 전역변수가 충돌이 될 수 있음

: 전역변수를 최소화 

 

→ 지역변수 : 어떤 기능(함수)을 사용할때만 변수를 쓰고 다시 사용하지 않을때

 

2) 변수의 종류

→ 변수의 종류에 따라 변수유효범위가 달라짐

→ ES5까지 사용했던 var은 상단에 있는 설명과 같이 함수만 기준으로 함

→ ES6 버전에서 사용하는 let이나 const 같은 경우 중괄호 블럭을 기준으로 함(예를 들면 if문 같은 거)