배열을 다루는 함수 (1)

간단한 함수

• 배열 추가 : Array.push(), Array.unshift(), Array.splice()
• 배열 삭제 : Array.pop(), Array.shift(), Array.splice()
• 배열 추가/삭제 예시

push

• 배열의 마지막에 요소를 추가하는 함수
• push 함수의 매개변수에 데이터를 넣으면 해당 데이터가 배열의 마지막 자리에 추가된다.

pop

• 배열의 마지막 요소를 뽑아내는 함수 입니다.

shift

• 배열의 첫번째 요소를 뽑아내는 함수

unshift

• 배열 첫번째에 요소를 추가시키는 함수이다.

indexOf

• 배열에서 찾아볼 데이터를 인자값으로 받고 해당 인자값이 있으면 index를 알려
• 해당 값이 찾을 수 없다면 -1 반환

let a = ['a', 'b', 'c', 'd', 'e']

let whereIsD = a.indexOf('d')
console.log('whereIsD: ', whereIsD); //3

join

• 배열을 string으로 합쳐준다.
• 인자값 없이 사용하면 콤마(,) 를 이용해서 모든 원소들을 이어준다.
• 인자값을 넣으면 인자값을 이용해서 모든 요소들을 이어준다.

splice

• 해당 구간의 인덱스 요소를 다른 요소로 바꾸거나 삭제하고 새로운 배열을 반환
  • splice의 첫번째 인자값은 제거할 요소의 index를 받는다.
  • 두번째 인자값으로 몇개의 요소를 제거할지 받는다. (해당 요소부터 삭제)
  • 세번째 인자값 부터는 제거된 요소의 자리에 새로 들어갈 요소

let c = [1, 2, 3, 4, 5]
let d = c.splice(2, 2, 10, 20, 30, 40)

// 2번 인덱스부터 2개 삭제 => 3, 4번 삭제
// 그 자리에 10, 20, 30, 40 추가

console.log('c: ', c); // [1, 2, 10, 20, 30, 40, 5]
console.log('d: ', d); // [3, 4] //2번째 index부터 잘라진 부분

slice

• slice 함수는 해당 위치의 배열을 가져오는 함수
• 배열의 요소들을 가져오기 위한 index들의 시작 지점과 종료지점의 index를 인자값으로 받는다.
  • 시작 index
    • 음수일경우 배열 끝에서부터 카운트한다.
    • undefined인 경우: 0부터 slice
    • 배열의 길이가 같거나 큰 수는 빈배열 반환한다.
  • 종료 index
    • 종료 인덱스 제외하고 그 전까지의 요소만 추출한다.
      - 지정값이 없을 경우는 끝까지 slice한다.
      • 음수 : slice(2, -1)를 하면 세번째부터 끝에서 두번째 요소까지 추출
• 원본 배열은 그대로 유지된다.

splice & slice 차이점

• splice의 경우 원본 배열을 변경하지만 slice는 원본 배열이 그대로 유지된다.
• 새로운 배열 추출 시 두가지 방법 모두 사용가능하다.

> nums = Array(20).fill().map((_, i) => i)
< [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
> nums.slice(5, 8) //5번째 인덱스부터 8번째 인덱스까지
< [5, 6, 7]
> nums.splice(5, 3) //5번째 인덱스부터 3개
< [5, 6, 7]

문자열 & 배열 & 숫자 API

1. 문자열을 배열로 변환

📍split()

string.split(separator, limit)

• split 헷갈릴때 참고하기
• 문자열을 'separator'로 자름
• 'limit'는 separator로 분리할 문자열의 개수

1. [separator가 없을 때]

• ✅ split()
• 문자열 전체를 배열에 담아 리턴, length가 1인 배열이 된다.

let str = 'Hello, World, Javascript';
console.log(str.split());
//[ 'Hello, World, Javascript' ]

• ✅ split(' ')
• 각각의 변수에 값이 저장한다.

let str = 'Hello, World, Javascript';
let [a, b, c] = str.split(' ');
console.log(a); //Hello
console.log(b); //world
console.log(c); //javascript

• ✅ split(' ') & split('')

let text = "How are you doing today?";


const myArray = text.split("");
console.log('myArray: ', myArray);
//myArray:  [
  'H', 'o', 'w', ' ', 'a',
  'r', 'e', ' ', 'y', 'o',
  'u', ' ', 'd', 'o', 'i',
  'n', 'g', ' ', 't', 'o',
  'd', 'a', 'y', '?'
]

