[Java Script] 단축 속성명, 전개 연산자, 배열 비구조화, ES6 매개변수

단축 속성명

function makePerson1(age, name) {
    return {age:age, name:name}; // 1
}

function makePerson2(age, name) {
    return {age, name}; // 2
}

1은 단축 속성명을 사용하지 않았고, 2는 단축 속성명을 사용한 경우이다.

속성값 일부가 변수라면 간단하게 변수 이름만 적어주면 된다. 이때 속성명은 변수 이름과 같아진다.

=> 코드 작성과 가독성 높이기에 용이하고 디버깅을 위해 콘솔 로그를 출력할 때 유용하다.

 

function makeOdj1(key, value) {
    const obj = {};
    obj[key] = value;
    return obj;
}

function makeOdj2(key, value) {
    return {[key] : value};
}

위 코드는 계산된 속성명을 사용한 예시이다.

계산된 속성명은 코드를 조금 더 간결하게 쓸 수 있고, 컴포넌트의 상탯값을 변경할 때 유용하다.

 

전개 연산자

: 배열이나 객체의 모든 속성을 풀어놓을 때 사용한다. -> 매개변수가 많은 함수를 호출할 때 용이하다.

Math.max(1, 3, 7, 9); // 1
const numbers = [1, 3, 7, 9];
Math.max(...numbers); // 2

1번 같은 경우 네 개의 변수를 사용하면 값을 동적으로 전달되나 매개변수 개수는 항상 네 개로 고정이다.

반면 2번의 전개 연산자를 사용하면 동적으로 함수의 매개변수를 전달할 수 있다.

 

또한 전개 연산자는 배열, 객체를 복사할 때 새로운 객체가 생성되기 때문에 속성을 추가하거나 변경해도 원래 객체에 영향을 주지 않는다.

배열의 경우 전개 연산자를 사용하면 그 순서가 유지된다.

 

배열 비구조화

: 배열의 여러 속성값을 변수로 쉽게 할당할 수 있는 문법이다.

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

위처럼 배열의 속성값이 왼쪽의 변수에 순서대로 들어가고, 선언된 변수에도 할당할 수 있다.

그 외에 여러 가지로 배열 비구조화를 사용할 수 있다.

// 기본값 정의
const arr = [1];
const [a = 20, b = 20] = arr;
console.log(a); // 1
console.log(b); // 20

// 두 변수의 값 교환
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

// 쉼표를 이용해 일부 속성값 건너뛰기
const arr = [1,2,3];
const [a, , c] = arr;
console.log(a) // 1
console.log(c) // 3

// 나머지 값을 별도의 배열로 만들기
const arr = [1, 2, 3];
const [first, ...rest1] = arr;
console.log(rest1); // [2,3]
const [a, b, c, ...rest2] = arr;
console.log(rest2); // []

 

객체 비구조화는 배열 비구조화와 비슷하지만 다른 점이 있다.

1. 순서가 무의미하다.

2. 기존 속성명을 그대로 사용해야 한다. (변수 이름 임의로 결정 X)

    -> const {age : theAge} 이런 식으로 변수를 생성할 수도 있다.

 

ES6 매개변수

1. 기본값 정의

function sample(a = 10) {
    return a;
}

console.log(sample()); // 10

2. 필숫값 표현

function sample(a = required()) {
    return a;
}

console.log(sample()); // error
console.log(sample(2)); // 2

3. 나머지 매개변수

function printLog(a, ...rest) {
    console.log(a, rest);
}
printLog(1, 2, 3) // 1 [ 2, 3 ]

4. 명명된 매개변수

const numbers = [1, 2, 3, 4, 5];
const result = getValues({numbers, greaterThan : 5, lessThan : 25})

매개변수의 이름이 노출되어 가독성이 높아지고 선택적 매개변수의 활용도가 올라간다.

매개변수의 값이 undefined일 때 생략하여 사용할 수 있다.

---

리액트 책을 하나 더 샀는데, 매우 좋은 것 같다.

다른 책들은 기초, 개념이 끝이고 실무에서 쓰일 법한 문법이나 예시를 많이 안 보여주는데 이 책을 훑어보니까

그런 것들이 많은 것 같아서 신난다.