Koans-10_Destructuring

Jelkov Ahn·2021년 9월 12일
0

Private

목록 보기
11/16
post-thumbnail
  • 배열 분해
    기본 변수 할당
    const[새로운 변수명, 새로운 변수명] = 배열
const array = ['i', 'love', 'you']

const [1, 2] = arr
Uncaught SyntaxError: Invalid destructuring assignment target
변수 선언이 안되는 타입은 실행이 되지 않는다.
const ['1st', '2st'] = arr
Uncaught SyntaxError: Invalid destructuring assignment target
변수 선언이 안되는 타입은 실행이 되지 않는다.

const [first, second] = array
console.log(first)//'i'
console.log(second)//'love'

array[1] = 'do not'
console.log(second)//'love'
깊은복사라 바뀌지 않는다.
const result = []
function foo([first, second]) {
  result.push(second)
  result.push(first)
}
foo(array)
console.log(result)//['love', 'i']
  • rest/spread 문법을 배열 분해에 적용할 수 있습니다
const array = ['code', 'states', 'im', 'course']
const [start, ...rest] = array
console.log(start)//'code'
console.log(rest)//["states", "im", "course"]
  • shorthand 객체의 단축문법을 익힙니다
const name = '김코딩'
const age = 28

const person = {
      name,
      age,
      level: 'Junior',
  }
 name 하고 age에 밖에 변수가 key값으로 할당된 내용이 value값으로 들어갑니다.
 console.log(person.name) ='김코딩'
  • 객체를 분해합니다
const student = { name: '박해커', major: '물리학과' }

const { name } = student
console.log(name)//'박해커'
console.log({name})//{name: "박해커"}

student.name = '김코딩'
console.log(name)//'박해커'
깊은복사라서 바뀌지 않는다.
  • rest/spread 문법을 객체 분해에 적용할 수 있습니다 #1
 const student = { name: '최초보', major: '물리학과', grade: 'A' }
 const { name, ...args } = student
 
 console.log(name)//'최초보'
 console.log(args)//{major: "물리학과", grade: "A"}
  • rest/spread 문법을 객체 분해에 적용할 수 있습니다 #2'
 const student = { name: '최초보', major: '물리학과', lesson: '양자역학', grade: 'B+' }

 function getSummary({ name, lesson: course, grade }) {
    return `${name}님은 ${grade}의 성적으로 ${course}을 수강했습니다`
  }

 console.log(getSummary(student))//`최초보님은 B+의 성적으로 양자역학을 수강했습니다`
 const student = { name: '최초보', major: '물리학과', lesson: '양자역학', grade: 'B+' }

    function getSummary({ name, lesson, grade }) {
      return `${name}님은 ${grade}의 성적으로 ${lesson}을 수강했습니다`
    }
 console.log(getSummary(student))//`최초보님은 B+의 성적으로 양자역학을 수강했습니다`
  • rest/spread 문법을 객체 분해에 적용할 수 있습니다 #3
const user = {
      name: '김코딩',
      company: {
        name: 'Code States',
        department: 'Development',
        role: {
          name: 'Software Engineer'
        }
      },
      age: 35
    }
  • changedUser는 name 변수하고 age변수가 아래에 있어서 rest 문법으로 객체 분해에서 온 user객체의 내용을 바꿉니다.
const changedUser = {
      ...user,
      name: '박해커',
      age: 20
    }
console.log(changedUser)
{
name: '박해커',
company: {
  name: 'Code States',
  department: 'Development',
  role: {
    name: 'Software Engineer'
   }
  },
age: 20
}
  • overwriteChanges는 name변수하고 age변수가 위에 있어서 만약에 user객체에 name하고 age의 키값이 없으면 새롭게 들어가지만 있으므로 아무런 영향을 주지못한다.
const overwriteChanges = {
      name: '박해커',
      age: 20,
      ...user
    }
console.log(overwriteChanges)
{ name: '김코딩',
    age: 35,  company: {
      name: 'Code States',
      department: 'Development',
      role: {
        name: 'Software Engineer'
      }
    }
   }
  • changedDepartment는 user객체를 가져온 후에 , company키의 요소에 user.company의 값들을 할당을 하였다. department가 user.company 아래에 있으므로, department의 요소가 변화된후 출력이 된다.
const changedDepartment = {
      ...user,
      company: {
        ...user.company,
        department: 'Marketing'
      }
    }
console.log(changedDepartment)
{   name: '김코딩',
      company: {
        name: 'Code States',
        department: 'Marketing',
        role: {
          name: 'Software Engineer'
        }
      },
      age: 35
    }
  • 만약에 함수가 아래와 같다면..
const changedDepartment = {
      ...user,
      company: {
        department: 'Marketing',
        ...user.company       
      }
    }
console.log(changedDepartment)
{   name: '김코딩',
      company: {
        name: 'Code States',
        department: 'Development',
        role: {
          name: 'Software Engineer'
        }
      },
      age: 35
    }

출처: 코드스테이츠

profile
끝까지 ... 가면 된다.

0개의 댓글