array란?

자바스크립트의 배열은 가장 기본적인 데이터 구조 중 하나이며 이를 통해 간단하고 직관적인 방법으로 값 컬렉션을 저장하고 조작할 수 있습니다.
배열은 숫자, 문자열, 객체, 심지어 다른 배열과 같은 서로 다른 데이터 유형의 값을 포함할 수 있습니다.
또한 배열의 길이는 가변적이며 배열에서 값을 동적으로 추가하거나 제거할 수 있습니다.
array의 내장 함수에서 자주 사용하는 내장 함수에 대해 알아보겠습니다.

push()

push() 함수는 배열 끝에 하나 이상의 요소를 추가하는 데 사용되고 원래 배열을 수정하고 배열의 새 길이를 반환합니다.
push() 함수는 배열 끝에 추가할 요소인 하나 이상의 인수를 사용합니다.

const myArray = [1, 2, 3];
myArray.push(4, 5);
console.log(myArray); // Output: [1, 2, 3, 4, 5]

myArray 배열의 끝에 4와 5라는 두 가지 요소를 추가합니다.

pop()

pop() 함수는 배열에서 마지막 요소를 제거하고 반환하는 데 사용되고 원래 배열을 수정합니다.
배열이 비어 있으면 pop() 함수가 정의되지 않은 상태로 반환됩니다.

const myArray = [1, 2, 3];
const lastElement = myArray.pop();
console.log(lastElement); // Output: 3
console.log(myArray); // Output: [1, 2]

myArray 배열에서 마지막 요소 3을 제거합니다.

slice()

slice() 함수는 원래 배열에 있는 요소의 하위 집합을 포함하는 새 배열을 만드는 데 사용됩니다.
slice() 함수는 원래 배열을 수정하지 않습니다. slice() 함수는 추출할 요소의 부분 집합의 시작 및 끝 인덱스인 하나 또는 두 개의 인수를 사용합니다.
끝 인덱스를 지정하지 않은 경우 slice() 함수는 시작 인덱스에서 배열의 끝까지 모든 요소를 추출합니다.

const myArray = [1, 2, 3, 4, 5];
const newArray = myArray.slice(1, 4);
console.log(newArray); // Output: [2, 3, 4]

배열의 인덱스 1부터 배열의 인덱스 3까지의 myArray 요소(인덱스 4 제외)를 포함하는 newArray라는 새 배열 생성합니다.

splice()

splice() 함수는 배열에서 요소를 추가하거나 제거하는 데 사용됩니다.
원래 배열을 수정하고 제거된 요소가 포함된 배열을 반환합니다.
splice() 메서드는 다음과 같은 하나 이상의 인수를 사용합니다.

const myArray = [1, 2, 3, 4, 5];
myArray.splice(2, 1, 'a', 'b');
console.log(myArray); // Output: [1, 2, 'a', 'b', 4, 5]

배열의 인덱스 2에서 한 요소를 제거하고 배열의 인덱스 2에서 시작하는 myArray에 'a'와 'b'라는 두 요소를 추가합니다.

 

concat()

concat() 함수는 두 개 이상의 배열을 새 배열로 병합하는 데 사용됩니다.
원래 배열은 concat() 함수에 의해 수정되지 않습니다. concat() 함수는 원래 배열의 모든 요소를 지정된 순서대로 포함하는 새 배열을 반환합니다.

concat() 함수는 배열에서 호출할 수 있으며 하나 이상의 배열을 인수로 사용합니다.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const newArray = array1.concat(array2);
console.log(newArray); // Output: [1, 2, 3, 4, 5, 6]

array1과 array2라는 두 개의 배열을 만든 다음 concat() 함수를 사용하여 newArray라는 새 배열로 병합합니다.
newArray에는 array1과 array2의 모든 요소가 포함됩니다.

join()

