배열

holang-i·2021년 3월 9일

원시 타입, 참조 타입

원시 타입 데이터에는 number, string, boolean, undefined, null 외에 bigInt, symbol이 있다.

참조타입에는 배열, 객체, 함수가 있는데 이번에는 배열에 대해 아래에서 더 자세하게 공부해 볼 것이다.

Array

배열은 대용량의 데이터를 다룰 때 사용할 수 있다.

대량의 데이터를 다루기에 적합하게 제작된데이터 타입을
참조타입(Reference Type) 데이터라고 부른다.

배열에서 사용되는 용어

index, element, length

arr[i], push, pop

배열에서 특정 인덱스(index)의 요소(element)를 조회 및 변경

배열 안에 배열이 있는 이중 배열의 요소의 조회 및 변경

배열의 반복

배열을 반복해서 다루기

for문과 배열을 이용해서 반복적으로 코드 실행하기

반복문 안에서 조건문을 응용해서 특정 경우에 코드 실행하기

이중 포문을 활용하기

문자열과 배열의 형태 변환을 하는 메서드

띄어쓰기(" ")로 문자열 구별, 배열로 변환 : str.split(" ").join("");

위의 배열을 다시 문자열로 만들기

배열 기초 메소드

배열 요소(element)를 조회, 추가, 삭제, 복사, 분리 하기
--> unshift, shift, slice, length

Array.isArray를 사용해서 배열인지 아닌 지 판단 하기

배열의 요소를 추가(push), 삭제하기(pop)

indexOf, includes을 사용해서 자바스크립트의 특정 값에 배열이 포함되어 있는지 확인

배열 기초

배열은 순서가 있는 값을 의미한다.
let arr = [20, 35, 98, 30, 59, 78]; 
값 === 요소(element)

위의 배열안에 있는 각각의 값들을 요소라고 부른다.

배열의 순서는 인덱스라고 부른다.

인덱스는 숫자를 셀 때 1부터가 아닌 0부터 시작한다.

배열을 사용하는 방법

대괄호(square bracket)를 이용해서 배열을 만든다.

그리고 각각의 원소, 요소(element)들은 콤마, 쉼표로 구분한다.

만약 배열 안의 원소가 문자일 경우 "" 문자열을 통해 감싸준다.

인덱스를 통해 값 조회
let arr = [20, 35, 98, 30, 59, 78]; 
arr[0] = 20, arr[1] = 35, ...arr[5] = 78
인덱스를 통해 값 변경
let arr = [20, 35, 98, 30, 59, 78]; 
arr[3] = 777;
console.log(arr[3]); // 777

배열의 인덱스를 넘어가는 값에 접근: undefined

let num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
num[11]; // undefined

이차 배열

num의 1번째 인덱스의 값 접근하기
let num = [[1, 5], [7, 2], [8, 3]];
num[2]; //[8, 3];
num의 1번째 인덱스의 0번째 값 출력하기
let num = [[1, 5], [7, 2], [8, 3]];
num[2][0]; //[7];
종류 0 1
0 1 5
1 7 2
2 8 3

종류	0	1
0	1	5
1	7	2
2	8	3

배열의 길이 구하기: arr.length()

let arr = [1, 5, 3, 7, 8, 4, 0];
console.log(arr.length); // 7
온점 .을 이용해서 변수가 가지고 있는 속성(property)에 접근할 수 있다.

배열에 마지막 요소 추가: arr.push()

배열에서는 요소(element)를 추가할 수 있다.

push()를 사용한다.

배열의 맨 뒤쪽, 마지막 요소에 추가된다.
let str = ['a', 'b', 'c', 'd', 'e'];
str.push('f');
console.log(str); // ['a', 'b', 'c', 'd', 'e','f'];
온점 .을 이용해서 관련된 명령(method)을 실행할 수 있다.

명령을 실행할 때는 함수를 실행하는 것으로 ( ) 괄호를 쓰고 그 안에 값을 넣어서 실행할 수 있다.

배열의 마지막 요소 삭제: arr.pop()

배열에서는 요소(element)를 삭제할 수 있다.

pop()을 사용한다.

배열의 맨 뒤쪽, 맨 마지막 요소의 값을 삭제한다.
let num = [1, 3, 5, 7, 9, 11, 13];
num.pop();
console.log(num); // [1, 3, 5, 7, 9, 11];
배열의 마지막 값을 삭제하려면 pop( )를 사용한다.

배열의 처음 요소 삭제: arr.shift()

let str = ['a', 'b', 'c', 'd', 'e'];
str.shift(); "a"
console.log(str); // ['b', 'c', 'd', 'e'];
shift( )를 사용하면 배열의 맨 앞의 요소가 삭제된다.

삭제한 요소를 반환한다.

배열의 처음 요소 추가: arr.unshift()

배열의 맨 앞에 요소를 추가
let str = ['a', 'b', 'c', 'd', 'e'];
str.unshift("JavaScript!!!");
console.log(str); // ["JavaScript!!!", "a", "b", "c", "d", "e"]
unshift( )를 사용하면 배열의 맨 앞에 요소가 추가된다.

추가한 배열의 길이를 반환한다.

반복문을 통해 배열의 요소(element)를 출력

배열의 각 요소들을 출력하려면 어떻게 할 수 있을까?

