코딩하는 김딸기
배열 함수 예제 의문 해결 본문
function printResult(array) {//✨array를 매개변수로 전달받음
let resultArray = '' //❔문제1) 함수내에서 선언해야하는 이유
array.forEach(( value,index) => { //✨전달받은 결과 배열의 각 요소(인덱스, 값) //❔문제2)value,index 순서
//array.forEach((index.value)=>{}) //resultArray에 각 배열의 요소마다 입력받는 array값 추가하기
resultArray += `<li>${value}</li>`//✨최종출력배열에 li형식으로 할당
})
resultNode.innerHTML=resultArray=//❔문제3)resultNode.innerHTML(resultArray)이 안되는 이유
}
- 문제1) 함수 내에서 resultArray를 선언해야 하는 이유: 함수 내에서 변수를 선언하는 것은 해당 변수의 범위(scope)를 제어하기 위해서입니다. resultArray를 함수 내에서 선언하지 않으면, 그 변수는 전역 변수로 간주되어 함수 외부에서도 접근 및 수정이 가능합니다. 이는 의도하지 않은 변수 값의 변경 등으로 이어질 수 있어, 함수 내에서의 변수를 지역 변수로 선언하는 것이 코드의 안정성과 가독성을 높입니다. =>즉 resultArray는 printArray함수내에서 사용되므로! 외부에서 선언되면 함수를 사용할때마다 다른값이 들어가게 된다.
- 문제2) value, index 순서: forEach() 메서드는 배열의 각 요소를 순회하며, 콜백 함수에 첫 번째 인자로 배열의 값(value), **두 번째 인자로 인덱스(index)**를 전달합니다. 즉, value는 해당 인덱스의 요소 값을 의미하고, index는 그 요소의 위치(숫자)를 의미합니다. 순서는 **(value, index)**로 고정되어 있어, 이를 반대로 쓰면 오류가 발생하거나 예상하지 못한 결과가 나옵니다.=>이것은 그냥 문법, forEach(value,index)는 고정된 값이다
- 문제3) resultNode.innerHTML(resultArray)가 안 되는 이유: innerHTML은 속성이므로 함수처럼 괄호를 사용할 수 없습니다. 올바른 구문은 **resultNode.innerHTML = resultArray;**로, innerHTML은 할당 연산자를 통해 문자열 값을 대입해야 합니다. innerHTML(resultArray)는 함수 호출처럼 보이기 때문에 JavaScript에서 구문 오류로 처리됩니다. =>기본 문법, 즉 innerHTML에 출력값을 할당하는 것이다
function filter() {
let resultArray=wordArray.filter((value)=>{ //❔문제1) filter함수안의 value의 뜻은?
return value.length>5 //❔문제2) 왜 if문을 안쓰고 바로 value의 길이연산후 리턴시킬까
})
printResult(resultArray)
}
- 문제1) filter 함수 안의 value의 뜻: filter() 함수는 배열의 각 요소를 순회하면서, 조건에 맞는 요소들만 새로운 배열로 반환하는 메서드입니다. 이때 value는 **배열의 각 요소(즉, 배열의 값)**를 의미합니다. wordArray라는 배열의 각 요소가 차례로 value라는 이름으로 전달되어, 그 값에 대한 조건 검사를 하게 됩니다.
- 문제2) if문을 안 쓰고 바로 value.length > 5 조건을 리턴시키는 이유: filter() 함수는 내부적으로 조건을 만족하는지 여부를 판단하여 true/false 값을 반환하는 콜백 함수가 필요합니다. 따라서, value.length > 5라는 표현식이 true 또는 false로 평가되면, 자동으로 그 값을 기반으로 배열을 필터링합니다.-> 즉 value중 조건에 대해 true인 값들로만 배열을 생성해 리턴
- if문을 쓸 필요가 없는 이유는, filter() 메서드 자체가 조건을 처리하는 역할을 하므로, 단순히 조건을 반환하기만 하면 됩니다. 예를 들어, if (value.length > 5) { return true; } else { return false; }는 장황하며, return value.length > 5;로 간단히 줄일 수 있습니다.
function sort() {
let resultArray=wordArray.sort((data1,data2)=>{ //❔문제1) 매개변수가 2개인 이유는?
if(data1>data2) return 1 //❔문제2)왜 1,0,-1을 반환하는데 정렬이 되는가?
else if(data1==data2) return 0
else return -1
})
printResult(resultArray)
}
- 문제1) 매개변수가 2개인 이유: sort() 함수는 배열의 요소들을 비교하여 정렬할 때 **두 개의 요소(data1, data2)**를 비교합니다. 이 두 요소는 배열에서 서로 비교할 값들입니다. sort() 메서드는 기본적으로 배열을 두 개의 값을 비교하면서 순서대로 재배치합니다. 두 값(data1과 data2)을 비교한 결과에 따라 순서를 정하게 되는 것입니다.
- 문제2) 왜 1, 0, -1을 반환하는데 정렬이 되는가? sort() 함수는 비교 함수의 반환 값을 기반으로 배열의 요소를 재정렬합니다. 반환 값이:
- 1이면, 첫 번째 값(data1)이 두 번째 값(data2)보다 크다는 의미로, 배열에서 두 요소의 위치를 바꿉니다.
- 0이면, 두 값이 동일하다는 의미로, 위치를 바꾸지 않습니다.
- -1이면, 첫 번째 값이 두 번째 값보다 작다는 의미로, 위치를 그대로 유지합니다.