JavaScript tip3

Looping에 대해서 알아보자

items의 배열에서 짝수인 경우에만 4를 곱해서 합하는 코드를 작성해봤는데 아래와 같이 BadCode를 작성하면 가독성이 떨어진다. 그래서 배열 APIs를 이용해보자

// Looping
const items = [1,2,3,4,5,6];


// 💢 Bad Code💩
function getAllEvens(items) {
    const result = [];
    for (let i = 0; i < items.length; i++) {
        if (items[i] % 2 === 0) {
            result.push(items[i])
        }
    }
    return result;
}

function multiplyByFour(items) {
    const result = [];
    for (let i =0; i < items.length; i++) {
        result.push(items[i] * 4);
    }
    return result;
}

function sumArray(items) {
    let sum = 0;
    for (let i =0; i < items.length; i++) {
        sum += items[i];
    }
}


const evens = getAllEvens(items);
const multiple = multiplyByFour(evens);
const sum = sumArray(multiple);
console.log(sum);

배열 APIs를 이용해보면 함수부분이 push를 하고 for loop를 할 필요가 없다.

하지만 이거도 굳이 함수로 따로따로 만들 필요가 없고 필요할 때마다 배열 api를 이용할 수 있다.

// Bad Code💩
function getAllEvens(items) {
    return items.filter((num) => num % 2 === 0);
}

function multiplyByFour(items) {
    return items.map((num) => num * 4);
}

function sumArray(items) {
    items.reduce((a, b) => a + b, 0);
}

GoodCode를 작성해보면 필요할 때마다 배열API를 이용하는 것이다.

// Good Code
const evens = items.filter((num) => num % 2 === 0);
const multiple = evens.map((num) => num * 4);
const sum = multiple.reduce((a, b) => a + b, 0);
console.log(sum);

배열API의 경우는 배열 자기자신을 항상 return하기 때문에 각각의 API들을 할당하기 보다는 연속적인 일을 한다면 chaining을 이용할 수 있다.

// Good Code
const result = items
    .filter((num) => num % 2 === 0);
    .map((num) => num * 4);
    .reduce((a, b) => a + b, 0);
console.log(result);

다음으로 async에 대해서 알아보자

아래코드는 then이 계속해서 중첩이 되니까 좋지않은 코드이다.(콜백지옥)

그래서 두가지 이상의 promise를 연결해서 사용해야 한다면 async와 await을 이용하면 좀 더 깔끔한 코드가 완성된다.

// 💢 Bad Code 💩
function displayUser() {
    fetchUser() //
	  .then((user) => {
	    fetchProfile(user) //
		  .then((profile) => {
		    updateUI(user, profile);
			});
	});
}

async와 await을 이용하면 순차적으로 확인할 수 있기 때문에 가독성을 높이고 이해력을 높일 수 있다.

user를 fetch를 해온 다음에 그걸 이용해서 profile을 가지고 와서 UI를 업데이트 한다라고 바로 이해할 수 있다.

// Good Code💥
async function displayUser() {
	const user = await fetchUser();
	const profile = await fetchProfile(user);
	updateUI(user, profile);
}

 

마지막 quiz를 풀어보자

중복된 것들을 제거한 배열을 나타낼려면 아래와 같은 코드를 작성해보자 array배열은 중복을 허용하는 배열이다

Set을 이용해보자. Set은 중복을 허용하지 않는 배열이므로 Set을 한다음 ...을 이용해서 새로운 배열로 담는다.

// Remove Duplicates!

const array = ['😺', '🙉', '🙉', '🐭', '🦒', '🐭'];
console.log(array);

console.log([...new Set(array)]);

 

참고: https://www.youtube.com/watch?v=BUAhpB3FmS4