spread-operator,rest parameter, tagged-literal,default-parameter

김명성·2022년 2월 6일
0

자바스크립트

목록 보기
5/26

tagged literal

함수에 소괄호 대신에 문자열을 붙여서 실행할 수 있다.

문자와 변수를 해체할 수 있다.

const player = '손흥민';
let message = `안녕하세요 ${player}입니다`;


function taggedLiteral(string,var){
console.log(string);
console.log(var);}

함수 taggedLiteral의 파라미터.
1번째 파라미터는 변수를 기준으로 문자열을 Array화하여 문자열을 해체한다.
2번째 파라미터는 ${var}를 문자열에서 해체 한다.


사용예시

//주어진 변수 
  let pants = 20;
  let socks = 100;


//tagged literal 정의부
      function taggedLiteral(문자열, 변수1, 변수2) {
    console.log(
	문자열[1] + 변수1 + 문자열[0] + 변수2);
      }

// 실행부
      해체분석기`바지${pants}양말${socks};`;

사용예시2


      let pants = 0;
      let socks = 100;

   function taggedLiteral(문자열, 변수1, 변수2) {
     console.log(
       문자열[1] + 변수1 + 문자열[0] + 변수2);
        
     if (변수1 < 1) {
     console.log(
        문자열[0] + '안팔아요' + 문자열[1] + 변수2);
        }
      }

   taggedLiteral`바지${pants}양말${socks};`;

글자의 순서를 변경하고 싶을 때, 문자열[1] + 변수들 + 문자열[0]로 변경이 가능하다. 문자열은 Array로 추출되기 때문에 가능하다.


default parameter


      function 더하기(a, b = 10) {
        console.log(a + b);
      }
      더하기(1);
자바스크립트는 파라미터가 2개 들어가는 함수에 인자를 하나만 넣어도 에러가 나지 않는다. 그래서 나머지 하나의 파라미터 값을 정의하여 인자로 들어오지 않으면 자동으로 default parameter 값으로 함수를 실행할 수 있다.

위 함수의 default 파라미터. (b = 10)
b 자리에 인자가 들어오지 않을 경우 10이 입력된다.
인자가 입력되면 default parameter는 사라진다.
default parameter에 수학 연산도 들어올 수 있고, 다른 파라미터를 인자로 사용할 수도 있다. b = 2 * a
default parameter에 함수도 입력이 가능하다.(함수를 실행된 결과가 입력됨)

...spread operator (전개연산자)

      1
      let 어레이 = ['hello', 'world'];
      ...spread operator
      console.log(...어레이)
      // output 'hello' 'world'
대괄호를 제거하고 인덱싱을 펼쳐준다.
배열을 해체한다는 의미.
      2
      let 문자 = 'hello';
      ...spread operator
      console.log(...문자)
      'h' 'e' 'l' 'l' 'o'

위와 같이 문자열에도 어레이 느낌을 줄 수 있다.


전개연산자의 사용처 1. 어레이에 깊은 복사를 실행한다.

( 독립된 값을 갖는 배열,객체 생성)

사용방법 2. 오브젝트 합치기

      let o1 = { a: 1, b: 2 };
      let o2 = { ...o1, c: 3 };

값이 중복 되면 가장 나중에 선언된 값으로 대체 된다.
spread operator는 중괄호,대괄호,함수의 소괄호 안에서만 사용이 가능하다.
함수의 파라미터로 배열내 요소들을 사용하고 싶을 때 사용한다.

      const 어레이 = [10, 20, 30];
      function 더하기(a, b, c) {
        console.log(a + b + c);
      }
      더하기(...어레이); // 60

      // ++ 옛날방식
      더하기.apply(undefined, 어레이);

      const person = {
        인사: function () {
          console.log('안녕');
        },
      };

      person.인사(); //안녕

      const person2 = {
        name: '손흥민',
      };

