let-const-rest-parameter-spread-operator-destructuring

let

  • μž¬μ„ μ–Έ ν•  수 μ—†λ‹€.

  • block μŠ€μ½”ν”„

  • λ˜‘κ°™μ€ λͺ…μœΌλ‘œ μ •μ˜ν•  수 μ—†λ‹€.

  • window에 뢙지 μ•ŠλŠ”λ‹€.

Quiz

for (var i = 1; i < 11 i++) {
    setTimeout(function () {
        console.log(i);
    }, i * 1000);
}
for (let i = 1; i < 11 i++) {
    setTimeout(function () {
        console.log(i);
    }, i * 1000);
}

Example

{
    let jason = {
        codename: 'blackbriar',
        kill: function (target) {
            target = null;
        }
    };
    let operator = {
        codename: 'onion',
        answer: function () {
            alert('run away!');
        }
    };
    jason.kill(operator);
}
console.log(jason.codename);
console.log(operator.codename);

quiz

let jason = {
    codename: 'blackbriar',
    kill: function (target) {
        target = null;
    }
};
let operator = {
    codename: 'onion',
    answer: function () {
        alert('run away!');
    }
};
jason.kill(operator);
console.log(jason.codename);

풀이

let jason = {
    codename: 'blackbriar',
    kill: function (target) {
        var target = operator; //참쑰값이 λ“€μ–΄κ°”λ‹€κ³  생각할 수 μžˆλ‹€. μœ„μΉ˜κ°’
        target = null; //operatorλŠ” 아무 영ν–₯을 받지 μ•ŠλŠ”λ‹€.
        //λ§€κ°œλ³€μˆ˜λ‘œ μ£½μ΄λŠ”κ±΄ λΆˆκ°€λŠ₯ν•˜λ‹€.
        //직접 죽이고 μ‹Άλ‹€λ©΄
        //operator = null; 둜 ν•΄μ•Ό 죽일 수 μžˆλ‹€.
        //target.codename = null 은 κ°€λŠ₯ν•˜λ‹€.'ㅁ'/ 
    }
};
let operator = {
    codename: 'onion',
    answer: function () {
        alert('run away!');
    }
};
jason.kill(operator);
console.log(jason.codename);

window에 뢙지 μ•ŠλŠ”λ‹€

var x = 'global';
let y = 'global';

console.log(window.x); //'global'
console.log(window.y); //undefined

why? windowκ°€ 객체인데.. μ—†λŠ” μ†μ„±ν•œν…Œ μ ‘κ·Όν•˜λ €κ³  ν•΄μ„œμ΄λ‹€.

function doSomething() {
    console.log(bar); // undefined
    console.log(foo); // ReferenceError - 
    var bar = 1;
    let foo = 2;
}

doSomething();

더 μ—„κ²©ν•΄μ‘Œλ‹€.

VM307:3 Uncaught ReferenceError: Cannot access 'foo' before initialization

λΌλŠ” μ—λŸ¬λ₯Ό λ„μš΄λ‹€. 'ㅁ' hoisting이 μ•„μ˜ˆ μ•ˆλλ‹€κ³€ ν•  수 μ—†μœΌλ‹ˆ 더 μ—„κ²©ν•΄μ Έμ„œ errorλ₯Ό λ„μš΄λ‹€.

TDZ

Temporal dead zone(MDN) μ°Έμ‘°

hoisting이 μΌμ–΄λ‚˜μ§€λ§Œ varμ™€λŠ” λ‹€λ₯΄κ²Œ varλŠ” undefined둜 μ΄ˆκΈ°ν™”κ°€ λ˜λŠ”κ±°μ§€λ§Œ, let은 μ΄ˆκΈ°ν™”κ°€ μ•ˆλ˜λŠ”κ±°λ‹€.

const

  • constant μƒμˆ˜(λ³€ν•˜μ§€ μ•ŠλŠ” 수)μ—μ„œ 온 이름이닀.

  • μž¬μ„ μ–Έ ν•  수 μ—†λ‹€.

  • μž¬ν• λ‹Ή ν•  수 μ—†λ‹€.

