avatar
Published on

Javascript - Destructuring Assignment

Author
  • avatar
    Name
    yceffort

๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น

๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น์€ ๋ฐฐ์—ด์ด๋‚˜ ๊ฐ์ฒด์˜ ์†์„ฑ์„ ๋ง๊ทธ๋Œ€๋กœ ๋ถ„ํ•ดํ•˜์—ฌ, ๋ถ„ํ•ด ํ•œ ๊ฐ’์„ ๊ฐœ๋ณ„๋ณ€์ˆ˜์— ๋‹ด์„ ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ฃผ๋Š” ํ‘œํ˜„์‹์ด๋‹ค.

let a, b, rest
;[a, b] = [10, 20]
console.log(a) // 10
console.log(b) // 20

// rest ํŒจํ„ด์„ ์ด์šฉํ•˜์—ฌ ๋‚˜๋จธ์ง€๋ฅผ ๋ชจ๋‘ ํ• ๋‹น ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค.
;[a, b, ...rest] = [10, 20, 30, 40, 50]
console.log(a) // 10
console.log(b) // 20
console.log(rest) // [30, 40, 50]

// ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด ์‹์—์„œ ๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น์„ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š”, ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด ํ˜•์‹๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ { }๋กœ ํ‘œ๊ธฐํ•˜๋ฉด ๋œ๋‹ค.
;({a, b} = {a: 10, b: 20})
console.log(a) // 10
console.log(b) // 20
;({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40})
console.log(a) // 10
console.log(b) // 20
console.log(rest) // {c: 30, d: 40}

function f() {
  return [1, 2]
}

var a, b
;[a, b] = f()
console.log(a) // 1
console.log(b) // 2

// ๊ฐ’์„ ์•„๋ž˜ ์ฒ˜๋Ÿผ ๋ฌด์‹œํ•  ์ˆ˜๋„ ์žˆ๋‹ค.
function f() {
  return [1, 2, 3]
}

var [a, , b] = f()
console.log(a) // 1
console.log(b) // 3

๊ฐ์ฒด ๊ตฌ์กฐ ๋ถ„ํ•ด

var o = {p: 42, q: true}
var {p, q} = o

console.log(p) // 42
console.log(q) // true

var o = {p: 42, q: true}
var {p: foo, q: bar} = o

// p์™€ q๋Š” ๋ฌด์‹œ๋œ๋‹ค.
console.log(foo) // 42
console.log(bar) // true

var metadata = {
  title: 'Scratchpad',
  translations: [
    {
      locale: 'de',
      localization_tags: [],
      last_edit: '2014-04-14T08:43:37',
      url: '/de/docs/Tools/Scratchpad',
      title: 'JavaScript-Umgebung',
    },
  ],
  url: '/en-US/docs/Tools/Scratchpad',
}

var {
  title: englishTitle,
  translations: [{title: localeTitle}],
} = metadata

console.log(englishTitle) // "Scratchpad"
console.log(localeTitle) // "JavaScript-Umgebung"

var people = [
  {
    name: 'Mike Smith',
    family: {
      mother: 'Jane Smith',
      father: 'Harry Smith',
      sister: 'Samantha Smith',
    },
    age: 35,
  },
  {
    name: 'Tom Jones',
    family: {
      mother: 'Norah Jones',
      father: 'Richard Jones',
      brother: 'Howard Jones',
    },
    age: 25,
  },
]

for (var {
  name: n,
  family: {father: f},
} of people) {
  console.log('Name: ' + n + ', Father: ' + f)
}

function userId({id}) {
  return id
}

function whois({displayName: displayName, fullName: {firstName: name}}) {
  console.log(displayName + ' is ' + name)
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

var user = {
  id: 42,
  displayName: 'jdoe',
  fullName: {
    firstName: 'John',
    lastName: 'Doe',
  },
}

console.log('userId: ' + userId(user)) // "userId: 42"
whois(user) // "jdoe is John"

let key = 'z'
let {[key]: foo} = {z: 'bar'}

console.log(foo) // "bar"
{
  innerHeight
} // {innerHeight: 441}
{
  innerHeight
} // 441

์—ฌ๊ธฐ์—์„œ //๋Š” ์ „์—ญ๊ฐ์ฒด window์ผ ๊ฒƒ์ด๋‹ค.

๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด ํ‘œ๊ธฐ๋ฒ•๊ณผ JSON์˜ ์ฐจ์ด

  • JSON์€ "key": value ๊ตฌ๋ฌธ๋งŒ ํ—ˆ์šฉํ•œ๋‹ค. key๊ฐ’์€ ํฐ ๋”ฐ์˜ดํ‘œ๋กœ ๋ฌถ์—ฌ ์žˆ์–ด์•ผํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ฐ’์€ ๋‹จ์ถ•(๋ช…)์ผ ์ˆ˜๋Š” ์—†๋‹ค.
  • JSON์—์„œ ๊ฐ’์€ ๋ฌธ์ž์—ด, ์ˆซ์ž, ๋ฐฐ์—ด, true, false, null๋˜๋Š” ๋‹ค๋ฅธ JSON๊ฐ์ฒด๋งŒ ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ํ•จ์ˆ˜๋Š” JSON๊ฐ’์—์„œ ํ• ๋‹น๋  ์ˆ˜ ์—†๋‹ค.
  • Date ๊ฐ์ฒด๋Š” JSON.parse()๋ฅผ ๊ฑฐ์น˜๊ณ  ๋‚˜๋ฉด ๋ฌธ์ž์—ด์ด ๋œ๋‹ค.