[JS] 자바스크립트 배열 문법 정리

Jay·2022년 1월 2일
JavaScript
0

반복

1. map()

map() 메서드는 배열 내의 모든 요소마다 콜백함수를 거치게 만든 후, 도출된 그 결과값들을 모아 새로운 배열을 반환합니다.

✔ 문법

배열명.map(callback(element[, index[, array]])[, thisArg])

(1) callback 함수

  • element : 처리할 배열 내의 현재 요소
  • index : element의 인덱스 (생략 가능)
  • array : map()을 호출한 배열 (생략 가능)

(2) thisArg : callback 함수 실행시, this로 사용되는 값 (생략 가능)

✔ 예제

const arr = [1,2,3,4,5];
const newArr = arr.map(x => x*2); 

console.log(newArr); // [2,4,6,8,10]
const arr = [10, 50, 100];

const newArr = arr.map(x=> {
	if(x > 30){ return '큼';} 
    });

console.log(newArr); // [undefined, '큼', '큼']

2. reduce()

reduce() 메서드는 배열 내의 각 요소마다 주어진 리듀서(reducer)함수를 실행하고, 하나의 결과값을 반홥합니다.

배열명.reduce(callback[, initialValue])

(1) callback 함수

  • accumulator : 콜백의 반환값이 누적되는 곳. initialValue가 제공되는 경우, 콜백 함수가 처음 호출될 때의 accumulator는 initialValue가 된다. initialValue가 없다면, 배열의 첫 번째 요소가 사용된다.
  • currentValue : 처리할 현재 요소
  • currentIndex : 처리할 현재 요소의 인덱스 (생략 가능)
  • array : reduce()를 호출한 배열 (생략 가능)

(2) initialValue : callback의 최초 호출에서 첫 번째 인수에 제공하는 값(생략 가능)

✔ 예제

const heroes = [{name:'capt', age:100},{name:'thor', age:1000}];

const totalAge = heroes.reduce((total, currentItem)=>{
	total = total + currentItem.age;
    return total;
}, 0)

console.log(totalAge); // 1100

3. forEach()

forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행하며 undefined를 반환합니다.

✔ 문법

배열명.forEach(callback(element[, index[, array]])[, thisArg])

(1) callback 함수

  • element : 처리할 배열 내의 현재 요소
  • index : element의 인덱스 (생략 가능)
  • array : map()을 호출한 배열 (생략 가능)

(2) thisArg : callback 함수 실행시, this로 사용되는 값 (생략 가능)

✔ 예제

const arr = [1,2,3];
const copy = [];

arr.forEach(x=>copy.push(x+1));

console.log(copy); // [2,3,4]

검증/판별/찾기 등

1. every()

every() 메서드는 배열 내의 모든 요소가 주어진 판별 함수를 통과하는지 테스트하고, 그에 대한 결과로서 boolean 값을 반환합니다.

✔ 문법

배열명.every(callback(element[, index[, array]])[, thisArg])

(1) callback 함수

  • element : 처리할 배열 내의 현재 요소
  • index : element의 인덱스 (생략 가능)
  • array : every()을 호출한 배열 (생략 가능)

(2) thisArg : callback 함수 실행시, this로 사용되는 값 (생략 가능)

✔ 예제

const arr = ['candy', 'candy', 'chocolate'];
const newArr = arr.every(x => x === 'candy'); 

console.log(newArr); // false

2. some()

some() 메서드는 배열 내의 어느 요소라도 주어진 판별 함수를 통과하는지 테스트하고, 그에 대한 결과로서 boolean 값을 반환합니다. 빈 배열일 때는 무조건 false를 반환.

✔ 문법

배열명.some(callback(element[, index[, array]])[, thisArg])

(1) callback 함수

  • element : 처리할 배열 내의 현재 요소
  • index : element의 인덱스 (생략 가능)
  • array : some()을 호출한 배열 (생략 가능)

(2) thisArg : callback 함수 실행시, this로 사용되는 값 (생략 가능)

✔ 예제

const arr = ['candy', 'candy', 'chocolate'];
const newArr = arr.some(x => x === 'candy'); 

