JS 배열 메소드 정리!!

• 배열 요소를 분할/변환하기(from)
• 배열 뒤에 요소 추가하기(push)
• 배열 앞에 요소 추가하기(unshift)
• 배열 마지막 요소 삭제하기(pop)
• 배열 맨 앞 요소 삭제하기(shift)
• 배열 길이 구하기(length)
• 배열 합치기(concat)
• 배열에 특정 구분자 넣어 문자형으로 변환하기(join)
• 배열 특정 위치의 요소 추출하기(slice)
• 배열 인덱스로 특정 요소 수정하기(splice)
• 배열 정렬하기(sort)
• 배열의 순서를 반대로 나열하기(reverse)
• 배열 요소가 특정 조건을 만족하는지 확인하기(some)
• 모든배열 요소가 특정 조건을 만족하는지 확인하기(every)
• 배열의 특정 조건을 기준으로 필터링하기(filter)
• 배열 요소 일괄 변경하기(map)
• 배열 내 값을 누적시키키(reduce)

배열 요소를 분할/변환하기(from)

• Array 내장객체의 메소드 from은 대입된 문자열 값을 구분자 없이 분할합니다. 그리고 분할된 문자는 배열 요소에 각각에 대입되어 결과값으로 배열을 반환합니다. 첫 번째 인자는 배열 요소로 분할해서 변환될 문자열을 대입합니다. 두 번째 인자는 필수값은 아니지만 callback 함수를 대입하면 분할과 동시에 각각의 요소를 변환 시킬 수 있습니다.

1
2
3
4
5
6

Array.from(배열로 변환될 값, 반환될 배열 내부 요소에 대한 callback 함수)

const str = '2345'

Array.from(str, el => el * 2) <-- [ 4, 6, 8, 10 ]

배열 뒤에 요소 추가하기(push)

• Array 내장객체 push 메소드는 배열 뒤에서 요소를 추가합니다.

1
2
3
4
5
6

let aaa = [1]

aaa.push('AAA')
console.log(aaa) <-- [ 1, 'AAA' ]
aaa.push(2)
console.log(aaa) <-- [ 1, 'AAA', 2 ]

배열 앞에 요소 추가하기(unshift)

• Array 내장객체 unshift 메소드는 배열 맨 앞에 요소를 추가합니다.

1
2
3
4
5
6

let aaa = [1]

aaa.unshift('AAA')
console.log(aaa) <-- [ 'AAA', 1 ]
aaa.unshift(2)
console.log(aaa) <-- [ 2, 'AAA', 1 ]

배열 마지막 요소 삭제하기(pop)

• Array 내장객체 pop 메소드는 배열의 마지막 요소를 삭제합니다.
• 원본 배열도 함께 수정되기 때문에 pop 함수를 실행할 때에는 반드시 원본 수정에 대해서 미리 고려해야 합니다.

1
2
3
4
5

let aaa = [1, 2, 3, 4]
console.log(aaa.pop()) <-- 4 
console.log(aaa) <-- [ 1, 2, 3 ]
console.log(aaa.pop()) <-- 3
console.log(aaa) <-- [ 1, 2 ]

배열 맨 앞 요소 삭제하기(shift)

• Array 내장객체 shift 메소드는 배열의 첫 번째 요소를 삭제합니다.
• 원본 배열도 함께 수정되기 때문에 shift 함수를 실행할 때에는 반드시 원본 수정에 대해서 미리 고려해야 합니다

1
2
3
4
5

let aaa = [1, 2, 3, 4]
console.log(aaa.shift()) <-- 1
console.log(aaa) <-- [ 2, 3, 4 ]
console.log(aaa.shift()) <-- 2
console.log(aaa) <-- [ 3, 4 ]

배열 길이 구하기(length)

• Array 내장객체는 배열의 길이를 확인할 수 있는 length 속성을 갖고 있습니다.

1
2
3

let aaa = [1, 2, 3, 4, 5,]

console.log(aaa.length) <-- 5

배열 합치기(concat)

• Array 내장 객체의 concat 메소드를 사용하여 배열을 병합합니다.

1
2
3
4
5

let a = [1,2,3]
let b = [4,5,6]

console.log(a.concat(b)) <-- [ 1, 2, 3, 4, 5, 6 ]

배열에 특정 구분자 넣어 문자형으로 변환하기(join)

• Array 내장 객체의 join 메소드는 각 배열의 요소를 병합하여 하나의 문자열로 변환 합니다.

1
2
3

let aaa = ['abcde','12345' ]

aaa.join('.') <-- 'abcde.12345'

• aaa 배열 각 요소 사이에 ‘.’ 구분자를 넣어 하나의 문자열로 병합합니다.

배열 특정 위치의 요소 추출하기(slice)

• Array 내장 객체의 slice 인덱스는 시작과 끝을 지정하여 배열 요소를 추출합니다.
• 단, 끝 인덱스에 있는 요소는 제외하고 그 이전까지의 요소들을 추출 합니다.

1
2
3

const aaa = ['melon', 'lemon','apple','banana','strawberry',]

aaa.slice(2,4) <-- [ 'apple', 'banana' ]

• slice 메소드에 시작,끝 인덱스를 2, 4를 넣으면 aaa 배열의 apple, banana가 반환이 됩니다.

배열 인덱스로 특정 요소 수정하기(splice)

