[Javascript]Array 내장 함수

안녕하세요 건브로입니다!!

오늘은 유용하게 사용하는 Array 내장 함수에 대해서 간단하게 알아보려고 합니다!

 

1. map 함수

const celebrities = ['헤이즈', '박보영', '송중기', '치즈', '조이'];

//for문 사용해서 하나씩 출력하기
for(let i = 0; i< celebrities.length ; i++){
	console.log(celebrities[i]+"는 제가 좋아하는 연예인입니다.");
}

//결과
//헤이즈는 제가 좋아하는 연예입니다.
//박보영는 제가 좋아하는 연예입니다.
//송중기는 제가 좋아하는 연예입니다.
//치즈는 제가 좋아하는 연예입니다.
//조이는 제가 좋아하는 연예입니다.

//for문과 동일한 기능으로 사용하기
celebrities.map((celebrity)=>{
	console.log(celebrity+"는 제가 좋아하는 연예입니다.");
});

//결과
//헤이즈는 제가 좋아하는 연예입니다.
//박보영는 제가 좋아하는 연예입니다.
//송중기는 제가 좋아하는 연예입니다.
//치즈는 제가 좋아하는 연예입니다.
//조이는 제가 좋아하는 연예입니다.

//return 값을 받아 새로운 배열 만들기(배열 길이는 동일)
const celebrities_number = celebrities.map((celebrity, index)=>{
	console.log(celebrity+"는 제가 좋아하는 연예입니다.");
    return index;
});
console.log(celebrities_number);
//결과
//헤이즈는 제가 좋아하는 연예입니다.
//박보영는 제가 좋아하는 연예입니다.
//송중기는 제가 좋아하는 연예입니다.
//치즈는 제가 좋아하는 연예입니다.
//조이는 제가 좋아하는 연예입니다.
//[0,1,2,3,4]

//for문의 다른 형태1
for(celebrity of celebrities){
	console.log(celebrity+"는 제가 좋아하는 연예인입니다.");
}
//결과
//헤이즈는 제가 좋아하는 연예입니다.
//박보영는 제가 좋아하는 연예입니다.
//송중기는 제가 좋아하는 연예입니다.
//치즈는 제가 좋아하는 연예입니다.
//조이는 제가 좋아하는 연예입니다.

//for문의 다른 형태2
for(celebrity in celebrities){
	console.log(celebrity+"는 제가 좋아하는 연예인입니다.");
}

//결과
//0는 제가 좋아하는 연예입니다.
//1는 제가 좋아하는 연예입니다.
//2는 제가 좋아하는 연예입니다.
//3는 제가 좋아하는 연예입니다.
//4는 제가 좋아하는 연예입니다.

const celebrity_obj = {
	name:"헤이즈",
    age:31
}

for(person in celebrity_obj){
	console.log(person);
}
//결과
//name
//age

//=> of일 때는 키값을 가지고 오지만 in일 때는 키만 가지고 온다.

map 함수에 대해서 다루면서 for문의 여러 가지 종류도 다뤄봤습니다.

어떤가요? 생각보다 많죠? 사용하다 보면 외워질 거예요.

 

map함수는 return 값이 있는 함수입니다.

그래서 새로운 배열을 생성해낼 수 있어요.

만약, React.js에 관심 있으시면 map 함수를 알아두셔야 합니다.

동적으로 렌더링 할 때 많이 사용하거든요!

 

우리가 자주 사용하는 for문은 범위를 정해두고 사용하기 때문에

교육용으로는 좋지만 실생활에서 좋은지는 모르겠습니다. 

실생활에서는 예기치 못한 일도 생기기 때문에 동적으로 배열이 생긴다고

가정하고 코드를 짜는 게 편하기 때문에 for in과 for of 많이 사랑해주세요!

 

※주의사항: for of문은 배열일 때 사용하자 

객체일 때 사용하면 'VM105:1 Uncaught TypeError: celebrity_obj is not iterable' 오류가 나옵니다.

 

2. filter 함수

 

const celebrities = ['헤이즈', '박보영', '송중기', '치즈', '조이'];
const three_string = celebrities.filter((celebrity)=>celebrity.length === 3);
console.log(three_string);

//결과
//["헤이즈", "박보영", "송중기"]

 

filter함수를 사용하면 기존 배열 값들을 걸러 낼 수 있습니다.

그래서 map함수와 공통점도 있지만, 차이점도 있어요,

	filter	map
공통점	새로운 배열 생성	새로운 배열 생성
차이점	기존 배열과 새로 만들어진 배열의 길이가 다를 수도 있다.	기존 배열과 새로 만들어진 배열의 길이는 같다.

 

3. concat 함수

 

const favorite_movies = ["나는 전설이다", "어벤져스:엔드게임", "바보"];
const people = ["건브로는 ", "헤이즈는 ", "치즈는 "];

const people_movies = people.map((person, index)=>{
	return person.concat(favorite_movies[index]).concat(" 영화를 좋아해");
});
//결과
//["건브로는 나는 전설이다 영화를 좋아해", "헤이즈는 어벤져스:엔드게임 영화를 좋아해", "치즈는 바보 영화를 좋아해"]

 

concat 함수는 배열과 배열을 붙여줄 때 사용합니다.

그리고 만약 두 배열의 값이 겹칠 때가 있을 때는 그냥 중복돼서 붙여지므로 주의해야 합니다.

 

4. from 함수

 

const favorite_song = "추억은 사랑을 닮아";
const song_array1 = Array.from(favorite_song);
const song_array2 = favorite_song.split(" ");
console.log(song_array1);
console.log(song_array2);

//결과
//["추", "억", "은", " ", "사", "랑", "을", " ", "닮", "아"]
//["추억은", "사랑을", "닮아"]

const song_array3 = Array.from(favorite_song,(song, index)=>{
	return index;
});

//결과
//[0,1,2,3,4,5,6,7,8,9]

 

from 함수는 유형이 2개가 있습니다.

그냥 일반적으로 인덱스가 필요하지 않고 값만 필요할 때 

문자열을 배열의 각각의 요소로 나눠 버립니다.

 

그리고 인덱스가 필요하거나, return 값을 바꾸고 싶을 때는

 favorite_song 뒤에 있는 콜백 함수를 이용해서 조정 가능합니다.

 

5. reduce 함수

const favorite_song = "추억은 사랑을 닮아";
const song_array2 = favorite_song.split(" ");
console.log(song_array2);
const value = song_array2.reduce((accumulator, currentValue)=>accumulator + currentValue);
console.log(value);

//결과
//["추억은", "사랑을", "닮아"]
//추억은사랑을닮아

 

reduce 함수는 from 함수와 반대라고 생각해도 될 것 같아요.

즉, 배열의 각 요소에 대해 콜백 함수를 실행하고, 하나의 결과 값을 반환하는 겁니다!

 

잘 생각해보면 from과 반대되는 개념이니까 굳이

여러 개의 결과 값을 반환할 필요는 없잖아요!

 

오늘은 이렇게 Array 내장 함수에 대해서 다뤄봤습니다.

저는 이 개념들을 다 외우지는 않았지만, 

계속 사용해보며 손에 익게 하려고 해요.

여러분들도 많이 사용해서 손으로 외워봐요!

굿 나잇!