Array 객체의 여러 함수들

concat() 함수

 

기존의 배열에 또 다른 배열이나 값을 합쳐서 새로운 배열을 만드는 함수

let nums = ["1", "2", "3"];
let chars = ["a", "b", "c"];

let a = nums.concat(chars);
console.log(a);

 

a는 [ '1', '2', '3', 'a', 'b', 'c' ] 가 출력된다.
기존의 nums, chars 두 배열의 원본에는 영향을 주지않는다.

 

 

 

 

join() 함수

배열 요소를 연결한다. 괄호안에 구분 기호를 넣어주면 된다.

let nums = ["1", "2", "3"];
let a = nums.join('-')
console.log(a)

 

구분 기호를 지정하지않으면 쉼표로 요소를 구분한다.

 

구분 기호를 '-'로 넣으니 1-2-3이 출력됐다

 

push(),usshfit() 함수

배열의 맨 끝에 요소를 추가하려면 push() 함수를,
배열의 맨 앞에 요소를 추가하려면 usshfit()함수를 사용하면 된다.

 

let nums = ["1", "2", "3"];
nums.push("4", "5");
console.log(nums)

nums.unshift("0")
console.log(nums)

push(),usshfit() 함수 둘 다 배열의 원본을 바꾼다.

 

 

 

 

pop(),shift() 함수

pop() 함수는 배열의 마지막 요소를 추출하고 반환한다
shift() 함수는 배열의 첫 요소를 추출하고 반환한다

 

let study = ["html", "css", "javascript"];
study.pop()
console.log(study)

study.shift()
console.log(study)

 

pop(),shift() 둘 다 원본을 바꾼다.

 

 

 

splice() 함수

let number = [0,1,2,3,4,5];
number.splice(2)
console.log(number)

splice(인덱스값)은 인덱스 값부터 끝 값까지 모두 삭제하고 반환한다.
원본에는 삭제 결과가 반영된 요소들만 남는다.
위의 코드에서 number은 [0,1]만 남게된다.

 

let number = [0,1,2,3,4,5];
number.splice(2,1)
console.log(number)

만약 위처럼 number.splice(2,1)이 되면
2번째 요소부터 1개를 삭제하라는 뜻으로, 2만 삭제된다.
number은 [0,1,3,4,5]만 남는다

 

 

 

let number = [0,1,2,3,4,5];
number.splice(2,1,"하이")
console.log(number)

만약 위처럼 number.splice(2,1,"하이")가 되면
2번째 요소부터 1개를 삭제하고, 그 자리에 "하이"를 넣으라는 뜻이 된다.
즉 number은 [ 0, 1, '하이', 3, 4, 5 ] 가 된다. 

 

 

slice() 함수

slice함수는 pop,shift처럼 배열에서 요소를 꺼내는 건 같지만
다른점은 여러개를 꺼낼 수 있다.

let color = ["red", "green", "blue", "white", "black"];
let a= color.slice(2)
console.log(a);

인덱스번호 2번부터 쭉 a에 저장되는 것을 볼 수 있다.

 

배열의 특정 위치를 활용한다는 점에서
splice()와 slice()는 같은 기능을 한다

splice()는 원본에 영향 o
slice()는 원본에 영향 x

 

 

 

 

+ 책에서는 설명 안되어있지만 자주 쓰이는
map, forEach, filter,  toString, 를 추가했다

 

 

map() 함수

 

어떤 배열에 있는 모든 요소들의 값을 변경해서 새로운 배열을 써야 할 때 사용

 

let arr = [2,4,6,8,10];

let newArr = arr.map((element) => {
	return element * 2;
});

console.log(newArr);

위처럼 배열에 대한 반복처리에도 사용된다.

 

 

 

let users = [
  {firstName : "이", lastName: "용진"},
  {firstName : "김", lastName: "용진"},
  {firstName : "박", lastName: "용진"}
];

let userFullnames = users.map((element) => {
    return `${element.firstName}${element.lastName}`;
})

console.log(userFullnames);

객체 배열에서 map을 활용한 코드이다.

map() 함수를 사용해서 객체 배열을 순환시키고, 점표기법을 통해 각각의 성과 이름에 접근해서

풀네임을 만들었다.

 

 

 

 

 

forEach() 함수

 

파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드

map() 메서드와 거의 비슷하지만 차이점은 따로 return 하는 값이 없다는 점이다.

 

forEach함수를 사용해 배열을 순회하려면 콜백함수 또는 익명함수가 필요한데,

이때 함수에는 아래의 매개변수 3개가 들어간다. 

 

Current Value : 처리할 현재 요소

Index : 처리할 현재 요소의 인덱스

Array : forEach 메서드를 호출한 배열(배열 원본)

 

let num = [1,2,3,4,5];

num.forEach((number,index,array) => {
	console.log(`number : ${number}, index : ${index}, array : ${array}`)
})

number에서는 각 요소가 하나씩 출력되며

index에서는 그 출력되는 요소의 index 번호가 출력된다.

array는 배열 원본 그 자체가 출력된다.

 

 

 

 

 

filter() 함수

 

데이터 집합에서 특정 조건을 만족하는 값만 반환받기를 원할 때 사용

즉 말 그대로 걸러주는 역할을 하는 함수

 

const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter(number => number > 3);

console.log(numbers);
console.log(result);

4이상의 수를 filter 함수를 통해 걸러냈다

조건이 참인 요소들만 새로운 배열로 그 값을 반환한다.

 

 

 

 

 

toString() 함수

 

숫자형 값을 문자열로 변환하는 함수

let num = 24;
let str = num.toString();

console.log(num); 
console.log(str);

 

주의할점은 toString()을 쓸 때, 괄호를 생략하면 안된다.