1-1. 변수(variable)

JavaScript의 3가지 변수

- 변수는 무언가를 담을 수 있는 용기

- 값의 추가, 변경, 삭제가 용이하다

 

 

▷변수 선언

자바스크립트에서는 3가지 변수 선언이 가능하다.

 

1. var - 변수를 선언, 동시에 값을 초기화

2. let - 블록 범위(block-scope) 지역 변수를 선언, 동시에 값을 초기화

3. const - 블록 범위 읽기 전용 상수를 선언

  -----> 블록 범위(block-scope)란 코드를 묶는 가장 기본적인 문법, 중괄호 {  } 에 의해 범위가 결정 

 

▷변수 할당

- `var` 혹은 `let` 문을 사용해 선언된 변수는 undefined 값을 갖는다.

- undefined 값은 boolean 문맥에서는 false로 동작

                           수치 문맥에서는 NaN으로 변환

- null 값은 boolean 문맥에서는 false로 동작

                 수치 문맥에서는 0으로 변환

var a;
console.log("a 값은 " + a); // "a 값은 undefined"로 로그가 남음.

console.log('b 값은 ' + b); // b 값은 undefined
var b;

console.log("c 값은 " + c); // ReferenceError 예외 던짐

let x;
console.log('x 값은 ' + x); // x 값은 undefined

console.oog('y 값은 ' + y); // ReferenceError 예외 던짐
let y;

 

▷변수 범위

- 전역 변수 : 어떤 함수 외부에 사용되어 문서 내 다른 코드에서 사용 가능

var x = 5; //전역변수로 사용되어 모든 함수에서 사용 가능

if (true) {
	console.log(x); //5
    }

- 지역 변수 : 어떤 함수 내부에 사용되어 오직 그 함수 내에서만 사용 가능

if (true) {
	let y = 5; // if 문 내부의 지역변수로 사용
    }
    console.log(y); // y = undefined

 

▷변수 호이스팅(hoisting)

- 나중에 선언된 변수를 참조할 수 있다는 것

- JavaScript의 변수가 "끌어올려지거나" 함수나 문의 최상단으로 올려지는 것을 말함

- 끌어올려진 변수라도 undefined 값을 반환

/* Example 1 */
console.log(x === undefined); // logs "true"
var x = 3; 

/* Example 2 */
var myvar = "my value";

(function() {
  console.log(myvar); // undefined 값을 반환함
  var myvar = "local value";
})();

 

▷함수 호이스팅(hoisting)

- 함수에서는 단지 함수 선언만 상단으로 끌어올려지고 함수 표현식은 그렇지 않다

/* 함수 선언 */

foo(); // "bar"

function foo() {
  console.log('bar');
}


/* 함수 표현식 */

baz(); // TypeError: baz is not a function

var baz = function() {
  console.log('bar2');
};

 

참고문헌

· 정동진, 최주호, 윤성훈 (2019). JSPStudy의 JSP & Servlet 2판.

· MDN Grammar and types (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types)