const myArray1 = text.split(" ");
console.log('myArray1: ', myArray1);
//myArray1:  [ 'How', 'are', 'you', 'doing', 'today?' ]

2. [separator가 있을 때]

• ✅ split(',')
• 문자열 전체를 배열에 담아 리턴, length가 1인 배열이 된다.

let str = 'Hello, World, Javascript';
console.log(str.split(','));
//[ 'Hello', 'World', 'Javascript' ]

• ✅ split(',', limit)
• limit은 구분자로 분리할 문자열의 개수.
• 0을 전달하면 빈 배열, 1을 전달하면 1개의 문자만 리턴 ...

let str = 'Hello, World, Javascript';

console.log(str.split(',', 0)); //[]
console.log(str.split(',', 1)); //[ 'Hello' ]
console.log(str.split(',', 2)); //[ 'Hello', ' World' ]
console.log(str.split(',', 3)); //[ 'Hello', ' World', ' Javascript' ]

---

2. 배열을 문자열로 변환

📍join()

arr.join(separator)

• separator를 입력하지 않은 경우, default로 ','가 들어간다.

const arr = ['Apple', 'Banana', 'Orange'];

const str1 = arr.join(); //Apple,Banana,Orange
const str2 = arr.join('-'); //Apple-Banana-Orange
const str3 = arr.join(''); //AppleBananaOrange
const str4 = arr.join(' '); // Apple Banana Orange

[자주 쓰이는 부분]

• split(',') join(' ')으로 문자열에있는 , 제거하기

const numberStr = "123,456,789";
// 전체 콤마 제거
const number = numberStr.split(',').join("");
console.log(number); //123456789

• split() 문자열을 첫번째 파라미터(여기서는 ',')로 잘라서 배열로 리턴한다.
  결과값 : ["123", "456", "789"]
• join() 함수는 배열의 모든 요소를 연결해 하나의 문자열로 만든다.
  split() 함수의 리턴값["123", "456", "789"] => "123456789"

📍toString()

array.toString()

• ,를 구분자로 요소들을 하나의 문자열로 연결하여 리턴한다.

const arr = ['Apple', 'Banana', 'Orange'];
console.log(arr.toString()) //Apple,Banana,Orange

3. 배열 string -> 배열 number

let inputA = 18234
// 숫자 -> 문자열 변경
let inputAA = String(inputA)
// 문자 -> 배열 변경
let inputAAA = Array.from(inputAA)
// 배열안에서 string -> number
const b = inputAAA.map(Number);
console.log('b: ', b); //b:  [ 1, 8, 2, 3, 4 ]

4. 문자열을 숫자로 변환

📍parseInt()

• 문자열 인자를 파싱해서 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환.

const myNumber = '3';
console.log(2 + parseInt(myNumber));
// returns 5

let inputA = '18234'
let a = inputA.split('')//하나하나 자르기
.map((n) => parseInt(n, 10)); //parseInt: 문자열에 포함된 숫자를 찾아서 number로 형변환
console.log(typeof(a)); //[ 1, 8, 2, 3, 4 ]

📍Number()

• 공백의 경우 Number 객체를 사용시 0으로 출력

참고 사이트

---

ForEach

• map() 메서드와 거의 비슷하지만 차이점은 따로 return 하는 값이 없다는 점
• return 값으로 새로운 배열이 필요하지 않는 경우라면 forEach 메서드를 활용