TypeScript Deep Dive
  • README
  • 시작하기
    • 왜 타입스크립트인가
  • 자바스크립트
    • 비교 연산자
    • 참조 연산자
    • Null vs. Undefined
    • this
    • 클로저
    • Number
    • Truthy
  • 미래의 자바스크립트
    • 클래스
      • 즉시실행함수
    • 화살표 함수
    • 나머지 연산자
    • let
    • const
    • 비구조화 할당
    • 전개 연산자
    • for...of
    • 이터레이터
    • 템플릿 리터럴
    • 프로미스
    • 제네레이터
    • Async Await
  • 프로젝트
    • 컴파일러 제어
      • tsconfig.json
      • 파일 경로 지정
    • 선언
    • 모듈화
      • 파일을 이용한 모듈화
      • globals.d.ts
    • 네임스페이스
    • 동적 표현식 가져오기
  • Node.js 시작하기
  • Browser 시작하기
  • 타입스크립트 타입 시스템
    • 자바스크립트 마이그레이션 가이드
    • @types
    • 주변 선언
      • 파일 선언
      • 변수
    • 인터페이스
    • 열거형(Enums)
    • lib.d.ts
    • 함수
    • 콜러블(Callable)
    • 타입 표명(Type Assertion)
    • 신선도(Freshness)
    • 타입 가드
    • 리터럴(Literal)
    • 읽기 전용(readonly)
    • 제네릭
    • 타입 인터페이스
    • 타입 호환성
    • Never 타입
    • 구별된 유니온
    • 인덱스 서명(Index Signature)
    • 타입 이동하기
    • 예외 처리
    • 믹스인(Mixin)
  • JSX
    • React
    • Non React JSX
  • Options
    • noImplicitAny
    • strictNullChecks
  • 타입스크립트 에러
    • 에러 메세지
    • 공통 에러
  • NPM
  • 테스트
    • Jest
    • Cypress
  • Tools
    • Prettier
    • Husky
    • ESLint
    • Changelog
  • 팁
    • 문자열 Enums
    • 타입 단언
    • 상태 저장 함수
    • 커링
    • 제네릭 타입 예시
    • 객체 타입 설정
    • 유용한 클래스
    • Import / Export
    • 속성 Setters
    • outFile 주의사항
    • 제이쿼리 팁
    • 정적 생성자
    • 싱글톤 패턴
    • 함수 파라미터
    • 토글 생성
    • Import 여러개 하기
    • 배열 생성
    • 생성자에서 타입정의
  • 스타일 가이드
  • 타입스크립트 컴파일러 구조
    • Program
    • AST
      • TIP: Visit Children
      • TIP: SyntaxKind enum
      • Trivia
    • Scanner
    • Parser
      • Parser Functions
    • Binder
      • Binder Functions
      • Binder Declarations
      • Binder Container
      • Binder SymbolTable
      • Binder Error Reporting
    • Checker
      • Checker Diagnostics
      • Checker Error Reporting
    • Emitter
      • Emitter Functions
      • Emitter SourceMaps
    • Contributing
Powered by GitBook
On this page
  • Object Destructuring
  • Object Destructuring with rest
  • Array Destructuring
  • Array Destructuring with rest
  • Array Destructuring with ignores
  • JS Generation
  • Summary

Was this helpful?

  1. 미래의 자바스크립트

비구조화 할당

타입스크립트는 비구조화를 지원합니다. (문자 그대로 구조화되지않은 구조의 이름을 따서 명명됨 즉 구조를 분할함)

  1. 객체 비구조화

  2. 배열 비구조화

다음은 자바스크립트에서 객체 리터럴에 해당합니다. 비구조화를 하는 쉬운 방법이 있습니다.

var foo = {
    bar: {
        bas: 123
    }
}

자바스크립트는 내장된 멋진 구조적 지원없이 새로운 객체를 생성하기 매우 성가신 일입니다. 비구조화는 구조에서 데이터를 가져오는 것 같은 편의성을 제공합니다.

