배열

대량의 정보를 보관하고 관리할 수 있는 배열에 대해 학습해봅시다.

 

배열: 순서가 있는 값

값: 요소(element)

순서: 인덱스(index) ex) 0번째 인덱스의 값, 1번째 인덱스의 값...

 

배열은 대괄호(square bracket):[]을 이용해서 만든 후 각각의 원소(element)는 쉼표(comma)로 구분해줍니다.

값은 인덱스를 이용해서 접근합니다.

let number = [23, 34, 12, 25];

//"number라는 배열의 3번째 인덱스"를 조회하려면
number[3]; // 12

//"number라는 배열의 3번째 인덱스"의 값을 변경하려면
number[3] = 486;
number; // [23, 34, 486, 25];

연습

let fruits = [
   'goldkiwi',
   'orange',
   'grape'
];
// fruits의 2번째 인덱스 값은? grape
// fruits의 3번째 인덱스 값은? undefined

인덱스를 벗어나면 undefined!!!

 

연습

let numberArray = [[32,24], [44, 1], [763, 12]];

// numberArray의 1번째 인덱스의 값은?
// [44,1]

// numberArray의 1번째 인덱스값의 0번째 인덱스의 값은?
// numberArray[1][0] 으로 확인 가능  -- 2차원 배열
// [44] 

이런식으로 배열은 중첩시켜서 사용 가능 합니다.

 

배열과 반복문 조합하기

반복문을 이용해 배열의 요소를 한번씩 출력하는 방법?

let numberArray = [23, 25, 26, 74];

for (let n = 0; n < numberArray.length; n++){
	console.log(numberArray[n]);
    
//0부터~ 배열의 길이(numberArray.length)보다 작을 때까지 반복

배열안의 모든 숫자 더하는 법?

let numberArr = [10, 20, 30, 20];
let sum = 0; 

for(let i = 0; i < numberArr.length; i++){
	sum = sum + numberArr[i];
}

console.log(sum); // 80

// sum = 0 인 이유는 값을 할당해주지 않으면 undefined인데
// undefined + 10은 NaN이기 때문!!

undefined + 숫자는 NaN이라는 것을 기억합시다.

 

배열안의 값 바꾸기!

const arr = [1,2,3]

arr[1] = '바꾸기'

arr = [1, "바꾸기", 3]

 

typeof

console.log(typeof 42);
// expected output: "number"

console.log(typeof 'blubber');
// expected output: "string"

console.log(typeof true);
// expected output: "boolean"

console.log(typeof undeclaredVariable);
// expected output: "undefined"

typeof null          // "object" (not "null" for legacy reasons)
typeof undefined     // "undefined"
null === undefined   // false
null  == undefined   // true
null === null        // true
null == null         // true
!null                // true
isNaN(1 + null)      // false
isNaN(1 + undefined) // true

typeof는 문자열, 숫자, 불리언, undefined을 알아낼 수 있는 메소드입니다.

ex) typeof 123 // "number", typeof '문자열' // "string"

하지만, typeof 배열을 해주면 "object"이기 때문에, Array.isArray를 사용하면 됩니다.

 

Array.isArray() 는 ()안에 넣어주면 array인지 아닌지에 따라 true, false로 반환합니다.

ex) Array.isArray('문자열') // false, Array.isArray(123)// false,

Array.isArray(words) // true when words is array. let words= [1, 2, 3]

 

numberArray.length; //3 배열의 길이를 알아낼 수 있습니다.

arr.length === 0 이면 빈 배열! arr이 빈 배열인지 확인하려면 arr.length === 0!!

[] === [] 은 false. 자바스크립트 상에서는 두 배열을 "주소가 다른 두 개의 빈 배열"이라고 생각함!

 

배열의 앞에 요소(element) 추가: numberArray.unshift('hi');

-- unshift 가 리턴하는 값은 배열의 length 를 리턴합니다

배열의 앞의 요소(element) 삭제: numberArray.shift();

배열의 뒤에 요소(element) 추가: numberArray.push(23); -- .push(element0, element1, ... , elementN)식으로 사용

배열의 뒤의 요소(element) 삭제: numberArray.pop();

 

array.slice() 배열의 begin부터 end 까지 (end 미포함) 에 대한 얕은 복사본을 새로운 배열 객체 반환 

  - array.slice(0)을 하면 array 원본을 건드리지 않고, 새로운 배열로 복사 가능!

----- arr.slice(여기서부터, 여기까지)

 