바로 반복문을 사용하면 배열의 요소에 접근할 수 있고, 각각의 값들을 콘솔에 찍어 볼 것이다.

for...of 문
let str = ['JavaScript', 'html', 'css', 'React', 'NodeJS', 'Java', 'C'];

// 배열의 인덱스는 0부터 시작한다.
// 가져온 배열의 요소만큼 반복문이 돈다.
for(let key of str) {
  console.log(str[key]);
}
for 문

위와는 다른 코드로 인덱스와 배열의 길이만큼 반복문을 돌릴 수 있다.
let str = ['JavaScript', 'html', 'css', 'React', 'NodeJS', 'Java', 'C'];

// 배열의 인덱스는 0부터 시작한다.
// 가져온 배열의 길이보다 1작은 수만큼 반복문이 돈다.
for(let i=0; i<str.length; i++) {
  console.log(str[i]);
}

배열의 모든 요소를 구한 합을 리턴

배열의 모든 요소들을 더한 합을 리턴하는 코드를 작성해 볼 것이다.
let numArr = [39, 28, 97, 10, 58, 82, 65, 12, 31, 89, 3, 35, 66, 79];
let result = 0;

for(let i=0; i<numArr.length; i++) {
  result += numArr[i]; 
}
console.log(result); // 694
위의 코드를 암산으로 계산하려면 할 수는 있지만, 반복문을 사용하면, 수많은 데이터의 처리를 빠르게 해결할 수 있다.

Array.isArray()

배열인지 배열이 아닌지를 판별할 수 있는 함수가 있다.

바로 배열.isArray( )이다.

let num = [5, 3, 2, 1, 8, 9, 10];

typeof 'JavaScript'; // "string"
typeof 789; // "number"
typeof num; // object

let obj = {
  key1: "value1",
  key2: "value2",
  key3: "va;ue3"
};

typeof obj; // object

Array.isArray(value);

isArray(값) 이 배열이면, true가 반환된다.

Array.isArray(num); // true
Array.isArray("array"); // false
Array.isArray(123); // false
Array.isArray(true); // false

배열에 요소가 있는지 확인: indexOf()

배열의 요소들에 해당 값이 있는지 판별할 수 있다.

배열 안에 해당 요소가 있으면, 해당 요소의 인덱스를 리턴한다.

배열 안에 해당 요소가 없으면, -1을 리턴한다.

indexOf( )에 찾을 값을 넣을 때 대, 소문자를 구분하기 때문에 잘 확인해야 된다.

찾고자하는 값이 있는 경우 인덱스를 반환받을 수 있다.
let str = ['hi', 'hello', 'JavaScript', 'I love coding', 'I love it!'];
str 배열에 'javascript!'라는 값이 있는 지 찾아본다.
str.indexOf('javascript!'); // -1
str.indexOf('JavaScript'); // 2
str이라는 배열안에 있는지 없는지를 검사할 수 있다.
str.indexOf('hi') !== -1; // true
str.indexOf('HI') !== -1; // false

배열에 요소가 있는지 확인: includes()

includes( )를 이용하지 않고, 배열에 값이 있는지, 없는지의 여부를
true, false로 반환해주는 함수 만들어보기

let str = ['JavaScript', 'hello javaScript', 'hi', 'I love coding', 'WAS!!'];
let isIncludes = function(arr, element) {
   // 해당하는 값, 요소가 있으면 true를 리턴, 없으면 false를 리턴한다.
   let result = arr.indexOf(element) !== -1;
   return result;
}

isIncludes(str, 'Hi'); // false 
isIncludes(str, 'WAS!!'); // true
isIncludes(str, 'hello javaScript'); // true

includes( ) 사용하기

let str = ['JavaScript', 'hello javaScript', 'hi', 'I love coding', 'WAS!!'];

str.includes('JavaScript'); 
str.includes('I love coding'); 
str.includes('java');

console.table()

console.table( )을 이용하면, 시각화가 되어 있는 표로 값을 확인할 수 있다.
let arr = ['JavaScript', 'React', 'NodeJS', 'AWS'];

console.table(arr);
index와 value를 한 눈에 보기 좋게 테이블로 정리가 되어 있다.

holang-i

🌿

이전 포스트

조건부 분기 if, '?'

다음 포스트

배열

원시 타입, 참조 타입

Array

배열에서 사용되는 용어

배열의 반복

문자열과 배열의 형태 변환을 하는 메서드

배열 기초 메소드

배열 기초

배열을 사용하는 방법

인덱스를 통해 값 조회

인덱스를 통해 값 변경

배열의 인덱스를 넘어가는 값에 접근: undefined

이차 배열

배열의 길이 구하기: arr.length()

배열에 마지막 요소 추가: arr.push()

배열의 마지막 요소 삭제: arr.pop()

배열의 처음 요소 삭제: arr.shift()

배열의 처음 요소 추가: arr.unshift()

반복문을 통해 배열의 요소(element)를 출력

for...of 문

for 문

배열의 모든 요소를 구한 합을 리턴

Array.isArray()

Array.isArray(value);

배열에 요소가 있는지 확인: indexOf()

배열에 요소가 있는지 확인: includes()

includes( ) 사용하기

console.table()

조건부 분기 if, '?'

객체

0개의 댓글