typescript tutorial(3탄)

5. 원소 순회

5-1. for-in

[참고 1] for-in 예제

 

5-2. forEach

→ ES5부터 ForEach 메소드가 추가, 이 메소드는 배열의 원소를 인자로 받는 콜백 함수를 인자로 받아, 배열내의 각 원소에 대해 해당 콜백을 실행한다.

 

[참고 2] forEach 예제 1

→ [참고 2]의 예제를 보면 이해할 수 있는데, 배열의 원소, 즉 ,langs나 langs2의 배열의 원소를 인자로 받아서 출력하는 결과를 확인 할 수 있다. 단점은 반복문 중간에 break 혹은 return 등을 사용해 실행흐름을 제어할 수 없다.

 

 

5-3. for-of

→ ES6버전에서는 ForEach(ES5 버전)의 단점인 반복문 중간에 break 혹은 return등의 실행흐름을 제어할 수 없다는 단점을 보완하기 위해 추가되었다.

 

[참고 3] for-of 예제 1

- for-of 문법과 for-in 문법의 차이점

for (const elem in arr) { ... } 의 elem에는 원소의 키에 해당하는 문자열이 바인딩 된다.

한편 for (const elem of arr) { ... } 의 elem에는 원소의 실제 값이 바인딩 된다.

예를 들어, arr가 함수의 배열([ () => 42, () => true])이라면,

for-in의 elem에는 각 함수의 인덱스 문자열("0", "1")이 바인딩 된다.

for-of 문법의 elem에는 실제 함수값(() => 42, () => true)이 바인딩 된다.

 

주의할점) Object에 사용 가능한 것은 아니다.

 

6. 비동기 처리

→ 콜백 헬의 대안으로 나온 Promise.

ahnheejong.gitbook.io/ts-for-jsdev/02-ecmascript/handling-asynchronous/promises

2.6.1 프로미스

→ Promise는 콜백을 이용한 사용 패턴의 문제 중 상당부분을 해소했지만, 완벽한 해결책은 아니라, ECMAScript 2017에 추가된 Async / Await 문법은 비동기 코드를 동기 코드처럼 쓸 수 있게 해줌.

ahnheejong.gitbook.io/ts-for-jsdev/02-ecmascript/handling-asynchronous/async-await

2.6.2 Async / Await