[JS] 순회 Method

[].forEach

[배열].forEach([Callback 함수]) : 배열의 원소 개수만큼 Callback 함수가 호출된다.
중간에 break 할 수 없습니다.

const array = [3,5,4,2];

array.forEach(e => console.log(e*2));

// 출력
6
10
8
4

Callback 함수를 호출하는 것이지, 무엇을 반환하지는 않습니다. 따라서, 무엇을 반환하여 값들을 새로운 배열에 담는 메세드는 map이다.

const array = [3,5,4,2];

const test = array.forEach(e => e*2);
console.log(test);  // undefined

[].map

각각의 요소들에 대해 어떤 작업을 진행한뒤 요소 수의 맞게 새로운 배열을 만든다.

const array = [3,5,4,2];

const test = array.map(e => e*2);
console.log(test);  // [6,10,8,4]

[].some

[배열].some([Callback 함수]) : 배열의 원소 개수만큼 Callback 함수가 호출하는데 Callback 함수의 조건에 맞는 원소가 하나라도 있으면 true를 반환하고, 하나도 없다면 false를 반환하다.

const arr = [1,2,3,4,5];

console.log(array.some(elembnet => element >3 )); // true
console.log(array.some(elembnet => element <0 )); // false

[].every

[배열].every([Callback 함수]) : 배열의 원소 개수만큼 Callback 함수가 호출하는데 Callback 함수의 조건에 모든 원소가 충족되면 true를 반환하고, 하나라도 충족되지 않는게 있다면 false를 반환하다.

const arr = [1,2,3,4,5];

console.log(array.every(elembnet => element >0 )); // true
console.log(array.every(elembnet => element <3 )); // false

[].find

[배열].every([Callback 함수]) : 배열의 원소 개수만큼 Callback 함수가 호출하는데 Callback 함수의 조건에 맞는 첫번쨰 원소를 반환한다.

const arr = [1,2,3,4,5];

console.log(array.find(elembnet => element >2 )); // 3

[].findIndex

[배열].every([Callback 함수]) : 배열의 원소 개수만큼 Callback 함수가 호출하는데 Callback 함수의 조건에 맞는 첫번째 원소의 인덱스를 반환한다.

const arr = [1,2,3,4,5];

console.log(array.find(elembnet => element >2 )); // 2

[].filter

배열에서 특정 조건을 만족하는 값들만 따로 새로운 배열에 담는다.

const array = [3,5,4,2];

const test = array.filter(e => e > 3);
console.log(test);  // [5,4]

[].reduce

배열에서 특정조건을 만족하는 값들만 따로 추출한다.
[배열].reduce((인자1,인자2) => {[return}, 초기값)
인자 1에는 결과 값 , 인자 2에는 현재 값, 초기값의 여부에 따라 출력값이 달라진다. return 값에 따라 결과 값이 달라지고, 마지막 return 값을 반환하게 된다.

초기값 없을 때

const array = [1,2,3,4,5];
// total는 값이 누적된다. ( 1, 3(1+2) , 6(3+3) , 10(6+4) , 15(10+5) )
// 초기값이 없을 때에는 맨 처음 실행할 때 total = datas[0]
// cur = datas[1]
const accResult = array.reduce((total,cur) => {
  console.log(total,cur);
  // total = totoal + cur로 누적
  return total + cur;
});
                             
console.log(accResult);

// 출력
1 2
3 3
6 4
10 5
15

초기값 있을 때

const array = [1,2,3,4,5];
const accResult = array.reduce((total,cur) => {
  console.log(total,cur);
  return total + cur;
},[]);
                             
console.log(accResult);

// 출력
[] 1
[1] 2
[3] 3
[6] 4
[10] 5
[15]

[].sort();

숫자 혹은 문자를 사전식으로 정렬해주는 함수입니다.
[배열].sort를 통해 사용할 수 있다. 하지만, 사전식으로 정렬해주는 다는 것을 유의하고 다음 코드를 살펴보자.

오름차순

const arr = ["다","라","가","마","나"];
arr.sort();
console.log(arr);  // 가 , 나, 다, 라, 마

-----------------------
  
const arr = [1,5,7,40,10,100,20];
arr.sort();
console.log(arr); // 1, 10, 100, 20, 40, 5, 7

이와 같이 문자열 정렬은 크게 문제될 것은 없지만, 숫자 정렬에서는 크기 정렬이 아닌 사전식 정렬이기 때문에 다음과 같은 문제가 발생하는데, 다음 코드를 통해 해결 가능합니다.

오름차순

const arr= [1,5,7,40,10,100,20];
arr.sort((a,b) => a-b);
console.log(arr);  // 1, 5, 7, 10, 20, 40, 100

내림차순

const arr= [1,5,7,40,10,100,20];
arr.sort((a,b) => b-a);
console.log(arr);  // 100, 40, 20, 10, 7, 5, 1

비구조화 할당

비구조화 할당 : 배열을 조금더 간편하게 변수에 담을 수 있는 방법이다.

const person = { age : 24, weigt : 30, height : 183 };

const age = person.age;
const weight = person.weight;
const height = person.height;

console.log(age); // 24
console.log(weight); // 30
console.log(height); // 183

__________________________________________
비구조화 할당


const {age,weight,height} = person;
console.log(age); // 24
console.log(weight); // 30
console.log(height); // 183