코딩하는 김딸기
array 함수 예제 (map, filter, sort) 본문
<body>
english word
<input type="text" id="word">
<button id="addBtn" onclick="add()">add</button>
<br>
<button id="mapBtn" onclick="map()">map</button>
<button id="filterBtn" onclick="filter()">filter</button>
<button id ="sortBtn" onclick="sort()">sort</button>
<br>
<ul id="result"></ul>
<script src="main.js"></script>
</body>
변수 설정
"use strict"
let inputNode=document.getElementById('word')
let addNode = document.getElementById('addBtn')
let mapNode = document.getElementById('mapBtn')
let filterNode = document.getElementById('filterBtn')
let sortNode = document.getElementById('sortBtn')
let resultNode = document.getElementById('result')
let wordArray = []//빈 배열 선언
- HTML 페이지에 있는 word, addBtn, mapBtn, filterBtn, sortBtn, 그리고 result라는 ID를 가진 요소를 각각의 변수에 저장합니다.
- wordArray는 사용자가 입력한 단어들을 저장하는 빈 배열입니다.
printResult 함수
function printResult(array) {//화면 출력함수
let result = ''
array.forEach((value, index) => {
result += `<li>${value}</li>`
});
resultNode.innerHTML = result
}
- 이 함수는 배열을 받아서 화면에 단어 목록을 출력하는 역할을 합니다.
- 배열의 각 요소를 HTML <li> 태그로 감싸서 resultNode에 추가합니다.
- forEach(): 배열의 각 요소에 대해 주어진 함수를 한 번씩 실행하는 메서드입니다. 반환값이 없으며, 단순히 배열 요소들에 대해 순차적으로 작업을 수행합니다.
- innerHTML: DOM 요소의 HTML 콘텐츠를 설정하거나 가져오는 속성입니다.->화면에 출력
구동 방식:
- array 매개변수로 전달된 배열을 forEach()를 사용해 각 요소와 그 인덱스를 반복합니다. => forEach로 모든 배열 반복
- 각 요소를 <li> 태그로 감싸서 문자열(result)로 만듭니다. =>결과값 하나씩 li에 넣어 result에 추가
- 완성된 문자열을 resultNode.innerHTML에 할당하여, HTML로 변환하고 화면에 표시합니다.=>최종 결과 화면에 출력
add 함수
function add() { //단어추가함수
let word = inputNode.value//인풋데이터 값을 word에 저장
wordArray.push(word)
printResult(wordArray)
}
- 사용자가 입력한 단어를 가져와 wordArray 배열에 추가하고, 이를 화면에 출력합니다.
- inputNode.value: 이 문법은 HTML의 <input> 요소에서 사용자가 입력한 값을 가져옵니다.
- push(): 배열 메서드로, wordArray에 새로운 요소(단어)를 추가합니다.
- printResult(): 이 함수는 add() 함수 내에서 wordArray에 추가된 단어들을 화면에 출력하는 역할을 합니다.
구동 방식:
- 사용자가 입력한 단어를 inputNode.value로 가져옵니다. => 입력한 inputNode값을 word에 넣기
- 그 단어를 wordArray 배열에 push()로 추가합니다. =>입력한 word값을 하나씩 wordArray배열에 삽입
- 배열에 추가된 단어가 화면에 출력되도록 printResult() 함수를 호출하여 결과를 갱신합니다. =>최종 wordArray출력
map 함수
function map() {
let resultArray = wordArray.map((value) => {
return value.toUpperCase()
})
printResult(resultArray)
}
- 배열의 모든 단어를 대문자로 변환한 새로운 배열을 만들고 이를 화면에 출력합니다.
- map(): 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과로 새로운 배열을 생성하는 메서드입니다. 이 메서드는 원본 배열을 변경하지 않고, 반환된 새로운 배열을 기반으로 작업을 수행합니다.
- toUpperCase(): 문자열 메서드로, 문자열을 대문자로 변환합니다.
구동 방식:
- wordArray에 저장된 각 단어에 대해 map()을 사용하여, 각 단어를 대문자로 변환합니다. =>resultArray는 wordArray의 모든 값에 map함수를 적용시킨 것/ map함수는 각 배열 데이터를 대문자로 변화
- 변환된 배열은 resultArray에 저장됩니다. =>변환한 데이터 값을 resultArray에 대임
- printResult(resultArray)를 호출하여, 대문자로 변환된 배열을 화면에 출력합니다.=>결과값인 resultArray 출력
filter 함수
function filter() {
let resultArray = wordArray.filter((value) => {
return value.length > 5
})
printResult(resultArray)
}
- 단어의 길이가 5자 이상인 단어만 필터링하여 새로운 배열을 만들고 이를 출력합니다.
- filter(): 배열의 각 요소를 조건에 따라 필터링하여, 조건을 만족하는 요소들로만 이루어진 새로운 배열을 반환합니다. 원본 배열을 변경하지 않습니다.
- length: 문자열의 길이를 나타내는 속성입니다. 각 단어의 길이를 확인하여 필터링할 때 사용됩니다.
구동 방식:
- wordArray 배열의 각 단어에 대해 filter()를 사용해, 단어의 길이가 5보다 큰지 확인합니다. =>filter함수는 wordArray의 모든 데이터값의 각 길이가 5이상이도록 함
- 조건을 만족하는 단어들만 새로운 배열(resultArray)에 저장됩니다. =>길이가 5이상인 데이터만 resultArray에 대임
- printResult(resultArray)로 필터링된 단어들을 화면에 출력합니다. => 결과값인 resultArray 출력
sort 함수
function sort() {
let resultArray = wordArray.sort((data1, data2) => {
if (data1 > data2) return 1
else if (data1 == data2) return 0
else return -1
})
printResult(resultArray)
}
- 배열의 단어들을 알파벳 순서대로 정렬하고 이를 출력합니다.
- sort(): 배열을 정렬하는 메서드입니다. 기본적으로는 문자열의 유니코드 순서에 따라 정렬하지만, 비교 함수를 제공하면 사용자 정의 방식으로 정렬할 수 있습니다.
- 비교 함수 (data1, data2)는 두 요소를 비교하여:
- 1을 반환하면 첫 번째 값이 더 큰 경우 (오름차순),
- 0을 반환하면 두 값이 같은 경우,
- -1을 반환하면 첫 번째 값이 더 작은 경우로 정렬됩니다.
구동 방식:
- wordArray 배열의 각 요소를 sort()로 비교하여 사전순(알파벳 순서)으로 정렬합니다. =>sort함수는 wordArray의 각 데이터의 크기를 비교해 정렬하는 함수
- 비교 함수에서 첫 번째 단어(data1)가 두 번째 단어(data2)보다 크면 1을 반환하여 오름차순으로 정렬됩니다.=>resultArray에 오름차순으로 정렬된 데이터값 대입
- 정렬된 배열이 resultArray에 저장되고, printResult(resultArray)로 결과가 화면에 출력됩니다.