Example

const obj = {
  arr: [1, 2, 3]  
};

obj = []; 
obj.arr = null; //μ•ˆμ— λ‚΄μš©λ§Œ λ°”κΎΈλŠ”κ±°λŠ” 상관없닀.
obj.arr.length = 0 //?
obj.arr.push(1); //?

rest parameter

λ‚˜λ¨Έμ§€ λ§€κ°œλ³€μˆ˜

λ°°μ—΄λ‘œ λ§Œλ“€μ–΄ μ€€λ‹€.

function foo (a,b, ...c) {
    console.log(c); // ['2', '3', '4', '5']
    console.log(Array.isArray(c)); // true
}

foo('0', '1', '2', '3', '4', '5');

"arguments" is different

function foo2 (a, b, ...c) {
    console.log(arguments); // Arguments [1, 2, 3, 4, 5]
    console.log(Array.isArray(arguments)); //μœ μ‚¬λ°°μ—΄ false
}

foo2(1, 2, 3, 4, 5);

spread operator

  • λ³€μˆ˜μ˜ κ°’μœΌλ‘œ μ‚¬μš©λ  수 μžˆλ‹€.

  • μΈμžμ— μ‚¬μš© 될 수 μžˆλ‹€.

  • λ°°μ—΄κ³Ό 객체의 [], {} λͺ¨μ–‘을 λ²—κΈΈ 수 μžˆλ‹€.

Example

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];

var total = [...arr1, ...arr2];

console.log(total); // [1, 2, 3, 4, 5, 6]

restλž‘ λ˜‘κ°™μ΄ μƒκ²ΌλŠ”λ° restλŠ” ν•¨μˆ˜μ—μ„œ λ§ˆμ§€λ§‰ λ§€κ°œλ³€μˆ˜μ—μ„œλ§Œ μ‚¬μš©λœλ‹€.

Example

function foo (a, b, c) {
    return a + b + c;
}

foo(...[1, 2, 3]); //6

Example

var agentA = {
    codeName: 'oi',
    powerLevel: -999
};

var agentAA = {
    ...agentA,
    category: 'chaeso'
};

console.log(agentAA); //{codeName: 'oi', powerLevel: -999, category: 'chaeso'}

destructuring

  • λ°°μ—΄κ³Ό 객체 λΏŒμ…”..

  • ν‚€λŠ” λ³€μˆ˜λͺ… μ„ μ–Έ μžλ¦¬μ™€ λ§€κ°œλ³€μˆ˜ μžλ¦¬μ— μ“Έ 수 μžˆλ‹€.

  • λ³€μˆ˜λͺ…은 λ³€μˆ˜μ˜ κ°’ μžλ¦¬μ™€ 인자 μžλ¦¬μ— μ“Έ 수 μžˆλ‹€.

  • λ°°μ—΄μ˜ μš”μ†Œμ™€ 객체의 킀값을 ν‚€ 이름(λ˜λŠ” μƒˆλ‘œμš΄)의 λ³€μˆ˜λ‘œ λ§Œλ“€ 수 μžˆλ‹€.

Example

var address = {
    city: 'new york',
    state: 'NY',
    zipcode: '10003'
};

var { city, state } = address;
//였λ₯Έμͺ½μ— μžˆλŠ” address 객체λ₯Ό νŒŒκ΄΄ν•œλ‹€ 'ㅁ'/
//var city = address.city;
//var state = address.city; κ°€ λœλ‹€κ³  보면 λœλ‹€.

console.log(city + ', '+ state);

객체 λΏŒμ‹œκΈ°

  1. μ™Όμͺ½μ— 객체 λͺ¨μ–‘을 λ§Œλ“ λ‹€ {}

  2. μ•ˆμ—λŠ” 속성 값을 써쀀닀.

  3. 였λ₯Έμͺ½μ—” 객체 λ³€μˆ˜λͺ…을 써쀀닀.

