AngularJS의 forEach() 함수는 Iterator 객체를 활용하여 객체 컬렉션이나 배열의 요소를 순회(iterate)하는 데 사용됩니다. 각 요소를 처리할 때마다 iterator 함수가 호출되며, 이때 (value, key, obj) 세 가지 인자가 함께 전달됩니다.
- value – 객체의 속성 값 또는 배열의 개별 요소를 나타냅니다.
- key – 객체 속성의 키 또는 배열 요소의 인덱스를 나타냅니다.
- obj – 순회 대상이 되는 전체 객체 자체를 나타냅니다.
참고로 forEach() 함수는 상속된(inherited) 속성까지는 순회하지 않으며, 객체 자신이 직접 가진 속성만 대상으로 합니다. 또한 네이티브 JavaScript의 Array.prototype.forEach()와 달리, AngularJS의 angular.forEach()는 배열뿐 아니라 일반 객체도 순회할 수 있다는 장점이 있습니다.
문법(Syntax)
angular.forEach(obj, iterator, [context])
- obj: 순회할 객체 또는 배열
- iterator: 각 요소마다 실행될 콜백 함수
- [context] (선택): 콜백 함수 내부에서
this로 참조될 객체
예제 – forEach()로 값 순회하기
Angular 프로젝트 디렉터리에 "forEach.html" 파일을 생성한 뒤, 아래 코드 스니펫을 복사하여 붙여넣어 보세요.
<!DOCTYPE html>
<html>
<head>
<title>angular.forEach()</title>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js">
</script>
</head>
<body ng-app="app" ng-cloak style="padding:30px">
<h1 style="color:green">
Welcome to Tutorials Point
</h1>
<h2>AngularJS | angular.forEach()</h2>
<p>Employee Names:</p>
<div ng-controller="demo">
<div ng-repeat="name in names">
<ul><li>{{name}}</li></ul>
</div>
</div>
<!-- Script for passing the values and checking... -->
<script>
var app = angular.module("app", []);
app.controller('demo', ['$scope', function ($scope) {
$scope.names = [];
var values = [{name: 'John'},
{name: 'Steve'},
{name: 'Bill'},
{name: 'Clark'},
{name: 'Tim'}];
angular.forEach(values, function (value, key) {
$scope.names.push(value.name);
});
}]);
</script>
</body>
</html>위 예제에서는 이름 정보를 담은 객체 배열을 angular.forEach()로 순회하면서, 각 객체의 name 값을 추출해 $scope.names 배열에 추가합니다. 그리고 뷰에서는 ng-repeat 디렉티브를 사용해 추출된 이름 목록을 화면에 렌더링합니다.
실행 결과(Output)
위 코드를 실행하려면 해당 파일을 일반 HTML 파일처럼 브라우저에서 열기만 하면 됩니다. 그러면 브라우저 창에 다음과 같은 결과가 표시됩니다.
forEach() 실행 후 화면에 출력되는 직원 이름 목록 –
