[🌳javascript] default parameter, rest parameter, spread operator, apply, call

default parameter

기본값 함수 매개변수 (default function parameter)를 사용하면 값이 없거나 undefined가 전달될 경우 이름붙은 매개변수를 기본값으로 초기화할 수 있습니다. 라고 MDN 님께서 말씀하신다.

function 어떤함수(a,b=10){
	console.log(a+b)}
어떤함수(1) // 11

function 어떤함수2(a,b=2*5){
  console.log(a+b)} // 수학연산자 가능
function 어떤함수3(a,b=a*5){
  console.log(a+b)} // 다른 파라미터와 연산도 가능
어떤함수(2) // 11

function 임시함수(){
  return 10}
function 어떤함수4(a,b=임시함수){
  console.log(a+b)}
어떤함수4(1) //11

arguments

함수의 모든 파라미터들을 전부 한꺼번에 돌돌 묶어서 외치면서 다루고 싶은 경우(참고로, ES5문법임)

function 욕심쟁이함수(a,b,c){
  console.log(arguments)}
욕심쟁이함수(1,2,3) // [1,2,3] 비스무리한 자료가 출력됨

function 욕심쟁이함수2(a,b,c){
  for(let i=0;i<arguments.length;i++){
    console.log(arguments[i])}
}
욕심쟁이함수2(1,2,3) // 1 2 3

arguments와 다르게 ES6에서 나온 rest 파라미터 문법은 쪼개서 담기 기능이 가능하며, 파라미터가 몇 개 들어올지 미리 지정할 필요도 없기 때문에 더 편리하다. 한번 알아보자!

rest parameter

function 편리한함수(a,b,...rest){
  console.log(rest) }

편리한함수(1,2,3,4,5,6) // [3,4,5,6]

함수의 파라미터에서 ...에 들어온 녀석들을 전부 다 묶어서 array안에 담아줌

주의사항

• 파라미터의 가장 마지막 부분에 쓰기
• 한 함수의 파라미터로 단 한 번만 사용할 수 있음

spread operator

... 점 3개 나열하면 되는데, 괄호제거해주는 연산자 정도로 생각하면 되겄다.

const 인사=['hi','there']
console.log(...인사) //hi there

그럼 이것을 어디다 쓰면 되는 것이냐~하면,

array 합치기/복사

// 	합치기
const arr=[1,2,3]
const arr2=[4,5,5]
const arr3=[...arr,...arr2]
console.log(arr3) // [1,2,3,4,5,6]

//복사
const 배열1=[1,2,3]
const 배열2=배열1
console.log(배열2) //[1,2,3]
배열1[3]=4
console.log(배열1) //[1,2,3,4]
console.log(배열2) //[1,2,3,4]

나는 배열2에 수정을 해준 적이 없는데 왜 [1,2,3,4]가 된것인가?
자바스크립트에서 등호를 이용해 복사를 하게 되면 배열1이랑 배열2가 사이좋게 하나씩 내 꺼, 니꺼 이렇게 각각 나눠가진 게 아니라 그냥 한개의 값을 둘이서 저멀리서부터 미어캣마냥 지그시 바라보는 상황이 연출된다.

= 를 사용해 복사를 하게 되면 ' 저기에 있는 거가 너의 값이란다' 이라고 그냥 화살표 하나 던져준거다. 그럼 그냥 하염없이 그 값만 바라보고 있는거구. ...spread operator를 사용하면 우리는 미어캣 눈빛 대신 각각의 변수에 각각의 값을 진짜로 줄 수 있게 된다.

const 배열1=[1,2,3]
const 배열2=[...배열1]
배열1[3]=4
console.log(배열1) //[1,2,3,4]
console.log(배열2) //[1,2,3]

object 합치기/복사

const 객체1 = { a: 1, b: 2 };
const 객체2 = { ...객체1 };
console.log(객체2);//{ a: 1, b: 2 }

//key 값 중복될 경우 나중에 들어온 걸로 결정된다
const 객체1 = { a: 1, b: 2 };
const 객체2 = { a: 4, ...객체1 };
console.log(객체2);//{ a: 1, b: 2 }


const 객체1 = { a: 1, b: 2 };
const 객체2 = {...객체1, a: 4, };
console.log(객체2);//{ a: 4, b: 2 }

참고로 spread operator는 (함수 소괄호), {객체 중괄호}, [배열 대괄호] 안에서만 보통 사용한다!

apply, call

옛날에 spread operator 생기기 전에는 apply, call 이용했다는데 옛날문법이긴해도 객체지향 배울 때 쓸모가 있다고 하니 오늘 학습하는 시간을 가져보자....흑

const person={
  인사: function(){
    console.log(this.name+'안녕')
}
const person2={
  name:'홍길동'
}

person.인사()를 person2에서도 사용하고 싶으면 어떻게 할까?
person.인사.apply(person2) 이런 식으로 작성하면 되는데 apply뿐만 아니라 .call()이라는 것도 똑같이 작용한다. 다만, 파라미터에 넣는 방식에서의 차이가 존재한다.
.apply는 [], call은 person.인사().call(person2, 1,2)처럼 작성하면 된다.

---

• 오늘 알게 된 것
  reference data type(array,object)은 복사할 때 spread operator를 사용해야 한다.
• 오늘 배운 내용 중 궁금하거나 더 알고 싶은 것
  얕은 복사/ 깊은 복사에 대해서도 더 학습하면 좋을 것 같다.
• 오늘의 소감

자바스크립트 공부 재미있지?

헤헤