🚩 javascript

iterator(순회)

📝 설명

• 반복, 순회할 수 있음.
• 이터레이션 프로토콜을 따르는 객체(반복, 순회할 수 있는 규격을 따르는 객체)

ex) Array, String, Map, Set - 이터레이션 프로토콜을 따르는 기본 자료구조

for..of, spread 연산자에서 사용할 수 있음

✒ 코드작성

입력

js

const arr1 = ["하늘", "산", "바다"];

for (const item of arr1.entries()) {
  console.log("item.entries()는? : ", item);
}
console.log();
// for (변수 (배열의 아이템) of 배열) {실행문...}
// Array.values() (기본값. 생략가능)
// Array.keys() - index 나열
// Array.entries() - index, value 나열

// 오브젝트로 for of 사용
/*
const obj = { a: 1, b: 2, c: 3 };
for (const item of obj) {
  console.log("obj의 아이템 : ", item);
}
*/
// TypeError : obj is not iterable - 오브젝트는 이터러블이 아님

// 오브젝트는 for in 사용 가능
const obj = { a: 1, b: 2, c: 3 };
for (const item in obj) {
  console.log("obj의 아이템 : ", item); // key값 출력
}

console.log();

// const arr1 = ["하늘", "산", "바다"];
const iter = arr1.values(); // 이터레이터를 반환하는 함수
console.log("첫번째 next : ", iter.next());
// 결과 객체 리턴. { value: '하늘', done: false }
// 첫 번째 value: 하늘, done: 끝났는지 아닌지 여부
console.log("두번째 next : ", iter.next());
console.log("세번째 next의 value : ", iter.next().value);
console.log("네번째 next : ", iter.next());
console.log("다섯번째 next의 done : ", iter.next().done);
console.log();

// while 이용
const iter2 = arr1.values();
console.log("iter2 : ", iter2);

while (true) {
  const item = iter2.next();
  if (item.done) break;
    console.log("while문 : ", item.value);
}

출력

• 이미지로 대체
  

🔗 참고 링크 & 도움이 되는 링크

• javascript iterator

---

spread 연산자 (전개구문)

📝 설명

• 모든 iterable(반복)은 spread(전개)될 수 있음

• function (...iterable) / [...iterable] / { ...object }

✒ 코드작성

입력

js

// 3개의 인자를 전부 합쳐주는 함수
function add(x, y, z) {
  return x + y + z;
}
const num = [1, 2, 3];
// console.log(add(num[0], num[1], num[2])); // 번거로움
console.log(add(...num)); // spread 연산자

// Rest parameters - 함수에서 인자로 받아올 때 갯수가 정해져 있지 않음
function sum(first, second, ...nums) {
  // 앞의 두개는 아는데 뒤에는 사용자 맘대로 하라는 뜻
  console.log("nums는? : ", nums);
}
sum(1, 2, "ㅎㅇ", 8, 9, 63);
console.log();

// concat을 이용하여 배열 합치기
const fruits1 = ["🥝, 🥥"];
const fruits2 = ["🍇, 🍋"];
let arr = fruits1.concat(fruits2);
console.log(arr); // [ '🥝, 🥥', '🍇, 🍋' ]

// concat을 사용하지 않고 배열 합치기
arr = [...fruits1, ...fruits2];
console.log(arr); // [ '🥝, 🥥', '🍇, 🍋' ]

arr = [...fruits1, "🍕", ...fruits2];
console.log(arr); // [ '🥝, 🥥', '🍕', '🍇, 🍋' ] // 배열 중간에 추가 가능
console.log();

// Object
const student1 = { name: "sunny", age: 20, home: { address: "seoul" } };
// const student1_1 = { name: "sunny", age: 20, home: { address: "seoul" }, major: "business" };
const student1_1 = { ...student1, major: "business" };

console.log("student1 : ", student1);
console.log("student1_1 : ", student1_1);

출력

• 이미지로 대체
  

🔗 참고 링크 & 도움이 되는 링크

• javascript spread

---

배열 destructuring (구조분해할당)

📝 설명

• 구조를 파괴, 분해 후 재배치

✒ 코드작성

입력

js

const fruits = ["🥝", "🥥", "🍇", "🍋", "🍑", "🍒"];
console.log(fruits[2]); // 인덱스 번호 말고 이름을 붙여서 출력하고 싶음 (의미 있는 이름으로)

const [kiwi, coco, grape, ...others] = fruits;
// 배열의 구조가 분해되어서 순서대로 할당됨. 4번째 부터는 rest parameter로
console.log(coco); // 분해 후에는 인덱스로 접근할 필요x, 배열 이름 필요x
console.log("others : ", others);

const point = [1, 2];
const [x, y = 15, z = 1004] = point; // point 배열을 구조분해할당
// z = 1004는 나중에 추가(초기값 설정 후 추가)
// 이미 위에 point 배열에서 지정해준 값이 있기 때문에 y = 15로 변경되지 않음
console.log("x : ", x);
console.log("y : ", y);
console.log("z : ", z);
console.log();

// 함수에서 사용
function createEmoji() {
  return ["apple", "🍎"];
}
console.log(createEmoji()); // 의미있는 이름으로 하나씩 쓰고 싶음

const [title, emoji] = createEmoji(); // 함수를 직접 구조분해할당 가능
console.log("title : ", title);
console.log("emoji : ", emoji);
console.log();

// 오브젝트에서 사용
const student1 = { name: "sunny", age: 20, major: "business" };

// function display(person) {
//   console.log("name? : ", person.name);
//   console.log("age? : ", person.age);
//   console.log("major? : ", person.major);
// }

function display({ name, age, major }) {
  // 처음부터 구조를 분해해서 받아옴
  console.log("name? : ", name);
  console.log("age? : ", age);
  console.log("major? : ", major);
}
display(student1);
console.log();

// 그냥 변수 할당
const { name, age, major: job, pet = "강아지" } = student1;
console.log("name? : ", name);
console.log("age? : ", age);
// console.log("major? : ", major); // major: job (업데이트)
console.log(job);
console.log(pet); // pet = "강아지" (추가)

출력

• 이미지로 대체
  

🔗 참고 링크 & 도움이 되는 링크

• javascript destructuring

---