모던 자바스크립트 Deep Dive - 8

✅ 아래 내용들에 대해서 알아보자

- let 키워드 
- const 키워드
- 객체 생성
- 일급 객체

 

 

let

 1. 변수 중복 선언 금지

let 키워드는 이름이 같은 변수를 중복 선언하면 문법 에러가 발생하여 변수 중복을 방지해 준다.

//1. let은 동일한 이름의 변수를 중복 선언하면 문법 에러를 발생시켜 변수 중복을 방지해준다.
let foo=123;
let foo=456; //SyntaxError: Identifier 'foo' has already been declared

 

 

2. 블록 레벨 스코프 

let 키워드로 선언된 변수는 블록 레벨 스코프를 따른다.

/**
 * var 키워드로 선언한 변수는 오로지 함수 코드 블록만 지역 스코프로 인정하였다.
 * 하지만 let 키워드로 선언한 변수는 모든 코드 블록을 지역 스코프로 인정하는 블록 스코프를 따른다.
 */
let foo = 1;    //전역 변수

{
    let foo = 2;  //지역 변수
    let bar = 3;  //지역 변수
}

console.log(foo);   //1
console.log(bar);   //ReferenceError: bar is not defined



function test(){
    let x=1;
    if (true){
        let x=2;
        console.log(x); //2
    }
    console.log(x); //1
}

test();

 

 

3. 변수 호이스팅

let 키워드로 선언한 변수는 var 키워드와 달리 변수 호이스팅이 발생하지 않는 것처럼 보인다.

하지만 아래

console.log(f2); //ReferenceError: Cannot access 'f2' before initialization
let f2=1;

 

 

Const

const 키워드는 상수를 선언하기 위해 사용한다. 대부분의 특징은 let과 동일하다.

 

1. const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다.

//const는 선언과 동시에 초기화해야한다.
const foo;  //SyntaxError: Missing initializer in const declaration

 

 

2. const 키워드로 선언한 변수는 재할당이 금지된다.

const foo=1;
foo=2;  //TypeError: Assignment to constant variable.

 

 

3. const 키워드로 선언한 변수에 객체를 할당한 경우 값을 변경이 가능하다. const는 재할당을 금지할 뿐 불변을 의미하지 않는다.

const person={
    name:'Lee'
};

person.name='Kim';
console.log(person.name);   //Kim

 

 

var vs let vs const

• es6 사용한다면 var 키워드는 사용하지 않는다.
• 재할당이 필요할 경우 let을 사용하여 변수의 스코프를 최대한 좁게 만든다.
• const 키워드는 재할당을 금지하므로 var, let 키워드 보다 안전하다.

 

 

내부 슬롯과 내부 메서드

 JS 엔진은 객체를 생성할 때ㅡ 해당 객체에 대한 정보를 저장하기 위한 내부 데이터 구조를 만드는데 이러한 구조를 내부 슬롯과 내부 메서드라고 한다.

 

const o={};

/**
 * 내부 슬롯은 JS 엔진 내부 로직이라 접근 불가능하다.
 */
// o.[[Prototpry]];// SyntaxError: Unexpected token '['

console.log(o.__proto__);   //{} 

 

 

객체 생성

/**
 * Object 생성자 함수
 */
let person = new Object();


function Circle(radius){
    this.radius=radius;
    this.getDiameter=function (){
        return 2 * this.radius;
    };
}

const circle1 = new Circle(5);
const circle2 = new Circle(10);

console.log(circle1.getDiameter());
console.log(circle2.getDiameter());

 

 

일급 객체

 다음의 조건을 만족하는 객체를 일급 객체라고 한다.

• 무명의 리터럴로 생성할 수 있다. 즉 런타임에 생성이 가능하다
• 변수나 자료구조에 저장할 수 있다.
• 함수의 매개변수에 전달할 수 있다.
• 함수의 반환값으로 사용할 수 있다.

/**
 * 1. 함수는 무명의 리럴로 생성할 수 있다.
 * 2. 함수는 변수에 저장할 수 있다.
 * 런타임에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다.
 */
const increase = function (num) {
  return ++num;
};

const decrease = function (num) {
  return --num;
};

//함수는 객체에 저장할 수 있다
const auxs = { increase, decrease };

//3. 함수의 매개변수에 전달할 수 있다
//4. 함수의 반환값으로 사용할 수 있다
function makeCounter(aux) {
  let num = 0;

  return function () {
    num = aux(num);
    return num;
  };
}

//3. 함수는 매개변수에 함수를 전달할 수 있다
const increaser = makeCounter(auxs.increase);
console.log(increaser());
console.log(increaser());

//3. 함수는 매개변수에 함수를 전달할 수 있다
const decreaser = makeCounter(auxs.decrease);
console.log(decreaser());
console.log(decreaser());

 

함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미다. 객체는 값이므로 함수는 값과 동일하게 취급할 수 있다. 따라서 함수는 변수 할당문, 객체 프로퍼티 값, 배열의 요소, 함수 호출의 인수, 함수 반환문  어디서든지 리터럴로 정의할 수 있으며 런타임에 함수 객체로 평가된다.

 

 

arguments

 함수 객체의 호출시 전달된 인수들의 정보를 담고 있는 객체이다. 함수 내부에서만 사용가능하고 외부에서 참조는 불가능하다.

arguments 객체는 매개변수 개수를 확정할 수 없는 가변 인자 함수를 구성할 때 유용하다.

//argument 프로퍼티
function multiply(x, y) {
    console.log(arguments);
    return x * y;
}

console.log(multiply());    //NaN, [Arguments] {}
console.log(multiply(1));   //NaN, [Arguments] { '0': 1 }
console.log(multiply(1, 2)); //2, [Arguments] { '0': 1, '1': 2 }
console.log(multiply(1, 2, 3)); //2, [Arguments] { '0': 1, '1': 2, '2': 3 }

function sum(){
    let res=0;

    for(let i=0;i<arguments.length; i++){
        res += arguments[i];    //argument 객체는 매개변수를 확정할 수 없는 가변 인자 함수 구현시 유용
    }

    return res;
}

console.log(sum());
console.log(sum(1,2));
console.log(sum(3,4,5));

 

 

arguments는 배열이 아니라 유사 배역 객체이므로 배열 메서드 사용할 경우 에러가 발생한다.

따라서 Array.prototype 을 매번 사용해야 하는 번거로움 있다. 그로 인해 ES6에서 Rest 파라미터가 나오게 되었다

function sum2() {
    const array = Array.prototype.slice.call(arguments);
    return array.reduce(function (pre, cur) {
        return pre + cur;
    }, 0)
}

console.log(sum2(1, 2, 4));

//Rest 파라미터
function sum2Advanced(...args) {
    return args.reduce((pre, cur) => pre + cur, 0)
}

console.log(sum2Advanced(1, 2, 4));