Javascript : for...of 문 에서 뽑은 객체의 값이 변경이 안되는 이유가 궁금합니다.

Question

안녕하세요. 자바스크립트 공부하는 학생입니다.const list &#61; ['a', 'b', 'c']; for (let i of list) { i &#61; 'd'; console.log('list1', list); // list1 [&#34;a&#34;, &#34;b&#34;, &#34;c&#34;] } console.log('list2', list); // list2 [&#34;a&#34;, &#34;b&#34;, &#34;c&#34;]다음과 같은 코드에서 i의 값이 변경되지 않고 주석처럼 나오는 이유가 무엇인가요?const list &#61; ['a', 'b', 'c']; for (let i &#61; 0; i < list.length; i&#43;&#43;) { list[i] &#61; 'd'; console.log('list1', list); // list1 [&#34;d&#34;, &#34;d&#34;, &#34;d&#34;]; } console.log('list2', list); // list2 [&#34;d&#34;, &#34;d&#34;, &#34;d&#34;]for문으로 할 경우는 값이 정상적으로 변경되더라구요.for...of 문에서 꺼내서 변수에 저장한 객체 i가 각각 list[0], list[1], list[2]를 의미하는 게 아닌가요?일단 대가리 박으면서 두번째 코드처럼 직접 list[i]값을 수정하는 것과 또 다른 배열 let list2 &#61;[]; 를 선언해서 변경한 i값들을 주고 list2를 사용하는 방법을 찾긴 했는데요. 이유가 궁금합니다. 검색 키워드라도 알려주시면 감사하겠습니다!!

띠로릴링 · Accepted Answer

for (let i of list) { // list 에서 하나씩 꺼내온 값을 i라는 변수에 할당한 것이라 변경이 되지 않고 } for (let i = 0; i < list.length; i++) { list[i] = 'd'; // 여기서는 let i 가 배열의 인덱스 값과 같은 순번을 가지고 있기 때문에 배열이 수정이 되었던 것 입니다. }

waferroll · Answer

for of문은 일종의 forEach문입니다. 순회 가능한 요소를 하나씩 꺼내서 사용할 수 있습니다.보통 forEach를 사용하는 경우는 각 요소의 복사본을 사용하는 것이기 때문에 해당 요소를 수정하거나 할 때 쓰지 않습니다. (PHP나 자바도 마찬가지)해당 요소를 순회하며 수정할 필요가 있는 경우에는 인덱스가 같이 제공되는 for문 쓰시구요단순 조회하여 그 값을 이용해 다른 처리를 할 경우에는 forEach를 사용하는 것이 좋습니다.만약 쓰시려면for (const [index, value] of arr.entries()) { console.log(Index: ${index}, Value: ${value}); }위와 같은 배열 구조 분해를 이용하시면 된다네요 (챗지피티 왈)근데 배열 구조 분해 쓸 바에 그냥 for문 쓸 듯요

Palaoo · Answer

이터레이터(아마 이터레이터라는 용어도 생소하시겠지만)에 의한 반복을 수행할때는 아이템을 source를 참조해서 접근하는것이 아니라 source의 아이템을 복제해서 제공하게 됩니다.따라서 복제된 아이템을 바꿔도 source에는 아무런 영향이 없는거죠.요즘의 트렌드는원본을 직접 조작하지 않고 연산을 수행하는게 보통입니다.

Javascript : for...of 문 에서 뽑은 객체의 값이 변경이 안되는 이유가 궁금합니다.

2개의 답변

기술 목록