[Level up] 데이터(3) - 배열(1)

01.Array.prototype.index()

• 0부터 시작하는 배열 데이터 내부에 들어있는 데이터의 위치를 가리키는 숫자
• 인덱싱(indexing): numbers[1], fruits[2]와 같이 배열 데이터 내의 요소에 접근하기 위해 대괄호 안에 숫자를 표기하는 것
• 요소(element), 아이템(item): 배열 데이터 내의 값

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

console.log(numbers[1]) // 2
console.log(fruits[2]) // Cherry

02.Array.prototype.length()

• 배열 데이터의 속성으로 배열 아이템의 개수를 반환 (배열의 길이를 반환)

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

console.log(numbers.length) // 4
console.log(fruits.length) // 3
console.log([1, 2].length) // 2
console.log([].length) // 0

03.Array.prototype.find()

• find(); 메소드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다.
• 그런 요소가 없다면 undefined를 반환합니다.

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10); // 화살표 함수에서 매개변수 하나는 괄호처리 없이 사용 가능하다. element는 매개변수를 의미

console.log(found); // 12
// 배열의 item들을 하나씩 element 매개변수에 대입하여 10보다 큰지 비교 연산하여 배열 리스트중에서 조건을 만족하는 가장 첫 번쨰 item을 반환합니다.

04.Array.prototype.concat()

• 두 개의 배열 데이터를 병합하여 만들어진 새로운 배열을 반환합니다.
• concat();을 사용해도 원본의 배열 데이터에는 아무런 영향이 없습니다.

const numbers = [1, 2, 3, 4];
const fruits = ['Apple', 'Banana', 'Cherry'];

console.log(numbers.concat(fruits)); // [1, 2, 3, 4, 'Apple', 'Banana', 'Cherry']

05.Array.prototype.forEach()

• 배열 아이템의 갯수만큼 인수로 사용된 콜백 함수가 순서대로 반복 실행됩니다.
• 반환 값 없음

const numbers = [1, 2, 3, 4];
const fruits = ['Apple', 'Banana', 'Cherry'];

frutis.forEach(function (element, index, array) {
  console.log(element, index, array);
})
// Apple 0 (3) ['Apple', 'Banana', 'Cherry']
// Banana 1 (3) ['Apple', 'Banana', 'Cherry']
// Cherry 2 (3) ['Apple', 'Banana', 'Cherry']

• forEach (반환 값 없음)

const numbers = [1, 2, 3, 4];
const fruits = ['Apple', 'Banana', 'Cherry'];

const a = fruits.forEach(function (item, index) {
	console.log("익명 함수", `${item}-${index}`);
});
// 익명 함수 Apple-0
// 익명 함수 Banana-1
// 익명 함수 Cherry-2

console.log(a) // undefined, 반환되는 값이 없기 때문에 undefined 출력

const a2 = fruits.forEach((item, index) => {
	console.log("화살표 함수", `${item}-${index}`);
});
// 화살표 함수 Apple-0
// 화살표 함수 Banana-1
// 화살표 함수 Cherry-2

console.log(a2) // undefined, 반환되는 값이 없기 때문에 undefined 출력

06.Array.prototype.map()

• 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
• map(); 메소드의 인수로 사용된 콜백 함수에서 반환된 데이터로 새로운 배열을 반환합니다.
• 반환 값 있음

• map (반환 값 있음)

const numbers = [1, 2, 3, 4];
const fruits = ['Apple', 'Banana', 'Cherry'];

// 1.map(익명 함수 { 문자 데이터 });
const b = fruits.map(function (item, index) {
	return `${item}-${index}`;
})

console.log(b); // (3) ['Apple-0', 'Banana-1', 'Cherry-2']

// 2.map(익명 함수 { 객체 데이터 });  
const c = fruits.map(function (item, index) {
	return {
		id: index,
		name: item
	}
})

console.log(c);
// {id: 0, name: 'Apple'}, {id: 1, name: 'Banana'}, {id: 2, name: 'Cherry'}

// 3.map(화살표 함수 { 객체 데이터 });  
const c2 = fruits.map((item, index) => ({
	id: index,
	name: item
}))

console.log("화살표 함수", c2); 
// {id: 0, name: 'Apple'}, {id: 1, name: 'Banana'}, {id: 2, name: 'Cherry'}

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

• 참고 사이트
  Array mdn 바로가기