push() : 가장 마지막에 값 추가
let datas = [10, 8, 20, 3, 2];
datas.push(100);
console.log(datas);
[10, 8, 20, 3, 2, 100]
join() :전달한 값으로 구분한 뒤 문자열로 리턴
let datas = [10, 8, 20, 3, 2];
console.log(datas.join(", "));
10, 8, 20, 3, 2
slice(begin, end): 원하는 부분을 추출하기 위해 시작 인덱스와 마지막 인덱스를 전달한다.
slice(begin): 시작 인덱스부터 마지막까지 추출한다.
let datas = [10, 8, 20, 3, 2];
console.log(datas.slice(1, 3));
console.log(datas.slice(1));
(2) [8, 20]
(4) [8, 20, 3, 2]
splice(index, count) : 삭제
splice(index, count, ...args) : 교체
let datas = [10, 8, 20, 3, 2];
datas.splice(1, 1);
console.log(datas);
datas.splice(1, 1, 200);
console.log(datas);
(4) [10, 20, 3, 2]
(4) [10, 200, 3, 2]
pop() : 마지막 요소 삭제
let datas = [10, 8, 20, 3, 2];
const dataRemoved = datas.pop();
console.log(`${dataRemoved} 삭제`);
console.log(datas);
2 삭제
(4) [10, 8, 20, 3]
shift() : 첫 번째 요소 삭제
let datas = [10, 8, 20, 3, 2];
const dataRemoved = datas.shift();
console.log(`${dataRemoved} 삭제`);
console.log(datas);
10 삭제
(4) [8, 20, 3, 2]
indexOf(value) : value를 해당 Array객체에서 찾은 뒤 인덱스 번호를 리턴한다. 못찾으면 -1을 리턴한다.
(1) Array객체에서 해당 value를 찾았을 때
let datas = [10, 8, 20, 3, 2];
const i = datas.indexOf(3);
console.log(i);
3
(2) Array객체에서 해당 value를 못 찾았을 때
let datas = [10, 8, 20, 3, 2];
const i = datas.indexOf(90);
console.log(i);
-1
spread operation
- 배열이나 객체를 펼쳐서 각 요소 또는 속성을 개별적으로 처리할 수 있게 해주는 문법
- 주로 배열이나 객체를 복사하거나, 함수의 인자로 전달할 때 사용
let datas = [10, 8, 20, 3, 2];
const numbers = [...datas];
console.log(numbers);
(5) [10, 8, 20, 3, 2]
spread operation 예시)
배열에서의 사용
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]
객체에서의 사용
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }
함수의 인자로 사용
function myFunction(...args) {
console.log(args);
}
myFunction(1, 2, 3, 4); // [1, 2, 3, 4]
비구조화 할당
let datas = [10, 8, 20, 3, 2];
const [number1, number2, number3, number4, number5, number6 = 5] = datas;
console.log(number1, number2, number3, number4, number5, number6);
10 8 20 3 2 5
forEach(callback)
- 배열의 각 요소에 대해 주어진 콜백 함수를 한 번씩 실행하는 역할
- 이 메서드는 각 요소의 값뿐만 아니라 인덱스와 배열 자체도 콜백 함수에 전달할 수 있습니다.
let datas = [10, 8, 20, 3, 2];
datas.forEach((data, i, datas) => {
console.log(data, i);
datas[i] = i + 1;
});
console.log(datas);
10 0
8 1
20 2
3 3
2 4
(5) [1, 2, 3, 4, 5]
map(callback)
- 배열의 각 요소에 대해 주어진 콜백 함수를 호출하고, 각 요소에 대한 변환된 값을 새로운 배열로 반환
- map은 원본 배열을 변경하지 않고 새로운 배열을 생성
let datas = [10, 8, 20, 3, 2];
const result = datas.map((data) => data * 2);
console.log(result);
[20, 16, 40, 6, 4]
filter(callback)
- 주어진 콜백 함수의 조건을 만족하는 요소만을 필터링하여 새로운 배열로 반환합
- filter 메서드는 원본 배열을 변경하지 않고 새로운 배열을 생성
as = [10, 8, 20, 3, 2];
const result = datas.filter((data) => data % 5 == 0); //5로 나누었을때 나머지가 0인 수만 출력
console.log(result);
[10, 20]
reduce(callback)
- 초기값을 설정하면 data에 0번째부터 들어온다.
- 초기값을 설정하지 않으면 data에 1번째부터 들어온다. 이 때, 0번째 값이 variable로 들어온다.
let datas = [10, 8, 20, 3, 2];
const result = datas.reduce((variable, data, i) => {
console.log(variable);
});
10
(3)undefined
let datas = [10, 8, 20, 3, 2];
const result = datas.reduce((variable, data, i) => {
console.log(variable);
}, 0);
0
(4)undefined
let datas = [10, 8, 20, 3, 2];
const result = datas.reduce((variable, data, i) => {
console.log(data, i);
});
8 1
20 2
3 3
2 4
let datas = [10, 8, 20, 3, 2];
const result = datas.reduce((variable, data, i) => {
console.log(data, i);
}, 0);
10 0
8 1
20 2
3 3
2 4
let datas = [10, 8, 20, 3, 2];
const result = datas.reduce((variable, data, i) => {
variable.push(i + 1);
return variable;
}, []);
console.log(result);
(5) [1, 2, 3, 4, 5]
let datas = [10, 8, 20, 3, 2];
const result = datas.reduce((variable, data, i) => {
variable[`${i}`] = data;
return variable;
}, {});
console.log(result);
{0: 10, 1: 8, 2: 20, 3: 3, 4: 2}
문자열
split() : 문자열을 Array 객체로 사용하고자 한다면, split()을 사용한다.
"월화수목금토일".split("").forEach((data) => {
console.log(data);
});
월
화
수
목
금
토
일
includes(value) : value가 문자열에 포함되었는 지 검사
console.log("ABCD".includes("B"));
true
Array()
- JavaScript에서 배열을 생성하는 내장 생성자(constructor) 함수
- Array() 생성자를 사용하여 배열을 만들 수 있습니다.
const datas = new Array(7).fill(0);
datas.forEach((data) => {
console.log(data);
});
(7) 0
10~1까지 Array 객체에 담은 후 짝수만 출
// 10~1까지 Array 객체에 담은 후 짝수만 출력
const number = new Array(10).fill(0).map((_, i) => 10 - i);
const evens = number.filter((number) => number % 2 == 0);
console.log(evens);
한글을 숫자로
예) 삼사칠구->3479
const changeNumber = (...input) => {
const hangul = [..."공일이삼사오육칠팔구"];
return Number(input.map((c) => hangul.indexOf(c)).join(""));
};
const input = "공사칠구";
const result = changeNumber(...input);
console.log(result);
1~100까지 합 출력
const result = new Array(100)
.fill(0)
.reduce((variable, _, i) => variable + i + 1, 0);
console.log(result);
