프론트엔드 스쿨 5기 TIL - 4월 6일 - 전개구문 & 구조분해할당

크롱·2023년 4월 9일
0

JavaSrcipt

목록 보기
17/53

🌈 전개구문

🌞 배열의 전개구문

<script>

  const 과일들 = ['사과', '파인애플', '수박'];
  const 생선들 = ['조기', '갈치', '다금바리'];
  const 합치면 = [...과일들, ...생선들];
  const 합치면2 = [과일들, 생선들];

  console.log(합치면); // ['사과', '파인애플', '수박','조기', '갈치', '다금바리']
  console.log(합치면2); //[ ['사과', '파인애플', '수박'] , ['조기', '갈치', '다금바리']  ]
  
</script>

🌞 객체의 전개구문

<script>
  const 위니브1 = { 개리: 1, 빙키: 2 };
  const 위니브2 = { 라이캣: 3 };
  const 위니브3 = { ...위니브1, ...위니브2 };

  console.log(위니브3); // {개리: 1, 빙키: 2, 라이캣: 3}
</script>
<script>

  const 위니브임직원 = {
      개리: '재직중',
      빙키: '재직중',
      라이켓: '재직중',
      뮤라: '재직중',
      해골왕: '재직중'
  };

  const 위니브임직원2 = {
      ...위니브임직원,
      라이켓: '휴가',
      해골왕: '퇴사'
  }

  const 위니브임직원3 = {
      ...위니브임직원
  }

console.log(위니브임직원2) 
// {
//   "개리": "재직중",
//   "빙키": "재직중",
//   "라이켓": "휴가",
//   "뮤라": "재직중",
//   "해골왕": "퇴사"
// }


console.log(위니브임직원3) // 맨처음 const 위니브임직원이랑 똑같이나옴.

// {
//   "개리": "재직중",
//   "빙키": "재직중",
//   "라이켓": "재직중",
//   "뮤라": "재직중",
//   "해골왕": "재직중"
// }

console.log(위니브임직원) //{
//   "개리": "재직중",
//   "빙키": "재직중",
//   "라이켓": "재직중",
//   "뮤라": "재직중",
//   "해골왕": "재직중"
// }
</script>

🌈 구조분해할당

<script>
  for (const [i, j] of [[1, 2], [3, 4], [5, 6]]) {
      console.log(i, j);
  }

  // 1,2
  // 3,4
  // 5,6
</script>


.entries(객체)

<script>
  const 위니브임직원 = {
      개리: '재직중',
      빙키: '재직중',
      라이켓: '재직중',
      뮤라: '재직중',
      해골왕: '재직중'
  };


  // Object.entries(객체) // [key, value] 배열을 반환한다.
  let keyVal = Object.entries(위니브임직원) 
  console.log(keyVal) 
  // [
  //   ["개리","재직중"],
  //   ["빙키","재직중"],
  //   ["라이켓","재직중"],
  //   ["뮤라","재직중"],
  //   ["해골왕","재직중"]
  // ]




  for (const [i, j] of Object.entries(위니브임직원)) {
      console.log(i, j);
  }

  //'개리' '재직중'
  //'빙키' '재직중'
  //'라이켓' '재직중'
  //'뮤라' '재직중'
  //'해골왕' '재직중'
</script>

<script>

  let num = '010-5044-2903'.split('-')
  console.log(num) // ["010","5044","2903"]

</script>

🌃 기억해주세용

1

<script>
  const test1 = [
      [1, 2, 10, 20],
      [3, 4, 30, 40],
      [5, 6, 50, 60]
  ]


  for (const [i, j, ...k] of test1) {
      console.log(i, j, k);
  }

  //1,2,[10,20]
  //3,4,[30,40]
  //5,6,[50,60]


  function hello(a, b, ...c) {
      console.log(a, b, c)
  }

  hello(1, 2, 3, 4, 5, 6, 7)
  // 1,2 [3,4,5,6,7]  

</script>

2

  • 배열의 전개구문
<script>

Math.max(...[10, 20, 30])  //30
Math.min(...[10, 20, 30])  //10
Math.max(...[10, 20, 30, [11, 12, 13, [29, 40, 50]]].flat(Infinity))
//flat 해서 핀 후 전개를해야하므로 ...을 붙인다



//자주사용되는 코드
const s = 'hello world';

[s] //['hello world']
[...s] // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']
// s.split('')과 결과가 같다 
</script>
profile
👩‍💻안녕하세요🌞

0개의 댓글