javaScript-배열3

.join()

대상 배열의 모든 요소를 구분자로 연결한 문자를 반환.

 

const arr = ['Apple', 'Banana', 'Cherry']

console.log(arr.join())       // Apple,Banana,Cherry
console.log(arr.join(', '))   // Apple, Banana, Cherry
console.log(arr.join('/'))    // Apple/Banana/Cherry

---

.map()

대상 배열의 길이만큼 주어진 콜백을 실행하고, 콜백의 반환 값을 모아 새로운 배열을 반환

 

기존 배열 유지

const numbers = [1, 2, 3, 4]
const newNumbers = numbers.map(item => item * 2)

console.log(newNumbers) // [2, 4, 6, 8]
console.log(numbers) // [1, 2, 3, 4]

const users = [
	{ name: 'Dragon', age: 100},
	{ name: 'Lee', age: 62},
	{ name: 'Jay', age: 21}
]

const newUsers = users.map(user => {
	return {
    ...user,
    isValid: true,
    email: null
    }
})

console.log(newUsers)  
// 	{ name: 'Dragon', age: 100, isValid: true, email: null },
//	{ name: 'Lee', age: 62, isValid: true, email: null },
//	{ name: 'Jay', age: 21, isValid: true, email: null }

 

return에 있는 전개 연산자이다.

 

const newUsers = users.map(user => ({
    ...user,
    isValid: true,
    email: null
}))

newUsers의 화살표 함수 축소

 

---

.pop()

대상 배열에서 마지막 요소를 제거하고 그 요소를 반환

 

대상 배열 원본이 변경됨.

 

const fruits = ['Apple', 'Banana', 'Cherry']

console.log(fruits.pop())    // Cherry
console.log(fruits)  // ['Apple', 'Banana']

 

 

---

.push()

대상 배열의 마지막에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.

 

대상 배열 원본이 변경됨.

 

const fruits = ['Apple', 'Banana', 'Cherry']

const newLength = fruits.push('Orange')
console.log(newLength) //  4
console.log(fruits) //  ['Apple', 'Banana', 'Cherry', 'Cherry']

fruits.push('Mango', 'Strawberry')
console.log(fruits) // ['Apple', 'Banana', 'Cherry', 'Cherry', 'Mango', 'Strawberry']

 

 

---

.reduce()

대상 배열의 길이만큼 주어진 콜백을 실행하고, 마지막에 호출되는 콜백의 반환 값을 반환.

각 콜백의 반환 값은 다음 콜백으로 전달.

const numbers = [1, 2, 3]
const sum = numbers.reduce((accumulator, currentValue) => {
	return accumulator + currenValue
}, 0)

console.log(sum) // 6



// 화살표 함수를 깔끔하게 정리하면 
const sum = numbers.reduce((acc, cur) => acc + cur, 0)

동작 원리를 알아보자 

 

그 전에, }, 0); 이 부분을 보면 0이 있는데 이건 초기 누적값 이다.

 

콜백 함수의 첫 번째 매개변수인 accumulator에 전달된다.

 

배열의 첫 번째 요소인 '1' 이 currentValue에 전달된다.

 

그리고 콜백 함수에서 약어로 acc + cur 한 값을 반환하고 

다음 순회에서 acc로 반환한다.

 

 

즉, acc에 초기 값 0과 cur에 배열 첫 번째 요소 1을 더하면 1, 이걸 다시 acc에 반환.

초기 누적값 1 + cur에 배열 두 번째 요소 2를 더한다. 3, 이걸 다시 acc에 반환.

초기 누적값 3 + cur에 배열 세 번째 요소 3을 더한다. 6 최종적으로 6이 출력된다.

 

 

const users = [
  { name: 'Dragon', age: 100 },
  { name: 'Lee', age: 27 },
  { name: 'Jay', age: 30 }
];

// 총 나이 계산
const totalAge = users.reduce((acc, cur) => acc + cur.age, 0);
console.log(totalAge); // 157
//	console.log(`평균 나이: ${(totalAge / users.length).toFixed(1)}세`);  
//  평균 나이:  52.3세

// 모든 이름 추출
const namesArray = users.reduce((acc, cur) => {
  acc.push(cur.name);
  return acc;
}, []);

const names = namesArray.join(', ');

console.log(names); // Dragon, Lee, Jay

namesArray를 깔끔하게 줄여보자 

 

const names = users
	.reduce(() => {
    	acc.push(cur.name)
        return acc
    }, [])
    .join(', ')
console.log(names)