console.log(newArr); // true

3. filter()

filter() 메서드는 배열 내의 모든 요소마다 콜백함수를 거치게 만든 후, 그 중 true를 리턴한 요소만 모아 새로운 배열로 반환합니다.

✔ 문법

배열명.filter(callback(element[, index[, array]])[, thisArg])

(1) callback 함수

  • element : 처리할 배열 내의 현재 요소
  • index : element의 인덱스 (생략 가능)
  • array : filter()을 호출한 배열 (생략 가능)

(2) thisArg : callback 함수 실행시, this로 사용되는 값 (생략 가능)

✔ 예제

const fruits = ['banana','pineapple','mango','apple'];
const result = fruits.filter(fruit => fruit.length > 5); 

console.log(result); // ['banana','pineapple']

4. find()

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

✔ 문법

배열명.find(callback[, thisArg])

(1) callback 함수

  • element : 처리할 배열 내의 현재 요소
  • index : element의 인덱스 (생략 가능)
  • array : find()을 호출한 배열 (생략 가능)

(2) thisArg : callback 함수 실행시, this로 사용되는 값 (생략 가능)

✔ 예제

const arr = [1,2,3,4,5];
const result = arr.find(x => x > 3); 

console.log(result); // 4
const ourClass = [
	{name: 'Jay', age: 11}, 
	{name: 'Sarah', age: 12},
    	{name: 'Tom', age: 9}
    ];

const student = ourClass.find(x => x.name === "Jay"); 

console.log(student); // {name:'Jay', age: 11}

5. findIndex()

findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.

✔ 문법

배열명.findIndex(callback(element[, index[, array]])[, thisArg])

(1) callback 함수

  • element : 처리할 배열 내의 현재 요소
  • index : element의 인덱스 (생략 가능)
  • array : find()을 호출한 배열 (생략 가능)

(2) thisArg : callback 함수 실행시, this로 사용되는 값 (생략 가능)

✔ 예제

const arr = [1,2,6,7,8];
const result = arr.findIndex(x => x > 3); 
const result2 = arr.findIndex(x => x > 10);

console.log(result); // 2
console.log(result2); // -1

6. indexOf()

indexOf()메서드는 배열 내에서 특정 요소를 탐색하여 이에 해당하는 첫 번째 요소의 인덱스를 반환하고, 없을 경우 -1을 반환합니다.

✔ 문법

배열명.indexOf(searchElement[, fromIndex])
  • searchElement : 배열에서 찾을 요소
  • fromIndex : 검색을 시작할 색인. 해당 인덱스가 배열의 길이보다 크거나 같은 경우 -1을 반환하므로 검색이 되지 않으며, 음수인 경우는 배열의 끝에서부터 오프셋 값으로 사용된다.

✔ 예제

const fruits = ['banana','pineapple','mango','apple'];
fruits.indexOf('mango'); // 2
fruits.indexOf('melon'); // -1

//  모든 요소 찾기
var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.indexOf(element);

while (idx != -1) {
  indices.push(idx);
  idx = array.indexOf(element, idx + 1);
}

console.log(indices); // [0, 2, 4]

7. includes()

includes() 메서드는 배열이 특정 요소를 포함하고 있는지를 판별하며, boolean 값을 반환합니다.

✔ 문법

배열명.includes(searchElement[, fromIndex])
  • searchElement : 배열에서 찾을 요소
  • fromIndex : 검색을 시작할 색인. 해당 인덱스가 배열의 길이보다 크거나 같은 경우 -1을 반환하므로 검색이 되지 않으며, 음수인 경우는 배열의 끝에서부터 오프셋 값으로 사용된다.

✔ 예제

const fruits = ['banana','peach','lemon'];

console.log(fruits.includes('banana')); // true
console.log(fruits.includes('pear')); // false

추가/제거/합치기 등

1. push()

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.

✔ 문법

배열명.push(element1[, ...[, elementN]])
  • elementN : 배열의 끝에 추가할 요소

✔ 예제

const fruits = ['banana','peach'];
const newFruits = fruits.push('lemon'); // 1개 push

