[자바스크립트 JavaScript] 반복문, 배열 메서드

원본 배열을 수정하는 메서드

• push()
• pop()
• shift()
• unshift()
• splice()

 

새 배열을 반환하는 메서드

• map()
• filter()
• slice()
• concat()

 

결괏값을 반환하는 메서드

• reduce()
• find()
• some()
• every()
• includes()
• indexOf()
• lastIndexOf()
• forEach()

 

반복문

 

---

원본 배열을 수정하는 메서드

 

push()

배열의 끝에 하나 이상의 요소를 추가하고, 새로운 길이를 반환

push()
const fruits = ['apple', 'banana'];
fruits.push('orange'); 

// fruits : ['apple', 'banana', 'orange']

pop()

• 배열의 마지막 요소를 제거하고 그 요소를 반환

pop()
const fruits = ['apple', 'banana', 'orange'];
const last = fruits.pop(); 

// last : 'orange', fruits: ['apple', 'banana']

shift()

• 배열의 첫 번째 요소를 제거하고, 그 요소를 반환

shift()
const fruits = ['apple', 'banana', 'orange'];
const first = fruits.shift(); 

// first : 'apple', fruits: ['banana', 'orange']

 

 

unshift()

• 배열의 시작 부분에 하나 이상의 요소를 추가하고, 새로운 길이를 반환

unshift()
const fruits = ['banana', 'orange'];
fruits.unshift('apple'); 

// fruits : ['apple', 'banana', 'orange']

 

splice()

• 배열의 기존 요소를 삭제하거나, 새 요소를 추가하여 배열의 내용을 변경

splice()
const fruits = ['apple', 'banana', 'orange'];
fruits.splice(1, 1, 'mango'); 

// fruits : ['apple', 'mango', 'orange']

 

---

새 배열을 반환하는 메서드

 

map()

• 배열 내의 모든 요소에 대하여 주어진 함수를 호출한 결과를 모아 새 배열을 반환
• 매핑(mapping)해주는 함수.
• 매핑(mapping)은 한 데이터 집합의 요소들을 특정 규칙이나 함수를 사용하여 다른 형태의 요소로 변환하는 과정을 의미한다, 이때 각 요소는 새로운 요소로 "매핑"된다

map()
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); 

// doubled : [2, 4, 6]

filter()

• 주어진 함수의 테스트를 통과하는 모든 요소로 이루어진 새 배열을 반환

filter()
const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0); 

// evens : [2, 4]

slice()

• 배열의 일부분을 얕은 복사 하여 새 배열 객체로 반환

slice()
const fruits = ['apple', 'banana', 'orange', 'mango'];
const citrus = fruits.slice(2, 4); 

// citrus : ['orange', 'mango']

concat()

• 기존 배열에 다른 배열이나 값들을 합쳐서 새 배열을 만듦

concat()
const fruits = ['apple', 'banana'];
const moreFruits = fruits.concat(['orange', 'mango']); 

// moreFruits : ['apple', 'banana', 'orange', 'mango']

 

---

결괏값을 반환하는 메서드

 

reduce()

• 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 단일 결괏값을 반환
• reducer는 배열의 모든 요소를 하나의 값으로 축소하는 함수
• 배열에서 전체 요소들을 하나의 값으로 *줄이는* 역할을 함

reduce()
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); 

// sum : 10

find()

• 주어진 테스트 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 만족하는 요소가 없으면 undefined을 반환

find()
const numbers = [1, 2, 3, 4, 5];
const firstEven = numbers.find(num => num % 2 === 0); 

// firstEven : 2

some()

• 배열의 어떤 요소라도 주어진 테스트 함수를 만족하면 true를, 모두 만족하지 않으면 false를 반환

some()
const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0); 

// hasEven : true

every()

• 모든 요소가 주어진 테스트 함수를 만족하면 true를, 하나라도 만족하지 않으면 false를 반환

every()
const numbers = [2, 4, 6, 8];
const isAllEven = numbers.every(num => num % 2 === 0); 

// allEven : true

includes()

• 배열이 특정 요소를 포함하고 있는지 여부를 true 또는 false로 반환

includes()
const fruits = ['apple', 'banana', 'mango'];
const hasBanana = fruits.includes('banana'); 

// hasBanana : true

indexOf()

• 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환합니다. 없으면 -1을 반환

indexOf()
const fruits = ['apple', 'banana', 'mango'];
const bananaIndex = fruits.indexOf('banana'); 

// bananaIndex : 1

lastIndexOf()

• indexOf()와 유사하지만, 배열을 끝에서부터 검색

lastIndexOf()
const fruits = ['apple', 'banana', 'apple'];
const lastAppleIndex = fruits.lastIndexOf('apple'); 

// lastAppleIndex : 2

forEach()

• 배열의 각 요소에 대해 주어진 함수를 실행한다
• 배열을 순회하면서 각 요소에 대해 지정된 콜백 함수를 한 번씩 호출한다

const arr = [1, 2, 3];
arr.forEach(item => {
    console.log(item);
});
// 출력: 1, 2, 3

---

 

 

반복문

 

for문

•  기본 for문 초기화, 조건 검사, 증감식을 포함하는 구조

for(초기화; 조건문; 증감문){ 수행할 것 }

for(let i = 0; i <10; i++){
console.log(i)
}
// 출력 0 1 2 3 4 5 6 7 8 9

 

for ~in문 

• 객체의 속성들을 하나씩 검사하며 해당 속성의 이름(키)을 가져올 수 있는 반복문
• 변수에 키를 저장한다

 for ( 변수 in 객체 ) {수행할 것}


let person = {
  name: "John",
  age: 30,
  gender: "male"
};

for (key in person) {
  console.log(key + ": " + person[key]);
};
// 출력 name: John, age: 30, gender: male

 

for ~of

• 반복 가능한(iterable) 객체(배열, 문자열 등)의 요소를 순회하는 반복문
• 변수에 값을 저장한다

const arr = [1, 2, 3];
for (let item of arr) {
    console.log(item);
}
// 출력: 1, 2, 3

 

while 문

• 주어진 조건이 true인 동안 반복하는 반복문
• 반복의 제한이 없을 경우 사용함(ex / 게시판 리스트)

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}
// 출력: 0, 1, 2, 3, 4

 

do... while 문

• 일단 한 번은 실행하고, 그 후에 주어진 조건이 true인 동안 반복하는 반복문

let i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);
// 출력: 0, 1, 2, 3, 4