forEach

Array는 Array Class의 인스턴스이다. 따라서 Array Class에 정의되어 있는 메소드들을 활용할 수 있다. 주인장은 Array의 헬퍼 메소드들을 통해 OOP와 FRP에 대해 공부해보려 한다.

forEach

let heroes = ['supermen', 'batman', 'spiderman'];

// oop(impelative) 
for (let i = 0; i < heroes.length; i++) {
    console.log(heroes[i])
}

// frp(declarative) 
heroes.forEach(function(hero) {
	console.log(hero)  
})

위의 for 문과 밑의 forEach문은 출력값이 같다.

위의 주석에서 볼 수 있듯 다른 언어들은 어느 한 방향으로 특정되어있는 것에 비해서 자바스크립트는 OOP와 FRP방식 둘 다 이용할 수 있는 언어이다.
위의 for문을 이용한 oop방식과 밑의 forEach를 이용하는 frp 방식을 사용하는 차이는 각 개인마다의 스타일 차이로 달라질 수 있다. oop를 주로 사용하는 프로그래머라면 oop의 방식을, 반대는 frp의 방식으로 코드의 구조를 써내려갈것이다.

아무튼 결과는 똑같다.

밑의 forEach문을 Array function 형태로도 작성할 수 있다.

heroes.forEach((hero) => {
	console.log(hero)  
})

혹은 함수를 밖으로 빼버려서 사용할수도 있다.

function print(hero) {
 	console.log(hero) 
}

heroes.forEach(print);

이제 위의 두 가지 방식을 모두 사용하여 원하는 결과값을 도출하는 연습을 해보자.
아직 위의 코드는 짧아서 두 방식의 차이점이 크게 느껴지지 않겠지만, 코드의 양이나 어플리케이션의 크기가 거대해질수록 방식으로부터 오는 차이는 확연하게 나타나게 된다.

한가지의 예시를 더 봐보자.

let numbers = [1, 2, 3, 4, 5];
let sum = 0;

// impelative
// how - to, step by step
// 하나씩 무엇을 해나가는 지를 설명해주는 방식을 imperative라고 한다.
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}
console.log(sum);

// declarative
// show me what I want
// 무엇을 할 것인지를 얘기하는 것이 아니라 우리가 원하는 것이 무엇인지를 설명하는 방식
numbers.forEach((number) => {
    sum += number;
})
console.log(sum)  

위의 impelative 방식와 밑의 declarative 방식의 차이를 주석으로 써놨다.
impelative 방식은 step by step, 무엇을 어떻게 해나갈지를 아주 명식적으로 정교하게 설명하는 방식이고

밑에 있는 declarative 방식은 우리가 원하는 것이 무엇인지를 설명하는 방식이다.
이 또한 어쨋거나 결과는 같은데, 밑의 declarative 방식이 좀 더 간결하다.
간결한데, 내부의 알고리즘을 이해하기는 조금 더 어렵다. 코드에 대한 이해가 부족하다면 왜 그렇게 결과값이 나오는지에 대해서 직관적으로 알아차리기가 비교적 어려울 수 있다.

forEach 연습

function newDelivery(){
    let news = [
        {id: 13, title: '청와대 이전할까?'},
        {id: 22, title: '월드컵 조추첨 시작'}, 
        {id: 55, title: '제주도 한라산 분화 조짐'}
    ]

    let newsDatabase = [];
    function saveNews(item) {
        newsDatabase.push(item);
    }

  	// impelative
    for (let i = 0; i < news.length; i++) {
        saveNews(news[i]);
    }

    console.log(newsDatabase);
}

newDelivery();

위의 코드에서 impelative 방식을 declarative 방식으로 바꿔보는 연습을 해보자.

declarative 방식으로, 내가 무엇을 원하는지에 대한 코드를 직관적으로 작성한다.

function newDelivery(){
    let news = [
        {id: 13, title: '청와대 이전할까?'},
        {id: 22, title: '월드컵 조추첨 시작'}, 
        {id: 55, title: '제주도 한라산 분화 조짐'}
    ]

    let newsDatabase = [];
    function saveNews(item) {
        newsDatabase.push(item);
    }

  	// declarative
    news.forEach(saveNews);

    console.log(newsDatabase);
}

newDelivery();

news.forEach(function(item) {
  newsDatabase.push(item);
})

익명 함수를 이용해서도 같은 결과값을 리턴할 수 있다.

forEach와 관련된 두 번째 Excersize도 바로 연습해보자.

let images = [
    { height: 10, width: 30 },
    { height: 20, width: 90 },
    { height: 54, width: 32 },
];

// area = image.height & image.width
let areas = [];

위의 각 이미지의 면적을 담는 areas를 impelative 방식과 declarative 방식으로 구현해보자.

let images = [
    { height: 10, width: 30 },
    { height: 20, width: 90 },
    { height: 54, width: 32 },
];

// area = image.height & image.width
let areas = [];


// impelative
for (let i = 0; i < images.length; i++) {
    let area = images[i].height * images[i].width;
    areas.push(area);
}
console.log(areas);

// declarative
images.forEach(function (item) {
    areas.push(item.height * item.width);
});
console.log(areas);