Category Archives: JavaScript

Front-End, JavaScript

[JS] forEach 사용시 async 함수 호출

Leave a comment

최근에 업무중 forEach로 순회하며 api 호출 후 결과를 받아서 다음 작업을 수행해야하는 경우가 있었다.

일단 api가 list형태로 파라미터를 던져서 한번에 조회 결과를 반환해주면 성능 면에서 더 좋을텐데, 굳이 단건 호출만 가능하도록 api를 제공하니 어쩔 수 없이 forEach로 순회하며 여러번 api를 호출할 수 밖에 없었다.

어쨋든 의도는 forEach로 순회하며, async 함수로 api를 호출 후 결과를 받아서 값을 셋팅해야 하는데, 돌려보니 비동기 호출 후 결과가 오기를 기다리지 않고 그냥 다음 순회를 돌아버리는 문제가 있었다.

forEach() expects a synchronous function — it does not wait for promises. Make sure you are aware of the implications while using promises (or async functions) as forEach callbacks.

mdn web docs를 찾아보니 forEach는 promises를 기다리지 않는다고 한다.

그래서 더 찾아보니 for of문을 이용하는 방법이 있는데, 이 방법은 순차적으로 처리하다 보니 병렬처리가 아니라서 순회건수가 많으면 시간이 오래걸리는 문제가 있고,

병렬처리를 위해서는 Promise.all()을 이용하는 방법이 있다.

비동기로 호출해야 하는 api 호출 부분을 Promise배열로 만들고, Promise.all()을 통해 실행하면 비동기 함수들을 병렬로 동시에 처리할 수 있다.

let apis = [];

const promises = this.sourceList.map(async (x) => {
	const api = await calledApi({key: x.value});
	apis.push(api);
});

await Promise.all(promises);

map()을 통해서 promise배열에 담아서, Promise.all()을 통해 실행할 수 있다.

결론은 순회하면서 비동기 처리가 필요하면 forEach대신에 map(async obj) 형태로 사용하면 된다.

JavaScript

javascript Object 내 key 존재여부 체크

Leave a comment

{} 오브젝트 안에 특정키가 존재하는지 체크하려면??

Object.keys()로 keyset을 추출해서 순회하면서 key name이 일치하는게 있는지 체크하려고 했으나.. 찾아보니 Object.hasOwnProperty를 제공하고 있어서, 바로 ObjectName.hasOwnProperty(key name)을 던져서 존재여부를 확인할 수 있었다.

다만 ESLint를 사용하는데 콘솔에 다음과 같은 메시지가 나온다.

Do not access Object.prototype method ‘hasOwnProperty’ from target object.

찾아보니 Object.prototype의 builtin 제공 메서드를 바로 사용하지 않도록 하는 규칙 때문이라고 하여 , 다음과 같이 사용하면 된다.

// 사용금지
customObject.hasOwnProperty('keyName')

// 권장
Object.prototype.hasOwnProperty.call(customObject, 'keyName')

참고 : https://stackoverflow.com/questions/39282873/object-hasownproperty-yields-the-eslint-no-prototype-builtins-error-how-to