join() 함수는 지정된 구분 기호로 구분된 배열의 모든 요소를 연결하여 새 문자열을 만드는 데 사용됩니다.
join() 함수는 원래 배열을 수정하지 않습니다. join() 함수에는 구분자 문자열인 하나의 인수가 사용됩니다.

const myArray = ['apple', 'banana', 'cherry'];
const newString = myArray.join(', ');
console.log(newString); // Output: 'apple, banana, cherry'

myArray 배열의 모든 요소를 쉼표와 공백으로 구분하여 연결하여 newString이라는 새 문자열을 만듭니다.

indexOf()

indexOf() 함수는 배열에서 지정된 요소의 첫 번째 발생 인덱스를 찾는 데 사용됩니다.
indexOf() 함수는 지정한 요소가 배열에 없는 경우 -1을 반환합니다. indexOf() 함수는 검색할 요소인 하나의 인수를 사용합니다.

const myArray = ['apple', 'banana', 'cherry'];
const index = myArray.indexOf('banana');
console.log(index); // Output: 1

myArray 배열에서 'banana' 문자열이 처음으로 나타나는 배열의 index 값은 1이 됩니다.

 

2020.08.13 - [javascript] - 자바스크립트 javascript array sort 정렬

 

자바스크립트 javascript array sort 정렬

javascript array를 정렬하는 방법에 대해 알아보겠습니다. array sort 메서드를 사용하면 쉽게 배열을 정렬할 수 있습니다. json array sort도 json key를 바탕으로 원하는 기준으로 정렬할 수 있습니다. array.

dreamjy.tistory.com

2020.02.19 - [javascript] - [javascript] 자바스크립트 배열 array 유용한 함수 map

 

[javascript] 자바스크립트 배열 array 유용한 함수 map

