javaScript - 호이스팅부터 리터럴까지

javaScript - 호이스팅부터 리터럴까지 

호이스팅

hoist : 끌어(들어)올리다.(hoise의 과거)

JavaScript 변수(var)의 특이한 점은 나중에 선언된 변수를 참조할 수 있다는 것입니다.

이 개념을 호이스팅(hoisting)이라고 합니다. 

즉 JavaScript 변수가 어떤 의미에서 끌어올려지거나 함수나 문의 최상단으로 올려지는 것을 말합니다.

하지만, 끌어올려진 변수는 undefined 값을 반환합니다. 참조한 후에 선언 및 초기화하더라도

똑같이 undefined를 반환합니다.

// ex1
console.log(x === undefined); // true
var x = 3;
 
// ex2
var myvar = "my value";
 
(function() {
    console.log(myvar); //undefined
    myvar = "loval value";
}
                                                                                                               
 

그러므로 var문은 가능한 함수 상단 근처에 두는 것이 좋습니다.

그 이유는 코드를 명확하게 만들어주기 때문입니다.

----------------------------------

함수 범위

 - function문 : var

 - block문 : let, const[ES6]

전역 변수

전역 변수는 global객체의 속성(property)입니다. 웹 페이지에서 global 객체는 window입니다.

----------------------------------

리터럴(literal)

위키에서 리터럴이란, '소스 코드의 고정된 값을 대표하는 용어다'라고 하는데 이해가 가지 않는다....

그래서 다른 개념도 찾아봤습니다..

JavaScript에서 값을 나타내기 위해 리터럴(literal)을 사용합니다.

스크립트에 부여한 고정값으로, 변수가 아닙니다.

리터럴은 '보이는것 자체로 알아들을 수 있는 값' 이라고 생각하시면 좋을것 같습니다.

• 문자열(String) 리터럴

• 숫자열(Nuber) 리터럴

• 불린(Boolean) 리터럴

• 배열(Array) 리터럴
  

• 객체(Object) 리터럴

• Null

• Undefined

• function

• 정규식(RegExp ) 리터럴

// literal
 
var a = "2";                    // String : 2
var b = 2;                      // Number : 2
var c = true;                   // Boolean : true
var d = [1, 2, 3, 'h'];         // Array : 1, 2, 3, 'h'
var e = {h : 1, y : ‘2’ };      // Object : h[1], y['2']
var f = null;                   // Null : null
var g = undefined;              // Undefined : undefined
var h = function(){return 2+3}  // Function : 5 
var i = /ab+c/;                 // RegExp : /ab+c/
                                                                                                              
 

----------------------------------

Arguments와 Parameter

Arguments : 함수를 호출할 때 전달하는 값(인자 값)

Parameter : 함수를 선언할 때 변수의 이름

function agu(x, y) {
    var sum = 0;
    for(var i = 0; i<arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}
    
sumOf(1);    // 1
sumOf(1, 5); // 6
                                                                                                             
 

----------------------------------

스코프(Scope)

Scope란, 변수에 접근할 수 있는 유효범위를 말합니다.

자세한건 Scope URL을 눌러 확인해주세요.

자바스크립트 ES6부터는 함수 레벨과 블록 레벨의 렉시컬 스코프 규칙을 따릅니다.

스코프 레벨

 - function문 : var

 - block문 : let, const[ES6]

Scope & Closure URL : 

----------------------

클로저(Closure)

클로저는 렉시컬(Lexical) 스코프를 참조하고 있는데 그렇다고 모든 함수를 클로저라고 하지 않는다.

var color = 'red';
 
function foo() {
    var color = 'blue';
    
    function bar() {
        console.log(color);
    }
    
    return bar;
}
 
var baz = foo();
baz();                      // blue
                                                                                                                
 

.