티스토리 뷰

안녕하세요

 

 

이번 포스팅에서는  ES6 에 추가된 전개 구문(Spread syntax, ...)을

활용하는 트릭을 몇 가지 소개하려고 합니다!

 

구글링을 해보면 꽤 많은 트릭과 활용 방법들이 있는데,

그 중 간단하면서 자주 사용할 수 있는 내용으로 구성해보았습니다.

 

 

그럼 시작합니다!

 


[1] Rest parameter

나머지 파라미터

 

 

Rest parameter는 전개 구문에 해당하는 내용은 아니지만 한 배에서 탄생한 친구 중 하나이므로 같이 소해하려고 합니다.

(심지어 ... 까지 비슷하다!)

 

Rest parameter는 아마 다들 많이 접해보셨을겁니다.

함수의 매개변수 갯수가 정해져있지 않을 때 자주 사용하는 문법입니다.

 

 

 

 

위와 같이 정해지지 않은 갯수의 매개변수를 받는 함수를 전개 구문(...)으로 구현할 수 있습니다.

 

Rest 파라미터는 arguments와 다르게 유사 배열이 아닌 자바스크립트 표준 배열로 대체되고,

마지막 파라미터만 Rest 파라미터가 될 수 있습니다.

 

 

const f = (a, ...b, c) => {
  // Error
}

마지막 파라미터만 Rest 파라미터가 될 수 있기 때문에 위의 코드는 오류가 발생합니다.

 

 

 


[2] Immutable data pattern

불변 데이터 패턴

 

 

자바스크립트의 경우 원시 타입(Primitive type)은 모두 불변 값(immutable value) 입니다.

원시 타입 외의 값들은 모두 변경 가능한 값을 가지게 됩니다. (mutable value)

 

간단한 예제로 의미를 파악해봅시다.

var myStr = 'Hello'
myStr = 'World'

문자열 타입은 자바스크립트의 원시 타입 중 하나입니다.

 

myStr 변수는 Hello라는 문자열 리터럴을 참조하고 있었고, 그 아래에서 World라는 문자열을 참조하도록 되어있습니다.

Hello라는 문자열이 World로 바뀐것이 아니라 참조하던 대상이 변경된 것 입니다.

 

메모리상에서 Hello라는 문자열 데이터와 World라는 문자열 데이터가 각각 생성이 된 상태입니다.

 

var obj = {
  name: 'Tom'
}

var objClone = obj
objClone.name = 'Jerry'

원시 타입이 아닌 다른 객체들은 값을 변경할 수 있습니다.

 

위 코드를 확인해보면 obj라는 객체의 name 프로퍼티가 존재합니다.

objClone.name = 'Jerry'라는 코드가 평가되면 객체는 mutable value이므로 objClone의 name 값이 변경됩니다.

 

한 가지 문제점이 있다면 기존의 obj의 name도 함께 변경되는 문제가 있습니다.

같은 객체를 obj, objClone이 함께 참조하고 있기 때문에 위의 코드가 의도한 동작이 아니라면 이후 골치아픈 문제가 생길 수 있습니다.

 

이 때문에 immutable 객체가 필요한 경우 Object.freeze, Object.assign 등을 통해

객체 참조 문제를 해결하기도 했습니다.

 

그 외에 전개 구문을 활용하여 참조하고 있던 객체에 대한 Immutable 객체를 생성할 수 있습니다.

 

 

 

 

위 방식은 a가 참조하고 있는 객체를 얕은 복사하여 c에 할당합니다.

만약 a가 참조하고 있는 객체 내부에서 원시값이 아닌 다른 객체(Nested object)가 있다면,

해당 객체의 참조는 그대로 유지되기 때문에 얕은 복사입니다.

 

객체 내에서 참조하고 있는 객체 까지 모두 복사를 하려면 깊은 복사 방식을 사용해야 합니다.

 

아래와 같은 상황을 예로 들자면, 좋아하는 것에 대한 정보 객체를 person이 가지고 있었습니다.

person을 복사하여 otherPerson에 새로운 객체를 할당했습니다.

 

하지만 복사하여 생성한 새로운 객체인 otherPerson의 favorite은

기존의 person이 가지고 있던 faroviteThing 객체를 그대로 참조하고 있습니다.

 

이처럼 중첩된 상태의 객체를 모두 복사하려면 깊은 복사를 수행해야합니다.

메모리 상에는 person, otherPerson, favoriteThing 3가지 객체가 존재하는 것이죠

 

사람만 복제되어 두개의 객체가 되었을 뿐 좋아하는 것은 하나를 서로 참조하고 있습니다.

var favoriteThing = {
  type: 'Animal',
  name: 'Cat'
}

var person = {
  name: 'Tom',
  favorite: favoriteThing
}

var otherPerson = { ...person }

// true
console.log(person.favorite === otherPerson.favorite)

 

깊은 복사 방법도 여러가지가 있으니 따로 찾아보시는것을 추천합니다.

 


[3] Optional spreading

선택적 전개

 

 

선택적 전개는 먼저 코드를 확인하고 진행하도록 하겠습니다!

 

 

 

available 변수는 조건이라고 가정한 상황입니다.

obj가 참조하는 객체에는 user, age 프로퍼티가 고정적으로 존재하며,

key 프로퍼티는 available 값에 따라 "선택적" 입니다.

더 정확히 말하자면 key 프로퍼티를 선택적으로 전개할 수 있도록 의도한 코드라고 정리할 수 있습니다.

 

a && b 연산은 a가 truety value일 때 b의 값을 반환합니다.

a || b는 반대로 a가 falsy value일 때 b의 값을 반환합니다.

(단순 AND, OR 논리연산자가 맞지만 실제 어떤값이 반환되는지 처음 알았다면 조금 생소하실 수 있습니다)

 

truety, falsy 값은 true 또는 false로 평가되는 값을 의미하며 대표적으로

 

1, '비어있지 않은 문자열', { k: 1 }, [1, 2, 3], {}, []

0, '', NaN, undefined, null

 

가 있습니다.

(falsy 값을 제외한 모든 값은 truety 값으로 봐도 무방합니다)

 

 

본론으로 넘어오자면 available 변수의 값이 truety 값인 경우 AND 연산을 하는 대상인 { key: '값' }가 반환됩니다.

이후 전개 구문(...) 부분이 평가되기 때문에 ...{ key: '값' }이 됩니다.

 

반대로 available 변수의 값이 falsy값인 경우 false가 반환되며 false에는

프로퍼티가 존재하지 않기 때문에 obj에는 아무런 영향을 주지 않습니다.

 

 


 

총 3가지의 활용 방법을 확인해보았는데요~ 이해가 잘 안되거나 수정이 필요한 부분이 있다면 언제든지 말씀해주세요!

 

다음번에도 다양한 활용 팁에 대해 작성하도록 하겠습니다!

 

 

 

감사합니다.

댓글
댓글쓰기 폼