[javascript] ES6 최신 문법 4 _ 구조 분해 할당 Destructuring assignment & 단축 평가 Short-circuit evaluation

 

구조 분해 할당 Destructuring assignment

구조 분해 할당은 구조화된 배열과 같은 이터러블 또는 객체를 분해하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.

 

배열 구조 분해 할당

1) 우변은 반드시 이터러블이어야 한다. 할당의 기준이 인덱스가 되기 때문이다. 변수의 개수와 이터러블 요소의 개수가 가 일치할 필요는 없다.

const arr = [1, 2, 3, 4];

const [one, two, three] = arr;
console.log(arr[0], arr[1], arr[2]);  //1 2 3
console.log(one, two, three);  //1 2 3

 

2) 기본값을 넣어 사용할 수도 있다.

const point = [1, 2];
const [y, x, z = 0] = point;
console.log(x); //1
console.log(y); //2
console.log(z); //0

 

3) rest element를 사용할 수도 있다.

const [a, ...b] = [1, 2, 3];
console.log(a, b); // 1 [ 2, 3 ]

 

 

객체 구조 분해 할당

1) 우변은 반드시 객체여야 하며, 할당 기준은 프로퍼티 키이다. 키를 기준으로 할당이 이루어지기 때문에 순서는 의미가 없다.

const user = { first: "june", last: "kim" };
const { last, first } = user;

console.log(first, last);  //june kim

 

2) 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 다음과 같이 변수를 선언한다.

const user = { firstName: "june", lastName: "kim" };
const { lastName: la, firstName: fir } = user;

console.log(fir, la); //june kim

 

3) 객체를 인수로 전달받는 함수의 매개변수에 사용하면 좀 더 간단하고 가독성 좋게 표현할 수 있다.

//구조 분해 할당 사용 전
function printTodo(todo) {
	console.log(`할일 ${todo.content}은 ${todo.completed ? '완료' : '비완료'} 상태입니다.`);
}

printTodo({ content: 'JS', completed: true });

//구조 분해 할당 사용 후
function printTodo({ content, completed }) {
	console.log(`할일 ${content}은 ${completed ? '완료' : '비완료'} 상태입니다.`);
}

printTodo({ content: 'JS', completed: true });

 

 

 

단축 평가 Short-circuit evaluation

논리곱 연산자와 논리합 연산자가 논리 연산의 결과를 결정하는 피연산자를 불리언 타입으로 변환하지 않고 그대로 반환하는 것을 단축 평가라 한다. 단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 의미하기도 한다.

 

console.log("cat" && "dog"); //dog
console.log("cat" || "dog"); //cat

첫째 줄에서 cat은 true로 평가되므로 첫째 줄의 논리 연산의 결과를 결정하는 것은 두 번째 피연산자인 dog이다. 따라서 dog를 반환한다. 둘째 줄에서는 첫 번째 피연산자인 cat이 true이므로 두 번째 피연산자까지 평가할 필요가 없다. 따라서 결과를 결정하는 피연산자인 cat을 반환한다.

 

 

논리 연산식	결과	결과를 결정하는 피연산자
true || true	true	첫번째 피연산자
true || false	true	첫번째 피연산자
false || true	true	두번째 피연산자
false || false	false	두번째 피연산자
true && true	true	두번째 피연산자
true && false	false	두번째 피연산자
false && true	false	첫번째 피연산자
false && false	false	첫번째 피연산자

 

 

단축 평가를 사용하면 다음의 에러를 방지할 수 있다.

 

1) 객체를 가리키기를 기대하는 변수의 값이 객체가 아니라 null 또는 undefined인 경우

var elem = null;
var value = elem.value; // TypeError: Cannot read property 'value' of null

var elem = null;
var value = elem && elem.value; // null

elem이 null이나 undefined와 같은 falsy 값이면 elem으로 평가되고 elem이 truthy 값이면 elem.value로 평가된다.

 

2) 함수의 인수를 전달하지 않는 경우

// 단축 평가를 사용한 매개변수의 기본값 설정
function getStringLength(str) {
  str = str || '';
  return str.length;
}

getStringLength(); // 0
getStringLength('hi'); // 2

// ES6의 매개변수의 기본값 설정
function getStringLength(str = '') {
  return str.length
}

getStringLength(); // 0
getStrringLength('hi'); // 2

함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당된다. 단축 평가를 사용해 기본값을 설정하여 이로 인해 발생할 수 있는 에러를 방지할 수 있다.

 

 

+) truthy & falsy

true로 평가되는 값을 truthy, false로 평가되는 값을 falsy라고 한다.

falsy: false, null, undefined, 0, -0, "", NaN

를 제외하고 모두 truthy이다. 빈 배열[ ], 빈 객체{ }도! 

 

 

 

출처: 모던 자바스크립트 Deep Dive