Object Destructuring

비구조화는 매우 유용합니다. 왜냐하면 그것을 사용하면 한줄로 사용할 수 있지만 그렇지 않으면 여러줄이 필요하기 때문입니다.

var rect = { x: 0, y: 10, width: 15, height: 20 }

// Destructuring assignment
var { x, y, width, height } = rect
console.log(x, y, width, height) // 0,10,15,20

rect.x = 10
;({ x, y, width, height } = rect) // assign to existing variables using outer parentheses
console.log(x, y, width, height) // 10,10,15,20

여기서 비구조화가 없다면 x,y,width,height는 rect에서 하나씩 꺼내서 사용해야 합니다.

변수에서 추출해서 새로운 변수에 할당해야 합니다.

// structure
const obj = { 'some property': 'some value' }

// destructure
const { 'some property': someProperty } = obj
console.log(someProperty === 'some value') // true

당신은 깊은 데이터의 구조를 비구조화로 사용할 수 있습니다. 아래에 샘플이 있습니다.

var foo = { bar: { bas: 123 } }
var {
    bar: { bas }
} = foo // Effectively `var bas = foo.bar.bas;`

Object Destructuring with rest

당신은 어떤 숫자 혹은 엘리먼트 객체를 객체에 비구조화 할당을 하고 나머지를 할당할 수 있습니다.

var { w, x, ...remaining } = { w: 1, x: 2, y: 3, z: 4 }
console.log(w, x, remaining) // 1, 2, {y:3,z:4}

확실한 경우에 다음의 요소를 사용할 수 있습니다. 예제가 있습니다.

// Example function
function goto(point2D: { x: number; y: number }) {
    // Imagine some code that might break
    // if you pass in an object
    // with more items than desired
}
// Some point you get from somewhere
const point3D = { x: 1, y: 2, z: 3 }
/** A nifty use of rest to remove extra properties */
const { z, ...point2D } = point3D
goto(point2D)

Array Destructuring

개발할때 흔히 하는 질문으로 "두개의 변수를 세번째 변수를 이용해서 스왑하려면?" 다음은 타입스크립트에서 해결책입니다.

var x = 1,
    y = 2
;[x, y] = [y, x]
console.log(x, y) // 2,1

배열의 비구조화는 사실상 컴파일러가 [0], [1], ... 등을 하는 것과 같습니다. 물론 이러한 값이 존재한다는 보장을 하지 않습니다.

Array Destructuring with rest

당신은 숫자 혹은 엘리먼트로부터 배열을 가져올 수 있고 비구조화 할당과 나머지 할당을 할 수 있습니다.

var [x, y, ...remaining] = [1, 2, 3, 4]
console.log(x, y, remaining) // 1, 2, [3,4]

Array Destructuring with ignores

당신은 배열을 비구조화할때 반환하지 않을 데이터는 , , 을 사용해야 합니다. 아래에 예제가 있습니다.

var [x, , ...remaining] = [1, 2, 3, 4]
console.log(x, remaining) // 1, [3,4]

JS Generation

ES6가 아닌 일반적인 자바스크립트에서는 비구조화를 지원하지 않기 때문에 임시 변수를 만들어서 스스로 해결해야 합니다.

var x = 1,
    y = 2
;[x, y] = [y, x]
console.log(x, y) // 2,1

// becomes //

var x = 1,
    y = 2
;(_a = [y, x]), (x = _a[0]), (y = _a[1])
console.log(x, y)
var _a

Summary

비구조화는 당신의 코드를 더 읽기 쉽게 합니다. 라인수를 줄이고 의도를 명확하게 함으로써 유지보수를 쉽게 하도록 합니다. 배열을 비구조화 할때 튜플인것처럼 사용해야 합니다.

PreviousconstNext전개 연산자

Last updated 5 years ago

Was this helpful?