person2에도 person.인사 함수를 사용하고 싶을 때
person.인사.apply(person2);
person2의 키값에 person.인사()를 적용시킬 수 있다.
call도 비슷함.
차이점이라면 parameter를 추가할 때
apply는 파라미터를 array형태로 집어 넣을 수 있다.
es6 이상의 함수
함수의 arguments
function 함수(a, b, c) {
console.log(a, b, c);
}
함수(1, 2, 3);
모든 파라미터를 한꺼번에 다루고 싶을 경우 arguments를 사용할 수 있다.모든 파라미터를 감싼다. 값은 유사배열로 출력된다.
파라미터가 10개,20개 이상이라면? arguments 사용한다.

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

arguments의 단점 : 매개변수 a,b,c 파라미터만 사용하고 싶을 때 복잡해 진다.그래서 Rest 파라미터를 사용한다.

      function 함수2(...파라미터들) {
        console.log(파라미터들);
      }

함수 소괄호 안의 ...rest파라미터는 모든 파라미터를 유사배열로 보관해준다. arguments의 단점을 보완

      function 함수3(a, b, ...파라미터들) {
        console.log(파라미터들);
      }
      함수3(1, 2, 3, 4, 6, 7, 8, 9); //[3,4,6,7,8,9]

파라미터를 1개씩 콘솔창에 출력하게 만들고 싶다면?

      function 함수4(...rest) {
        for (let i = 0; i < rest.length; i++) {
          console.log(...rest[i]);
        }
      }
      함수4(1, 2, 3, 4, 25324, 124123, 523, 45431, 51, 152, 415123, 32, 436);

...rest는 파라미터의 개수를 지정할 필요가 없다.
...rest는 파라미터의 가장 마지막에 사용해야한다.
...rest는 1번만 사용이 가능하다.

  var a = [1, 2, 3];
  var b = ['you', 'are'];
  var c = function (a, b) {
    console.log([[...a], ...[...b]][1]);
  };
	c(a, b);
	// output : you

상세내용
[[...a], ...[...b]][[1,2,3], 'you', 'are'] 같다

결과또한 배열의 규칙을 따르기에 인덱싱 [1]의 값인 'you'가 출력됨.
대괄호는 해체하기에 전개연산자 ...a,...b를
[...a],[...b]로 감싸더라도 대괄호는 해체됨
...b는 대괄호 바깥의 ...과 연결되는 것을 볼수 있음

    function 어레이(...rest) {
      return [...rest];
    }

    var newArray = 어레이(1, 2, 3, 4, 5);
    console.log(newArray);

    //문자열 배열에 담아 알파벳순 정렬하기
    function 정렬(para) {
      return [...para].sort();
    }
    정렬('bear');

    //알파벳 갯수를 세어 오브젝트에 기록 후 출력하기
    function 글자세기(para) {
      return [...para].reduce((acc, cur) => {
        if (acc[cur]) acc[cur]++;
        else acc[cur] = 1;
        return acc;
      }, {});
    }
    글자세기('qwrqfqwffefkfkfk');
    //문자열 배열에 담아 알파벳순 정렬하기2
    const 결과 = {}; // 객체로 담을꺼니까.
    [...글자].forEach(function (x) {
      //만약에 결과에 x가 있으면 +1 해주시고 없으면 a : 1로 집어 넣어주세요.
      if (결과[x] > 0) {
        결과[x] += 1;
      } else {
        결과[x] = 1;
      }
    });

    reference data type 객체의 복사
    let 이름1 = { name: '김' };
    function 변경(obj) {
      obj = { name: 'park' };
    }
    변경(이름1); // 그대로 { name : '김'}을 출력한다.

새로운 사실. 파라미터는 변수를 생성하고 할당하는 것과 같다.
파라미터 변수(obj)에 = { 새로운 값 }을 넣어도 원래 이름1 오브젝트는 변화가 없다. 파라미터는 사용되고 사라지기 때문이다.

0개의 댓글