key말고 λ‹€λ₯Έ λ³€μˆ˜ λͺ…을 μ“°κ³  싢을 λ•Œ

var address = {
    city: 'new york',
    state: 'NY',
    zipcode: '10003'
};

var { city: c, state: s } = address;
// var c = address.city;
// var s = address.state;

console.log(c + ', ' + s);

λ§€κ°œλ³€μˆ˜μ—μ„œλ„ 객체 Destructuring

var address = {
    city: 'new york',
    state: 'NY',
    zipcode: '10003'
};

function logAddress ({ city, state }) {
    console.log(city + ', ' + state);
}

logAddress(address);

λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜κ³  λ§Œλ“œλŠ”κ³³μ— Destruturing ν•˜μ˜€λ‹€. -> λ§€κ°œλ³€μˆ˜

  1. ν•¨μˆ˜ μΈμžλΆ€λΆ„μ— λ³€μˆ˜λͺ…을 썼닀.

  2. λ§€κ°œλ³€μˆ˜ 뢀뢄에 {} μ“°κ³  μ•ˆμ— λΆ€μ‹œκ³ μž ν•˜λŠ” keyλ₯Ό 썼닀.

Array Destructuring

var numbers = [1, 2, 3, 4, 5];
var [ one, two, three, four, five ] = numbers;

console.log(one);
console.log(two);

Example

var numbers = [1, 2, 3, 4 ,5];

var [one, , , five ] = numbers;

console.log(one);
console.log(five);

λ§€κ°œλ³€μˆ˜μ—λ„ λ°°μ—΄ Destructuring

var numbers = [ 1, 2, 3, 4, 5];

function sum ([ a, b, c, d, e]) {
    console.log( a + b + c + d + e);
}

sum(numbers);

  1. ν•¨μˆ˜μ˜ μΈμžκ°’μœΌλ‘œ λ°°μ—΄ λ³€μˆ˜λͺ…을 μ λŠ”λ‹€.

  2. λ§€κ°œλ³€μˆ˜μ— []을 μž‘μ„±ν•˜κ³  μ•ˆμ— μ§€μ •ν•˜κ³ μž λΆ€μ‹œκ³ μž ν•˜λŠ” λ§€κ°œλ³€μˆ˜ λͺ…을 μ λŠ”λ‹€.

rest parameter + destructuring

example 1

var numbers = [ 1, 2, 3, 4, 5 ];

function sum ([ a, b, ...c ]){
    console.log(c);
}

sum(numbers); // [3, 4, 5]

example 2

const guicheokPeople = [1, 2, 3, 4 ,5 ];

function punish (...people) {
    const [ a, b, c, d, e ] = people;
    return c;
}

const result - punish(guicheokPeople);

풀이

const guicheokPeople = [1, 2, 3, 4 ,5 ];

function punish (...people) {
    //restλŠ” λ‚˜λ¨Έμ§€λ₯Ό λ°°μ—΄λ‘œ λ°˜ν™˜ν•΄μ€€λ‹€. 
    //console.log(people); // [[1, 2, 3, 4, 5]] λ°°μ—΄μ˜ λ°°μ—΄λ‘œ λ°˜ν™˜λœλ‹€.
    const [ a, b, c, d, e ] = people;
    // const [ a, b, c, d, e ] = [[1, 2, 3, 4, 5]];
    // a = [1, 2, 3, 4, 5 ];
    return c;
}

const result = punish(guicheokPeople); //undefined

μ²˜μŒμ— μ›ν–ˆλ˜ return cλ₯Ό ν–ˆμ„ λ•Œ 3을 λ„μΆœν•˜λŠ” 법

ꡬ쑰가 μΌμΉ˜ν•΄μ•Ό ν•œλ‹€

const guicheokPeople = [1, 2, 3, 4 ,5 ];

function punish (...people) {
    const [ [a, b, c, d, e] ] = people;
    return c;
}

const result = punish(guicheokPeople);
Previousspread-operator-rest-paramNexthttp

Last updated

Was this helpful?