javascript 메소드 정리

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);