forEach, for...in을 이용한 반복문 기초(ft. 배열, 객체 Data 뽑기)

forEach, for...in을 이용한 반복문 기초

 

프로그램밍을  공부하면서 사람에게 가장 쉽게(?) 다가오는 기능은 바로 '반복문'과 '조건문'이라고 생각합니다. 왠지 내가 코딩 천재가 된 것 같은 착각 아닌 착각도 쉽게 빠뜨려주곤 합니다. 그렇지 않은가요?

Javascript에는 다양한 for 문이 존재해서 자칫 혼란스럽기도 한데요, 이번 포스팅에서는 반복문 사용 레벨을 한단계 도약시켜주는 느낌을 갖게 하는 forEach()와 for.. in 반복문에 대해서 정리하고 가보겠습니다

Javascript 로고

 

 

forEach() 반복

 

forEach는 뭔가 반복문을 돌면서 각(each) 개별로 수행해주는 반복문 같은 느낌이 듭니다. 어떻게 동작하는 지 살펴보기 위해서 다음과 같이 예제 코드를 작성해보았습니다.

      const nums = [2, 4, 8, 7];

      nums.forEach(function(){
        console.log("바보");
      })

콘솔에 "바보"를 원소의 갯수만큼 찍어줍니다

 

"바보"라는 글자를 콘솔에 4번 찍어줍니다.

즉, 배열이 갖고 있는 원소의 갯수 만큼 반복문을 돌려주는 특성을 가졌습니다. 마치 for 문을 사용할 때 "배열의 길이"까지 반복해주는 것 같은 느낌이 듭니다. for (i=0; i < nums.length; i++) 처럼 말이죠.

 

 

 

forEach(arg)

 

forEach는 인를 넣어주면 배열의 원소를 하나씩 가져와줍니다.

      const nums = [2, 4, 8, 7];

      nums.forEach(function(item){
        console.log(item);
      })

forEach에 인자를 넣어주면, 배열의 원소 각각에 해당합니다.

console.log(item) 형태로 출력을 해보면, forEach는 배열의 원소를 하나씩 뽑아다 주는 것을 알 수가 있습니다.

이건 마치 파이썬의 for문과 유사해보입니다. 비교를 위해 잠시 파이썬 코드를 살펴봅니다.

nums = [3, 2, 5, 4, 1]

for i in nums:
    print(i)

파이썬에서의 for.. in  반복문

 

파이썬의 for문을 공부할 때 무척 쉽게 이해가 되는 느낌이었더랬습니다. 일단 Java의 문법을 비스무리 따라가고 있는 Javascript의 for문의 경우에는 왠지 복잡시럽게 느껴졌거든요.(뭔가 더 기계적인 사고방식에 친화적인 느낌?)

 

 

 

forEach(arg, i)

 

forEach는 인를 2개 줄 수 있습니다. 뒤에 붙는 i는 그냥 하나씩 증가하는 정수입니다. 무슨 이야기인지 일단 콘솔에 찍어보도록 해봅시다.

      const nums = [2, 4, 8, 7];

      nums.forEach(function(item, i){
        console.log(item, i);
      })

forEach는 인자를 2개까지 가질 수 있습니다.

console.log(item, i)로 찍어보니 i 자리에는 0, 1, 2, 3이 찍힙니다. 왜 굳이 저런 인를 가지고 있을까요? 뭔가 유용하게 활용이 되니까 그렇게 만들어둔 것이겠죠? 너는 다~ 계획이 있구나!

 

[대괄호] 배열 안에 들어 있는 원소들은 '순차의미'를 가지게 됩니다.(반면 object 즉 객체는 순차의 의미가 없습니다.)

따라서, 반복문을 통해 배열을 조작하다보면, 배열의 원소값을 아는 것도 중요하지만, 순차를 알려주는 값도 의미가 큽니다. 예를 들어 nums[0] 은 2를 뽑아다 주게 되니까요. 아무튼 배열에서 순차는 중요합니다.^^;

 

TMI) React에서도 반복문을 사용할 때 주로 map() 함수를 사용하게 되는데요, 이 경우에도 인자를 2개 넣었던 기억이 납니다. 다만 map() 함수는 return으로 돌려주는 값들을 모아서 다시 [배열] 형태로 만들어준다는 차이점이 있습니다. 

 

 

 

 

for... in 반복문

 

for... in 반복문을 이용해서 위의 예제를 적용해봅시다.

      const nums = [2, 4, 8, 7];

      for(const i in nums){
        console.log(i);
      }

for.. in 반복문을 배열에 적용해본 예시

 

배열의 순번을 알리는 1씩 증가하는 정수가 찍힙니다. 원소를 출력해주기 위해서는 다음과 같이 하면 되겠죠?

      const nums = [2, 4, 8, 7];

      for(const i in nums){
        console.log(nums[i]);
      }

for.. in 반복문을 이용한 배열 원소 출력

각각의 원소들이 잘 찍힙니다. 그러면 무슨 차이가...?

 

for... in은 "객체" 안에 있는 데이터들도 뽑아올 수 있게 해줍니다. forEach는 "배열" 전용함수이니까요.

비교를 위해 다음과 같은 코드를 작성해보았습니다.

      const spiderman = {name: 'peter', age: 18, skill: '피터찌리릿'}

      for(let i in spiderman){
        console.log(i);
      }

for.. in 반복문을 이용한 객체 key 출력

 

객체(오브젝트)의 key들을 뽑아다 주는군요. 그래서 사실, 객체에서 뽑아 올 때는 인를 아예 key라고 관행적으로 써주기도 합니다. 이렇게 말이죠.

      for(let key in spiderman){
        console.log(key);
      }

 

그러면, 객체에서 value를 콘솔에 출력하려면 어떻게 하면 될까요? 이건 너무 쉽죠?

      const spiderman = {name: 'peter', age: 18, skill: '피터찌리릿'}

      for(let key in spiderman){
        console.log(spiderman[key]);
      }

for in 반복문을 이용한 객체 Value 출력

 

for... in 반복문을 이용하면 이렇게 객체(오브젝트)에 있는 데이터들도 쉽게 잘 추출해내서 활용할 수 있게 됩니다.

 

forEach나 for... in의 사용법과 동작결과를 간단하게 살펴보았습니다.

 

 

 

 

마치며

 

 

만약 서버통신을 통해서 어떠한 데이터의 묶음을 '배열'로 받게 된다면 forEach()로 추출해내고, '객체'형태로 받게 된다면 for...in 구문을 먼저 떠올려보면 어떨까 싶습니다. 반복문은 단순히 1부터 100까지 덧셈을 반복하는 경우 보다는 이처럼 배열이나 객체에서 데이터를 추출하는 데 잘 활용할 수 있도록 학습을 해둔다면, 반복문에 대해서 한단계 더 실력이 업그레이드 될 것이라고 생각합니다.

 

아, 그러고보니... Javascript에는 for... of 반복문도 있는데요, 이건 다음에 서로 비교해보도록 하겠습니다.

 

 

즐거운 코딩 생활, 즐코딩

KINcoding.