1. find() 메서드
- find() : 함수의 조건을 통과한 첫 번째 배열 요소 값을 반환하는 메서드입니다.
## 문법
find(함수명)
## 예제 - 20보다 큰 숫자 중자 중 첫번째 배열 요소를 찾음
var nums = [4,9,16,25,29];
function test(x){ //함수에 조건을 작성
return x > 20;
}
document.write(nums.find(test));
- 결과는 문서에 20보다 큰숫자에서 첫 번째 배열 요소인 25가 나옵니다.
2. findIndex() 메서드
- findIndex() : 함수의 조건을 통과한 첫 번째 배열 요소의 인덱스 번호를 반환하는 메서드입니다.
## 문법
findIndex(함수명);
## 예제 - 20보다 큰 숫자 중자 중 첫번째 배열 요소의 인덱스 번호를 찾음
var nums = [4,9,16,25,29];
function test(x){
return x > 20;
}
document.write(nums.findIndex(test));
- 25의 인덱스번호인 [3]을 반환합니다.
3. Array map()
- map() 메서드는 배열에 함수를 호출하여 새로운 배열을 만듭니다. 이건 실제로는 ES5에 나왔던 메서드입니다.
- 각 요소에 대해 한 번씩 함수를 호출하고 빈 요소에 대해서는 함수를 실행하지 않습니다.
- 원래 배열은 변경되지 않고 새로운 배열을 만듭니다.
## 문법
array.map(function(currentValue, index, arr), thisValue);- 함수 매개변수는 필수 작성입니다. 각 배열 요소에 대해 실행할 함수입니다.
- 함수 매개변수의 매개변수로 되어 있는 [ currentValue ] 는 현재 배열의 요소 값입니다. 영문을 무엇을 적든 상관없습니다. 역시 필수 요소입니다.
- 함수 매개변수의 매개변수로 되어 있는 [ index ] 는 현재 배열 요소의 인덱스 값입니다. 선택적 요소입니다.
- 함수 매개변수의 매개변수로 되어 있는 [ arr ] 는 현재 요소의 배열입니다. 선택적 요소입니다.
- [ thisValue ]는 this값으로 사용할 함수에 전달된 값입니다. 선택적 요소입니다.
- 보통은 함수를 하나 적으면 됩니다.
1) 배열 값을 제곱근으로 새로운 배열을 반환
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Array Method</title>
<script>
const nums = [4,9,16,25,36];
const newNums = nums.map(Math.sqrt);
document.write('기존배열값 : ' + nums + '<br>');
document.write('제곱근배열값 : ' + newNums + '<br>');
</script>
</head>
<body>
</body>
</html>- [ Math.sqrt ]는 제곱근을 구하는 수학 객체의 속성입니다.
## 결과 보기
- 결과가 잘 나오는 것이 확인됩니다.
2) 배열 값을 제곱으로 새로운 배열을 반환
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Array Method</title>
<script>
const nums = [3,5,6,7,9];
const newNums = nums.map(square);
function square(x){ //여기서 x는 기존 배열값
return x * x;
}
document.write('기존배열값 : ' + nums + '<br>');
document.write('제곱배열값 : ' + newNums + '<br>');
</script>
</head>
<body>
</body>
</html>
## 결과 보기
3) 배열의 값을 객체화했을 때 새로운 배열 반환
## 코드 보기
- 이번에는 어벤져스 멤버들 이름을 firstname과 lastname으로 나눠서 데이터를 처리하고 한 번에 반환해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Array Method</title>
</head>
<body>
<h3>Avengers</h3>
<ul id="avengersList">
</ul>
<script>
const avengers = [
{ firstname: 'Tony', lastname: 'Stark' },
{ firstname: 'Steve', lastname: 'Rogers' },
{ firstname: 'Bruce', lastname: 'Banner' },
{ firstname: 'Thor', lastname: 'Odinson' },
{ firstname: 'Natasha', lastname: 'Romanoff' },
{ firstname: 'Clinton', lastname: 'Barton' }
];
const ulTag = document.getElementById('avengersList');
let liTag = '';
function getFullName(item){
return [item.firstname,item.lastname].join(" ");
}
avengersName = avengers.map(getFullName);
for(let i in avengersName){
liTag += '<li>' + avengersName[i] + '</li>';
}
ulTag.innerHTML = liTag;
</script>
</body>
</html>- 배열객체의 [ join() ] 메서드는 배열을 문자열로 반환합니다.
- 매개변수를 통해서 배열 값 사이마다 문자열을 추가할 수 있습니다.
- 그래서 위에서는 공백으로 설정해봤습니다.
## 결과 보기
4. Array forEach()
- 배열을 반복할 때 사용하는 메서드입니다. 이건 실제로는 ES5에 나왔던 메서드입니다.
- [ forEach() ]는 배열 값 각각에 함수를 적용해서 처리합니다.
1) forEach문 확인
## 문법
array.forEach(function(currentValue, index, arr), thisValue);- 문법도 [ map() ]과 같기 때문에 따로 설명하지는 않도록 하겠습니다.
## 코드 보기
- 이번에는 2022년 야구 정규시즌 순위를 표시해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Array Method</title>
</head>
<body>
<h3>2022 KBO 정규리그순위</h3>
<div id="listBox">
</div>
<script>
const teams = ['SSG 랜더스','LG 트윈스','키움 히어로즈','KT 위즈','KIA 타이거즈','NC 다이노스','삼성 라이온즈','롯데 자이언츠','두산 베어스','한화 이글스'];
const listBox = document.getElementById('listBox')
let pTag = '';
teams.forEach(teamsOutput);
function teamsOutput(item, index){
pTag += '<p>' + (index + 1) + '위 : ' + item + '</p>';
}
listBox.innerHTML = pTag;
</script>
</body>
</html>- 배열(teams)에 프로야구 구단들을 담았습니다.
- 그리고 그것을 순위와 함께 배열 값을 각각 반환할 것이라서 [ teamsOutput ]이라는 함수의 매개변수에 [ item ]과 [ index ]를 둘 다 사용했습니다.
## 결과 보기
- 결과가 이렇게 잘 나오는 것이 확인됩니다.
2) map()과 forEach문 차이
- 위의 [ map() ]과 비슷해보이지만, [ map() ]은 새로운 배열로 사용된다면, [ forEach() ]는 배열 값 각각에 함수를 적용해서 처리합니다.
- 기존 배열이 바뀌지도 않고, 새로운 배열에 처리하려면 push() 메서드를 사용해야 합니다.
## 코드 보기
- 2배를 처리하는 함수를 적용 후 콘솔창에 추가하면 어떻게 되는지 볼게요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Array Method</title>
</head>
<body>
<script>
const arr01 = [1, 2, 3, 4, 5];
const newArr01 = arr01.map(item => item * 2);
console.log(arr01);
console.log(newArr01);
console.log('============================');
const arr02 = [1, 2, 3, 4, 5];
const newArr02 = arr02.forEach(item => item * 2);
const newArr03 = [];
arr02.forEach(item => newArr03.push(item * 2));
console.log(arr02);
console.log(newArr02);
console.log(newArr03);
</script>
</body>
</html>- arr01 에 숫자 배열을 담고, newArr01 에는 map() 을 통해서 2배값을 새롭게 반환했습니다.
- 그리고 콘솔 창에 arr01 과 newArr01 을 호출했습니다.
- arr02 에도 숫자 배열을 담고, newArr02 에는 forEach() 을 통해서 2배값을 새롭게 작성했습니다.
- newArr03 은 빈비열 처리하고, 아래 구문에는 forEach() 를 사용하여 push() 통해 각각의 요소 값을 마지막 배열 값으로 두배로 처리해서 담아 줍니다.
- 그리고 콘솔 창에 arr02 과 newArr02 , newArr03 을 호출했습니다.
## 결과 보기
- 첫번째 줄은 원래 값이 잘 반환되었고, 두번째 줄도 map을 통해 두배값이 잘 반환됩니다.
- 세번째 줄도 원래 값으로 반환되고, 네번째 줄은 undefined 로 반환되지 않습니다. 그러니까 forEach() 는 배열을 만드는 메서드가 아닙니다.
- 그리고 마지막 줄과 같이 반환이 되려면 굳이 빈배열을 선언하고 거기에 push () 메서드까지 사용해야 합니다.
- 이렇기 때문에 새로운 배열을 반환하고 싶었던 거라만 map() 를 사용해야 합니다.
4. filter()
- 함수에서 제공하는 테스트를 통과하는 요소로 채워진 새 배열을 만듭니다. 원래 배열을 변경하지 않습니다.
- 빈 요소에 대해서는 함수를 실행하지 않습니다.
- 역시 ES6가 아닌 ES5에서 나온 메서드입니다.
## 문법
array.filter(function(currentValue, index, arr), thisValue);- 문법도 [ map() ]과 같기 때문에 따로 설명하지는 않도록 하겠습니다.
## 코드 보기
- 이번에는 숫자 3,5,6,7,9 중 7만 제외하고 새로운 배열에 반환해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Array Method</title>
<script>
const nums = [3,5,6,7,9];
const newNums = nums.filter(misfortune);
function misfortune(num){
return num !== 7;
}
document.write('기존배열값 : ' + nums + '<br>');
document.write('7없는 배열값 : ' + newNums + '<br>');
</script>
</head>
<body>
</body>
</html>- misfortune이라는 함수에 num값 중 7과 같지 않은 값만 반환합니다.
- 그것을 filter메서드의 매개변수로 담아 줍니다.
## 결과 보기
- 결과가 이렇게 잘 나오는 것이 확인됩니다.
6. ** - 지수연산자
- 지수 연산자는 ES7에서 나왔지만, 브라우저들이 인식을 잘하므로 예제를 보도록 하겠습니다.
## 예제
alert(5 ** 3); //5의 3승 - 5 * 5 * 5
- 5의 3승이라는 뜻으로 5 곱하기 5 곱하기 5로 결과는 [125]를 반환합니다.
'웹언어 > 자바스크립트 - ES6' 카테고리의 다른 글
| [ES6강좌] 8강 JS Callback - 오쌤의 니가스터디 (0) | 2022.11.23 |
|---|---|
| [ES6강좌] 8강 반복문 - for of - 오쌤의 니가스터디 (0) | 2022.11.08 |
| [ES6강좌] 6강 Import & Export 모듈화 - 오쌤의 니가스터디 (0) | 2021.03.01 |
| [ES6강좌] 5강 비구조화 할당(destructuring assignment) - 오쌤의 니가스터디 (2) | 2021.03.01 |
| [ES6강좌] 4강 Class 문법추가 - 오쌤의 니가스터디 (0) | 2021.03.01 |
