구조 분해 할당과 나머지 매개변수

solsolsol·2022년 3월 27일
0

JavaScript

목록 보기
7/17
post-custom-banner

구조 분해 할당(Destructuring assignment)

MDN에 따르면 구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다. 다시 말해 이미 존재하는 변수의 값을 분해해서 다른 식의 변수에 담아준다고 생각하면 된다.

let array = [1, 2, 3]
let [apple, banana, cherry] = array

console.log(apple) // 1
console.log(banana) // 2
console.log(cherry) // 3

구조 분해 할당은 객체와 배열 모두 가능하다. 구조 분해 할당은 함수에 객체나 배열을 전달해야 할 경우가 생겼을 때 데이터 전체가 아닌 일부를 전달해야 할 때 사용한다.

구조 분해 할당에 대한 예시는 구조 분해 할당 - MDN 참고

매개변수(Parameter)

나머지 매개변수를 알아보기 전에 매개변수에 대해서도 정리해두면 좋을 것 같다. 매개변수의 사전적 정의는 다음과 같다. 물론 코드를 짜는데 있어서 매개변수의 사전적 정의까지 필요할까 싶은 생각이 들수도 있찌만 개인적인 생각으론 매개변수를 제대로 인지하고 있기 위해선 이 단어가 어떤 단어들의 합으로 이루어졌는지 알 필요가 있다고 생각한다.

매개변수(媒介變數)
각각(各各) 다른 변수(變數) 사이의 관계(關係)를 나타내기 위(爲)하여 쓰이는 변수(變數). (출처 : 네이버 한자 사전)

읽을수록 생각이 조금 더 복잡해진다.

그러니까 자바스크립트 안에서 Parameter: 매개변수 함수를 선언 할 때 괄호 안에 써주는 것을 의미하고, 그 짝꿍으로는 함수를 사용하기 위해 사용자가 값을 넣어주는 Argument: 인수라고 할 수 있을 것 같다.

function add(a, b){
  return a + b
}
add(1, 2)

위와 같은 함수에서 매개변수는 a 와 b 이고 인수는 1 과 2다.

나머지 매개변수(Rest Parameter)

MDN에 따르면 나머지 매개변수는 함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있다고 한다.

규칙
1. 매개변수 앞에 ... 을 붙여 사용한다.
2. 마지막 매개변수만 나머지 매개변수로 사용할 수 있다.
3. 나머지 매개변수는 하나만 사용할 수 있다.
4. 다른 매개변수와 함께가 아닌 단독으로도 사용할 수 있다.
5. 나머지 매개변수에는 앞에 정의된 매개변수를 만족한 이후의 인수들을 받아온다.

function RestParameter (a, b, ...Rest) {
  console.log(a)
  console.log(b)
  console.log(...Rest)
}
RestParameter(1, 2, 3, 4, 5, 6, 7)

// 1
// 2
// 3 4 5 6 7 

즉 a 에는 1, b 에는 2, ...Rest 에는 a 와 b 에 할당된 인수를 제외한 3 부터 7 까지의 인수가 배열로 들어가게 되는 것이다.

나머지 매개변수는 함수에서 사용되는 보일러 플레이트 (코드)를 줄이기 위해 도입됐다. 보일러 플레이트 코드는 표준 코드라고도 불리는데 똑같은 코드를 가져와 사용하는 것을 일컫는 말이기 때문이다.

매개변수에서 말하는 보일러 플레이트는 인수를 배열로 만들기 위해 함수를 변형해가며 여러줄 작성하는 것을 말한다. 즉, 매개변수는 배열로 정의되기 때문에 변형하는 과정을 거칠 필요 없이 배열 메소드를 바로 사용할 수 있다.

function RestParameter(a, b, ...Rest) {
  console.log(Rest.length)
} 
RestParameter(1, 2, 3, 4, 5, 6, 7)

// 5

위에서 보는 것과 같이 배열메소드인 .length를 바로 사용해줄 수 있다.

post-custom-banner

0개의 댓글