• Array 내장 객체의 splice는 특정 위치의 요소를 삭제하거나 수정 할 수 있습니다.
• 첫 번째 인자인 시작 인덱스는 배열 요소가 변경될 시작 지점 입니다.
• splice는 특정 위치의 요소를 지정하는 것이 필수 이므로 반드시 첫 번째 인자값은 배열 길이보다 작아야 유효 합니다.
• 두 번째 인자인 삭제할 요소의 개수는 시작 인덱스의 위치부터 삭제하고자 하는 개수만큼 요소를 제거합니다.
• 세 번째 인자에 추가될 요소들을 지정하면, 시작 인덱스부터 해당 요소들이 추가 됩니다.

1
2
3
4

const aaa = ['melon', 'lemon','apple','banana','strawberry',]

console.log(aaa.splice(2, 4, 'mandarin')) <-- [ 'apple', 'banana', 'strawberry' ]
console.log(aaa) <-- [ 'melon', 'lemon', 'mandarin' ]

• splice(2, 4, ‘mandarin’) 실행 하면 apple, banana, strawberry가 추출이되고 mandarin이 추가가 됩니다.

배열 정렬하기(sort)

• sort 메소드는 인자로 비교 함수를 대입함여 배열 요소들을 정렬합니다. 이때 비교 함수에서 return 으로 반환 되는 비교 값에 따라 순서가 정해 집니다.
• 비교값 > 0 : a가 b보다 작은 숫자의 인덱스를 가집니다. 즉 a가 b보다 앞에 위치 합니다.
• 비교값 < 0 : b가 a보다 작은 숫자의 인덱스를 가집니다. 즉 b가 a보다 앞에 위치 합니다.
• 비교값 = 0 : a와 b의 위치를 변경하지 않습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

let aaa = [ 1, 4, 6, 5, 7]

// 오름 차순
aaa.sort((a,b) => {
  return a - b
})
--> [ 1, 4, 5, 6, 7 ]

// 내림 차순
aaa.sort((a,b) => {
  return b - a
})
--> [ 7, 6, 5, 4, 1 ]

배열의 순서를 반대로 나열하기(reverse)

• reverse 메소드는 배열 순서를 반대로 나열합니다. 함수 호출 시 원본 배열을 변형 하기 때문에 주의해야 합니다.

1
2
3

let ccc= [4,5,6,7,8,9,10]
console.log(ccc.reverse())
--> [ 10, 9, 8, 7, 6, 5, 4 ]

배열 요소가 특정 조건을 만족하는지 확인하기(some)

• some 메소드는 callback 함수의 return 값이 true를 반환할 때 까지만 배열 요소를 순환 합니다. true를 반환하는 다음 요소들에 대해서는 더 이상 처리를 하지 않으며 마지막 요소까지 true 값이 없으면 false를 반환합니다.

1
2
3
4
5
6
7
8
9
10

const arr = [
    {id: 0, name : "현아" , age : 6},
    {id: 1, name : "현일" , age : 3},
    {id: 2, name : "혜림" , age : 2},
    {id: 3, name : "우림" , age : 1,}
    ]

const isHHH = arr.some(el => el.name === "현아")

console.log(isHHH) <-- true

모든배열 요소가 특정 조건을 만족하는지 확인하기(every)

• every 메소드는 배열의 모든 요소가 callback 함수 조건을 만족하는지 확인합니다. callback 함수 조건이 한번이라도 false인 경우, false 반환과 함께 실행이 종료됩니다. 모든 조건 결과가 true일 때만 every 메소드는 true를 반환합니다.

1
2
3
4
5
6
7
8
9
10

const arr = [
    {id: 0, name : "현아" , age : 6},
    {id: 1, name : "현일" , age : 3},
    {id: 2, name : "혜림" , age : 2},
    {id: 3, name : "우림" , age : 1,}
    ]

const isHHH = arr.every(el => el.name === "현아")

console.log(isHHH) <-- false

배열의 특정 조건을 기준으로 필터링하기(filter)

• filter 메소드는 인자로 대입된 callback 함수를 통해 배열 내부를 순환하면서, 각각의 요소가 특정 조건을 만족하는지 확인합니다.
• callback 함수의 반환값은 무조건 true 또는 false 입니다. 그 중 true 결과값을 만족하는 요소들을 다시 새로운 배열에 담아 반환합니다.

1
2
3
4
5
6

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const isOdd = arr.filter(el => el % 2 ===0 )

console.log(isOdd)
--> [ 2, 4, 6, 8, 10 ]

배열 요소 일괄 변경하기(map)

• 배열의 요소를 일괄 변경해야 하는 경우 map 메소드를 사용합니다.
• callback 함수를 인자로 받아 callback 함수의 return으로 반환되는 값들을 재조합하여 새로운 배열에 만듭니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

const arr = [1, 2, 3, 4, 5]
const name = [
    {id : 1 , name : "현아"},
    {id : 2 , name : "한일"},
    {id : 3 , name : "우림"},
    {id : 4 , name : "혜림"},
]
const aaa = arr.map(el => el + 1)
const bbb = name.map(el => el.name)

console.log(aaa) --> [ 2, 3, 4, 5, 6 ]
console.log(bbb) --> [ '현아', '한일', '우림', '혜림' ]

• 전달된 요소의 1을 더해 반환합니다.
• 전달된 요소의 name 속성만 반환합니다.

배열 내 값을 누적시키키(reduce)

• reduce는 배열 요소를 순환하면서, 정의된 callback 함수에 의해 단일 값으로 누적시킬 수 있습니다.
• reduce 메소드의 형태는 인자로 callback 함수와 초기값을 받습니다.

1
2
3
4
5
6
7

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

const result = arr.reduce((acc, cur) => {
    return  acc + cur;
})

console.log(result) <-- 15