array.split() 전달인자로 들어가는 string을 기준으로 끊어 배열에 담아주고 그 배열을 리턴하는 메소드

만약 let codingArr = codinghi.split("-")하면 -를 기준으로 끊어서 담아줌.

let codinghi = "010-1234-5678"
let codingArr = codinghi.split("-")
console.log(codingArr)
// 결과는 ["010","1234","5678"]

array.splice(start, deleteCount, el) 배열의 특정 위치에 배열 요소를 추가하거나 삭제. 삭제한 요소가 없어도 빈배열 반환

/* 배열 임의의 위치에 요소 추가 제거 */
// start - 수정할 배열 요소의 인덱스
// deleteCount - 삭제할 요소 개수, 제거하지 않을 경우 0
// el - 배열에 추가될 요소
arr.splice(start, deleteCount, el);


var arr = [1, 5, 7];
arr.splice(1, 0, 2, 3, 4);  // [], arr: [1, 2, 3, 4, 5, 7]
arr.splice(1, 2);           // [2, 3], arr: [1, 4, 5, 7]

splice를 이용해서 앞의 배열을 지우고 싶다면,

arr.splice(0,n+1) 왜냐하면 

const months = ['Jan', 'Feb', 'March', 'April', 'June'];
months.splice(0,2);
//Array ["March", "April", "June"]


const months = ['Jan', 'Feb', 'March', 'April', 'June'];
months.splice(0,1);
//Array ["Feb", "March", "April", "June"]

splice(start, deleteCount)는

deleteCount에 넣는 숫자 바로 전까지를 삭제해주기 때문

 

numberArray.indexOf('the')를 하면 배열에 있으면 있는 위치를 숫자로 나타내고, 없으면 -1을 출력

words.includes('hi') 는 배열안의 요소의 존재 여부를 true false로 출력

하지만, .includes는 인터넷 익스플로러에서 사용할 수 없으므로 indexOf를 쓰는것을 추천!

 

words.indexOf 사용하기

let words = ['hi', 'help', 'me'];

words.indexOf('help') // 1
words.indexOf('me') // 2
words.indexOf('hi') // 0

words.indexOf('pew') // -1
words.indexOf('왜-1이나올까요') // -1

// 그래서 
words.indexOf('help') !== -1 // true
words.indexOf('있나요') !== -1 // false
// 이런식으로 이 요소가 배열에 있는지 없는지 확인 가능

// 이런 함수로 만들 수 있음
function hasElement(arr, element) {
  let isPresent = arr.indexOf(element) !== -1;
  return isPresent;
}
hasElement(words, 'help') // true
hasElement(words, '있나요') // false

concat() - 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열 반환 [ Immutable ]

* 기존 배열을 변경하지 않습니다

* 새로 추가된 배열을 반환합니다

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

for... of

for...of 명령문은 반복가능한 객체에 대해서 반복하며 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를생성

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

Array에 대해 반복:

let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

String에 대해 반복:

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

+ 그 외에 공부한 것

array.from() 유사 배열 혹은 반복가능한 객체로부터 새 Array 인스턴스를 만듭니다.

function f() {
  var args = Array.from(arguments);
  console.log(args);
}

f(1, 2, 3);  // [ 1, 2, 3 ]

reverse 배열 요소 순서 뒤집기

// 요소 순서를 반전 시킴
var arr = [1, 2, 3, 4];
arr.reverse();  // [4, 3, 2, 1]

 

push로 array 두개 병합(merge)하는 법 -- apply()를 이용하면 됩니다.

let vegetables = ['parsnip', 'potato']
let moreVegs = ['celery', 'beetroot']

// Merge the second array into the first one
// Equivalent to vegetables.push('celery', 'beetroot')
Array.prototype.push.apply(vegetables, moreVegs)

console.log(vegetables)  // ['parsnip', 'potato', 'celery', 'beetroot']

 

 

console.tabe(arr) 을 사용하면 표 형식으로 배열이 나와서 콘솔에 찍을때 사용하면 좋습니다.

toString

배열엔 toString 메서드가 구현되어 있어 이를 호출하면 요소를 쉼표로 구분한 문자열이 반환됩니다.

let arr = [1, 2, 3];

alert( arr ); // 1,2,3
alert( String(arr) === '1,2,3' ); // true

alert( [] + 1 ); // "1"
alert( [1] + 1 ); // "11"
alert( [1,2] + 1 ); // "1,21"