console.log(fruits); // ['banana',peach','lemon']
console.log(newFruits); // 3

const moreFruits = fruits.push('cherry','melon'); // n개 push

console.log(fruits); // ['banana','peach','lemon','cherry','melon']
console.log(moreFruits); // 5

2. pop()

pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다.

✔ 문법

배열명.pop()

✔ 예제

const fruits = ['banana','peach','lemon'];
const removedFruits = fruits.pop();

console.log(fruits); // ['banana',peach']
console.log(removedFruits); // 'lemon'

3. unshift()

unshift() 메서드는 배열의 첫 번째에 요소를 추가하고, 새로운 길이를 반환합니다.

✔ 문법

배열명.unshift([...elementN])
  • elementN : 배열 맨 앞에 추가할 요소

✔ 예제

const fruits = ['banana','peach','lemon'];
const newLength = fruits.unshift('grape');

console.log(fruits); // ['grape','banana','peach','lemon']
console.log(newLength); // '4'

4. shift()

shift() 메서드는 배열의 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다.

✔ 문법

배열명.shift()

✔ 예제

const fruits = ['banana','peach','lemon'];
const removedFruits = fruits.shift();

console.log(fruits); // ['peach','lemon']
console.log(removedFruits); // 'banana'

5. splice()

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

✔ 문법

배열명.splice(start[, deleteCount[,item1[,item2[, ...]]]])
  • start : 배열의 변경을 시작할 인덱스. 배열의 길이보다 큰 값인 경우, 실제 시작 인덱스는 배열의 길이로 설정된다. 음수인 경우, 배열의 끝에서부터 요소를 센다.
  • deleteCount : 배열에서 제거할 요소의 개수. 해당 인수가 생략되어 있거나 그 값이 array.length - start 보다 크면 , start부터의 모든 요소를 제거한다. 값이 0 이하이면, 어떤 요소도 제거하지 않는다.
  • itemN : 배열에 추가할 요소. 생략되어 있는 경우, splice()는 제거 기능을 한다.

✔ 예제

// 1. 요소 추가
var fruits = ['banana','peach','lemon'];
var removed = fruits.splice(0, 0, 'melon');

console.log(fruits); // ['melon','banana','peach','lemon']
console.log(removed); // []

// 2. 요소 제거
var animals = ['dog','cat','zebra'];
var removed = animals.splice(1,1);

console.log(animals) // ['dog','zebra']
console.log(removed) // ['cat']

// 3. 요소 제거 및 교체
var foods = ['steak', 'pizza', 'hotdog'];
var removed = foods.splice(2,1,'sushi');

console.log(foods); // ['steak', 'pizza', 'sushi']
console.log(removed); // ['hotdog']

// 4. 음수 인덱스 적용
var alphabet = ['a','b','c','d','e'];
var removed = alphabet.splice(-2,2);

console.log(alphabet) // ['a','b','c']
console.log(removed) // ['d','e']

6. concat()

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열 뒤에 합쳐서 새 배열을 반환합니다.

✔ 문법

배열명.concat([value1[, value2[, ...[, valueN]]]])
  • valueN : 배열 또는 값. 생략한 경우, 기존 배열의 얕은 복사본을 반환

✔ 예제

const fruits = ['banana','peach','lemon'];
const newFruits = fruits.concat('melon','plum');

console.log(fruits); // ['banana','peach','lemon']
console.log(newFruits); // ['banana','peach','lemon','melon','plum']

7. join()

join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

✔ 문법

배열명.join([separator])
  • separator : 배열의 각 요소를 구분할 문자열. 생락하면 쉼표로써 연결되고, 빈 문자열('')이면 배열의 모든 요소가 그 사이에 아무 문자 없이 연결된다.

✔ 예제

const words = ['I','love','you'];
const noSeparator = words.join();
const emptySeparator = words.join('');

console.log(noSeparator); // I,love,you
console.log(emptySeparator); // Iloveyou
profile
Jay
개발할래요💻
이전 포스트

[AWS] AWS EC2로 첫 배포를 시도하며 마주한 에러들

다음 포스트

[React] React Hooks 정리

0개의 댓글