배열(array) - method 배우기
.length
const arr = [1, 2, 3];
console.log(arr.length);
.at()
- 배열에서 특정 위치의 요소를 가져오는 메서드
- 인덱스는 0부터 시작
const arr = [1, 2, 3];
console.log(arr[0]);
console.log(arr.at(0));
console.log(arr[arr.length - 1]);
console.log(arr.at(-1));
.concat()
- 배열에 다른 배열이나 값을 추가하여 새 배열을 반환하는 메서드
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr1.concat(arr2));
console.log(arr3);
.every()
- 배열의 모든 요소가 주어진 판별 함수를 통과하는지 테스트하는 메서드
const arr = [1, 2, 3];
console.log(arr.every(item => item > 0));
console.log(arr.every(item => item > 1));
.filter()
- 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환하는 메서드
- 콜백 함수의 반환 값이 true인 요소만 모아서 새로운 배열을 만듦
- 모든 요소가 통과하지 못하면 빈 배열을 반환
const arr = [1, 2, 3];
console.log(arr.filter(item => item > 1));
console.log(arr.filter(item => item < 0));
const users = [
{ name: '홍길동', age: 36 },
{ name: '고길동', age: 12 },
{ name: '둘리', age: 6 },
];
const children = users.filter(user => user.age <= 7);
console.log(children);
.find()
- 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환하는 메서드
- 요소가 없으면 undefined를 반환
const arr = [1, 2, 3];
console.log(arr.find(item => item > 1));
console.log(arr.find(item => item < 0));
const users = [
{ name: '홍길동', age: 36 },
{ name: '고길동', age: 12 },
{ name: '둘리', age: 6 },
];
const user = users.find(user => user.name === '고길동');
console.log(user);
.findIndex()
- 주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스를 반환하는 메서드
- 요소가 없으면 -1을 반환
const arr = [1, 2, 3];
console.log(arr.findIndex(item => item > 1));
console.log(arr.findIndex(item => item < 0));
.flat()
- 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성하는 메서드
- 깊이를 지정하지 않으면 기본값 1
const arr = [1, [2, [3, [4]]]];
console.log(arr.flat());
console.log(arr.flat(1));
console.log(arr.flat(2));
console.log(arr.flat(Infinity));
.forEach()
- 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드
const arr = [1, 2, 3];
arr.forEach(item => console.log(item));
.includes()
- 배열이 특정 요소를 포함하고 있는지 판별하는 메서드
const arr = [1, 2, 3];
console.log(arr.includes(1));
console.log(arr.includes(0));
.join()
- 배열의 모든 요소를 연결해 하나의 문자열로 만드는 메서드
const arr = [1, 2, 3];
console.log(arr.join(','));
console.log(arr.join(', '));
console.log(arr.join(' | '));
.map()
- 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드
const arr = [1, 2, 3];
const newArr = arr.map(item => item * 2);
console.log(newArr);
console.log(arr);
const users = [
{ name: '홍길동', age: 36 },
{ name: '고길동', age: 12 },
{ name: '둘리', age: 6 },
];
const newUsers = users.map(user => ({
...user,
email: null,
}));
console.log(newUsers);
<ul class="list-news">
<li>
<img src="url" />
<h2>뉴스1</h2>
<p>내용1</p>
</li>
</ul>
const news = [
{
userId: 1,
id: 1,
title: '"그리기 귀찮다, 금연해라" 초등생 금연 포스터 화제',
body: '벽에 전시돼 있는 듯한 포스터에는 "포스터 그리기도 귀찮다, 이젠 좀 금연해라"라는 문구가 적혀 있습니다.',
img: 'https://image.newsis.com/2024/07/12/NISI20240712_0001600094_web.jpg?rnd=20240712091623',
},
{
userId: 1,
id: 2,
title: '4억 올릴테니 살테면 사라던 배짱 결국…개포아파트 다 팔렸다',
body: '서울 아파트값 회복세와 맞물려 가격이 25억5000만원까지 올랐던 ‘디에이치퍼스티어아이파크’ 전용면적 59㎡ 보류지가 매각된 것으로 나타났다. 실거래가보다 높은 가격에 나왔던 보류지 매물이 주인을 찾으며 신고가를 기록하게 됐다. 이렇듯 주거선호도가 높은 강남 일대에선 보류지 신고가 소식이 전해지는 등 아파트값 상승세가 지속되는 양상이다.',
img: 'https://res.heraldm.com/content/image/2024/07/15/20240715050653_0.jpg',
},
{
userId: 1,
id: 3,
title: 'god 박준형 “친환경? X소리” 전기차 저격…‘당선 확률 70%’ 트럼프에 찢어지는 주주 가슴?',
body: '15일 국내 2차전지주(株)가 일제히 약세를 보였다. 피격 이후 11월 대선 승리 가능성이 높아진 것으로 평가되는 도널드 트럼프 전 미국 대통령의 반(反) 친환경 정책에 따른 전기차 산업 모멘텀 후퇴에 대한 우려가 커진 탓으로 읽힌다.',
img: 'https://cdn.namdonews.com/news/photo/202407/779824_449560_454.jpg',
},
{
userId: 1,
id: 4,
title: '“제2의 ‘불닭’ 찾아라”…K-푸드 앞세워 해외 노리는 식품사들',
body: '삼양식품의 ‘불닭볶음면’이 전 세계 100여개국에 수출되며 K-라면 대표주자로 자리매김하는 등 폭풍 성장을 이어가고 있다. ‘불닭 파워’를 등에 업은 삼양식품의 해외 실적은 매해 고성장 중이다. 1분기 해외 매출은 83% 상승한 2889억원이다. 삼양식품 전체 매출에서 해외 매출 비중은 75%에 이른다. ',
img: 'https://economist.co.kr/data/ecn/image/2024/07/04/ecn20240704000022.477x.0.jpg',
},
];
const listNews = document.querySelector('.list-news');
news.map(newsItem => {
const li = document.createElement('li');
const img = document.createElement('img');
const h2 = document.createElement('h2');
const p = document.createElement('p');
img.src = newsItem.img;
h2.textContent = newsItem.title;
p.textContent = newsItem.body;
li.appendChild(img);
li.appendChild(h2);
li.appendChild(p);
listNews.appendChild(li);
});
.list-news {
display: flex;
justify-content: space-between;
gap: 20px;
max-width: 1280px;
margin: 0 auto;
list-style: none;
}
.list-news li {
flex: 1;
}
.list-news img {
display: block;
width: 100%;
height: 250px;
object-fit: cover;
}
.list-news h2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.list-news p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.pop()
- 배열에서 마지막 요소를 제거하고 그 요소를 반환하는 메서드
const arr = [1, 2, 3];
console.log(arr.pop());
console.log(arr);
.push()
- 배열의 끝에 하나 이상의 요소를 추가하고 배열의 새로운 길이를 반환하는 메서드
const arr = [1, 2, 3];
console.log(arr.push(4));
console.log(arr);
console.log(arr.push(5, 6));
console.log(arr);
.reduce()
- 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환하는 메서드
- 각 콜백의 반환 값을 다음 콜백의 인수 accumulator(누산기)에 전달
- 리듀서 함수는 네 개의 인수를 가짐
- 누산기(accumulator)
- 현재 값(currentValue)
- 현재 인덱스(currentIndex)
- 원본 배열(array)
const arr = [1, 2, 3];
console.log(arr.reduce((acc, cur) => acc + cur, 0));
console.log(arr.reduce((acc, cur) => acc + cur, 10));
const users = [
{ name: '홍길동', age: 36 },
{ name: '고길동', age: 12 },
{ name: '둘리', age: 6 },
];
const totalAge = users.reduce((acc, cur) => acc + cur.age, 0);
console.log(totalAge);
const avgAge = (totalAge / users.length).toFixed();
console.log(avgAge);
const users = [
{ name: '홍길동', age: 36 },
{ name: '고길동', age: 12 },
{ name: '둘리', age: 6 },
];
const namesArr = users.reduce((acc, cur) => {
acc.push(cur.name);
return acc;
}, []);
console.log(namesArr);
const names = namesArr.join(', ');
console.log(names);
const names2 = users
.reduce((acc, cur) => {
acc.push(cur.name);
return acc;
}, [])
.join(', ');
console.log(names2);
.reverse()
const arr = [1, 2, 3];
console.log(arr.reverse());
console.log(arr);
.shift()
- 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환하는 메서드
const arr = [1, 2, 3];
console.log(arr.shift());
console.log(arr);
.slice()
- 대상 배열의 일부를 추출해 새로운 배열을 반환하는 메서드
- 첫 번째 인수는 추출을 시작할 인덱스
- 두 번째 인수는 추출을 종료할 인덱스(포함하지 않음)
const arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1));
console.log(arr.slice(1, 2));
console.log(arr.slice(1, -1));
console.log(arr);
.some()
- 배열의 요소 중에서 주어진 판별 함수를 만족하는 요소가 하나라도 있는지를 테스트하는 메서드
const arr = [1, 2, 3];
console.log(arr.some(item => item > 1));
console.log(arr.some(item => item > 2));
console.log(arr.some(item => item < 0));
.sort()
- 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환하는 메서드
- 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따름
- 정렬 순서를 정의하는 함수를 인수로 전달할 수 있음
const arr = [4, 7, 0, 10, 1, 2, 3];
console.log(arr.sort());
console.log(arr);
console.log(arr.sort((a, b) => a - b));
console.log(arr.sort((a, b) => b - a));
.splice()
- 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경하는 메서드
- 첫 번째 인수는 변경을 시작할 인덱스
- 두 번째 인수는 제거할 요소 수
- 세 번째 인수부터는 배열에 추가될 요소
const arr = [1, 2, 3];
console.log(arr.splice(1, 2));
console.log(arr);
const arr2 = [1, 2, 3];
console.log(arr2.splice(1, 1));
console.log(arr2);
const arr3 = [1, 2, 3];
console.log(arr3.splice(1, 1, 4, 5));
console.log(arr3);
.unshift()
- 배열의 맨 앞에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환하는 메서드
const arr = [1, 2, 3];
console.log(arr.unshift(4));
console.log(arr);