1. Array map 함수map() 메서드는 배열 안의 모든 값에 대하여 주어진 함수를 실행하고 실행한 결과 값을 새로운 배열로 반환합니다. 123456789let array1 = [1, 2, 3, 4, 5]; let array2 = array1.map(x => x*x); console.log(

dreamjy.tistory.com

javascript 배열 안에서 원하는 값 또는 요소를 찾는 방법에 대해 알아보겠습니다.
배열안의 값을 찾는 법은 다양한 방법으로 구현할 수 있습니다.
찾는 값의 index번호를 알고 배열에서 바로 값을 가져오는 경우도 있고 값만 가지고 찾는 방법도 있습니다.
여러상황에서 사용하는 메서드를 알아보고 상황에 맞게 알맞은 방법을 사용하세요.

array[index]

배열의 값의 index번호를 알고 있으면 index값을 적용하여 값을 가져올 수 있습니다.

let array = ['apple', 'melon', 'grape', 'kiwi']; let found = array[1]; console.log(found); // output: melon found = array[3] console.log(found); // output: kiwi

array.indexOf

배열에서 지정된 값(요소)와 일치하는 첫 번째 인덱스 값을 반환합니다.
찾는 값이 존재하지 않으면 -1를 반환합니다.
기존 배열은 변경하지 않습니다.

Syntax: arr.indexOf(searchElement[, fromIndex])

  • searchElement: 배열에서 찾을 값
  • fromIndex: 검색을 시작할 index값 지정
let array = ['apple', 'melon', 'grape', 'kiwi', 123, "123"]; let found = array.indexOf('kiwi'); console.log(found); // output: 3 found = array.indexOf('kiw'); console.log(found); // output: -1 found = array[array.indexOf('kiwi')]; console.log(found); // output: kiwi found = array.indexOf('123'); console.log(found); // output: 5 found = array.indexOf(123); console.log(found); // output: 4

배열에서 찾고자 하는 값과 정확히 일치하는 값의 index 값을 반환합니다.

NOTE: indexOf 메서드는 변수의 타입까지 비교(===)하여 일치하는 요소를 찾습니다.
123, '123'의 값이 서로 다른 index를 반환합니다.


- array.find

배열에서 주어진 조건을 만족하는 첫 번째 값을 반환합니다.
만일 조건을 만족하지 못하면 undefined를 반환합니다.
기존 배열은 변경하지 않습니다.

Syntax: arr.find(callback(element[, index[, array]]) [, thisArg])

  • element: callback 함수에서 현재 처리하고 있는 배열의 값
  • index: 현재 처리하고 있는 배열의 index
  • array: 원본 array
let array = ['apple', 'melon', 'grape', 'kiwi']; let found = array.find(element => element == 'grape'); console.log(found); // output: grape array = [5, 9, 13, 20, 55]; found = array.find(element => element > 10); console.log(found); // output: 13

find 메서드는 조건을 만족하는 첫번째 값(요소)를 반환합니다.

INFO: 첫 번째 요소만 반환하기 떄문에 모든 요소를 찾으려면 다른 방법으로 구현해야합니다.


- array.findIndex

배열에서 주어진 조건을 만족하는 첫 번째 index 값을 반환합니다.
만일 조건을 만족하지 못하면 -1을 반환합니다.
기존 배열은 변경하지 않습니다.

Syntax: arr.findIndex(callback(element[, index[, array]])[, thisArg])

  • element: callback 함수에서 현재 처리하고 있는 배열의 값
  • index: 현재 처리하고 있는 배열의 index
  • array: 원본 array
let array = ['apple', 'melon', 'grape', 'kiwi']; let found = array.findIndex(element => element == 'grape'); console.log(found); // output: 2 array = [5, 9, 13, 20, 55]; found = array.findIndex(element => element > 10); console.log(found); // output: 2

findIndex 메서드는 조건을 만족하는 첫번째 index 값을 반환합니다.

INFO: find, findIndex 차이는 배열의 값을 반환하느냐 또는 배열의 index 값을 반환하느냐의 차이입니다.


- array.includes

배열에서 찾는 값(요소)를 포함하고 있는지 판단합니다.
찾고자 하는 값을 포함하고 있으면 true를 반환합니다.
찾고자 하는 값을 포함하고 있지 않으면 false를 반환합니다.

Syntax: arr.includes(valueToFind[, fromIndex])

  • valueToFind: 배열에서 찾을 값
  • fromIndex: 검색을 시작할 index값 지정
let array = ['apple', 'melon', 'grape', 'kiwi', 123]; let found = array.includes('grape'); console.log(found); // output: true found = array.includes('Grape'); console.log(found); // output: false found = array.includes('123'); console.log(found); // output: false

includes 메서드는 찾고자 하는 값이 배열에 존재하는지에 대한 결과를 반환합니다.

NOTE: 찾고자 하는 값이 문자나 문자열일 경우 includes는 대소문자를 구분합니다.
indexOf와 마찬가지로 변수의 타입까지 비교(===)하여 값의 존재 여부를 반환합니다.

[javascript] - 자바스크립트 javascript 문자열 찾기

[javascript] - 자바스크립트 javascript 문자열 공백 제거 trim

[javascript] - 자바스크립트 javascript string 길이 length

[javascript] - 자바스크립트 javascript 문자열 합치기

[javascript] - 자바스크립트 javascript 문자열 바꾸기 치환

[javascript] - 자바스크립트 javascript 문자열 추출 / 자르기



자바스크립트 javascript array to string 배열을 문자로 변경

자바스크립트에서 배열을 문자로 변경하는 방법에 대해 알아보겠습니다.
javascript 문자열 내장 함수인 join 메서드를 이용하는 방법과 for문를 이용하여 배열을 문자열로 변경할 수 있습니다. 두 가지 방법을 비교해 보겠습니다.

  • join: 배열의 모든 요소를 합쳐 하나의 문자열을 반환합니다.

- join

배열의 모든 요소를 합쳐 하나의 문자열을 반환합니다.
새로운 문자열을 반환합니다.

Syntax: arr.join([separator])

let array1 = ['one', 'two', 'three']; console.log(array1.join()); // output: "one,two,three" console.log(array1.join('')); // output: "onetwothree" console.log(array1.join('-')); // output: "one-two-three"

INFO: 구분자를 생략하면 쉼표로 구분되어 새로운 문자열을 반환합니다.

for문 사용

let array1 = ['one', 'two', 'three']; let str = ''; let separator = ','; for (let i=0; i<array1.length; i++) { str += array1[i] + (i == array1.legnth - 1 ? '' : separator); } console.log(str); // output: "one,two,three"

INFO: for문을 이용하여 구현할 수 있으나 join 함수를 사용하는게 편하고 쉽다.

2차원 배열 join 함수 적용

let array1 = [ ['one', 'two', 'three'], ['four', 'five', 'six'], ['seven', 'eight', 'nine'], ]; console.log(array1.join("-")); // output: "one,two,three-four,five,six-seven,eight,nine"

INFO: 이차원 배열에 join 함수를 사용하면 내부 배열은 쉼표(default)로 구분되어 지고 외부 배열이 구분자로 구분됩니다.

javascript array 내장 함수인 join 함수, 배열의 요소를 구분자로 구분하여 하나의 문자열로 반환하는 함수에 대해 알아보았습니다.
핸드폰 번호를 표시할 때 구분자로 - 기호를 쓰거나 어떤 주제에 대한 태그 목록을 # 기호로 구분하여 표시할 때 유용하게 쓸 수 있을꺼 같습니다.


[javascript] - 자바스크립트 javascript 문자열 찾기

[javascript] - 자바스크립트 javascript 문자열 공백 제거 trim

[javascript] - 자바스크립트 javascript 문자열 합치기

[javascript] - 자바스크립트 javascript 문자열 바꾸기 치환

[javascript] - 자바스크립트 javascript 문자열 추출 / 자르기



1. Array 정의

같은 종류의 데이터들이 순서를 가지고 저장되는 자료구조를 나타냅니다. 배열은 순서를 가지고 있기 때문에 임의의 위치에 있는 데이터의 위치만 알면 바로 값을 가져올 수 있습니다. 


2. Array 선언

선언과 동시에 데이터를 초기화할 수도 있고 선언 이후에 index 값을 이용하여 초기화할 수도 있습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let array1 = new Array(123)
let array2 = [123]
 
console.log(array1) // [1, 2, 3]
console.log(array2) // [1, 2, 3]
 
let array3 = new Array();
array3[0= "a";
array3[1= "b";
array3[2= "c";
 
let array4 = [];
array4[0= "a";
array4[1= "b";
array4[2= "c";
 
console.log(array3) // ["a", "b", "c"]
console.log(array4) // ["a", "b", "c"]
cs


3. Array length(크기, 길이)

배열의 길이는 선언한 배열 안에 데이터의 갯수를 나타냅니다.


1
2
3
4
5
6
7
let array1 = new Array(123)
let array2 = [12]
 
console.log(array1.length// 3
console.log(array2.length// 2
 
console.log(array1[array1.length-1// 3, 마지막 위치의 데이터
cs

4. Array index(번호)

배열은 순서를 가지고 있는 구조이고 위치값(번호)을 이용하여 데이터를 초기화하거나 가져올 수 있습니다.

이때 배열의 시작은 0 부터 시작합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let array1 = new Array(123)
let array2 = [123]
 
console.log(array1[0]) // 1
console.log(array2[1]) // 2
 
let array3 = new Array();
array3[0= "a";
array3[1= "b";
array3[2= "c";
 
let array4 = [];
array4[0= "a";
array4[1= "b";
array4[1= "c";
 
console.log(array3) // ["a", "b", "c"]
console.log(array4) // ["a", "c"]
cs

5. 예제보기


6. 관련링크

[javascript] 배열 추가 삭제 array 다루기

[javascript] 문자열 자르기, split, split()

javascript json get value, get key json 키 밸류

[javascript] 문자열 비교

javascript 콜백 함수 callback function, 함수 리턴


+ Recent posts