[JavaScript]자바스크립트 기초문법4 - [배열(array)]

in JavaScript on Basic


이번 포스트는 [배열(array)]에 관한 내용입니다.

1️⃣ 배열(array)기본 사용

  • JavaScript는 객체지향언어라고는 하지만 다른언어와 마찬가지로 배열(array)의 기능도 있습니다.
  • 배열마다 주소값이 있으며 참조형으로 주고받는다는점에서 다른언어들에서의 배열과 비슷한 특성을 가지고 있습니다. (단, index값을 지정하여 요소를 복사하면 참조형이아닌 값으로써 복사됩니다.)

(1) 배열 선언

  • 파이썬에서 리스트와 같이 []안에 요소를 담아 선언합니다.
  • 각요소의 index값은 0부터 순차적으로 할당됩니다.
let array = ['apple', 'orange', 'peach'];
console.log(typeof array);
console.log(array);
for (let i = 0; i < 3; i++)
{
  console.log(array[i]);
}
/*-------출력-------*/
object
[ 'apple', 'orange', 'peach' ]
apple
orange
peach

(2) 배열 길이

  • .length를 이용하여 배열의 길이를 쉽게 구할 수 있습니다.
  • 다른방법으로 ['length']를 사용할 수 있습니다.
let array = ['apple', 'orange', 'peach'];

console.log(array.length);
console.log(array['length']);
for (let i = 0; i < array.length; i++)
{
  console.log(array[i]);
}
/*-------출력-------*/
3
3
apple
orange
peach

(3) 배열의 요소 추가

  • C언어와 같이 배열의 크기를 따로 조절해 줄필요없이 원하는 index에 값을 대입하면 요소를 추가할 수 있습니다.
  • 하지만 index를 순차적으로 사용하지않고 건너뛰는 부분이 있으면 empty

< 배열선언 >

let array = ['apple', 'orange', 'peach'];

< 올바른 index에 값삽입의 경우 >

array[array.length] = 'strawberry';
console.log(array);
/*-------출력-------*/
[ 'apple', 'orange', 'peach', 'strawberry' ]

< 2칸 뒤의 index에 값삽입의 경우 >

array[array.length + 2] = 'strawberry';
console.log(array);
/*-------출력-------*/
[ 'apple', 'orange', 'peach', <2 empty items>, 'strawberry' ]
  • <2 empty items>로 2개의 빈 item이 있다고 출력되는 것을 확인할 수 있습니다.

< 이미정의된 index에 값삽입의 경우 >

array[newIndex - 1] = 'strawberry';
console.log(array);
/*-------출력-------*/
[ 'apple', 'orange', 'strawberry' ]

(4 - 1) 배열의 요소 삭제(delete, [잘못된 방법])

  • 객체에서 프로퍼티를 삭제하는 방법과 같이 delete를 써서 배열이 요소값을 지울 수 있습니다.
  • 하지만 완전히 삭제되지 않고 <empty>로 남아 있음을 확인할 수 있습니다.
let array = ['apple', 'orange', 'peach'];
delete array[2];

console.log(array);
/*-------출력-------*/
[ 'apple', 'orange', <1 empty item> ]

(4 - 2) 배열의 요소 삭제(splice, [올바른 방법])

  • 그렇기 때문에 배열의 요소를 완전히 삭제하기 위해서는 delete대신 splice메소드를 사용해야 합니다.
  • splice메소드는 첫번째인자 값과 그이후의 index의 요소까지 삭제해버립니다.

< 첫번째인자만을 사용한 splice메소드 >

let array = ['apple', 'orange', 'peach', 'strawberry'];

array.splice(1);
console.log(array);
/*-------출력-------*/
[ 'apple' ]
  • 두번째인자 값으로 삭제할 요소의 개수를 지정할 수 있습니다.
  • 삭제한 요소 뒤쪽에 있는 요소들은 앞으로 순차적으로 재배치 됩니다.

< 첫번째, 두번째인자를 사용한 splice메소드 >

let array = ['apple', 'orange', 'peach', 'strawberry'];

array.splice(1, 1);
console.log(array);
console.log(array[2]);  // 뒤의 요소가 재배치됨을 확인
/*-------출력-------*/
[ 'apple', 'peach', 'strawberry' ]
strawberry
  • splice메소드의 세번째 인자값부터는 첫번째 인자 값의 index위치 부터 순차적으로 요소를 생성합니다.

< 세번째 인자까지도 사용한 splice메소드 >

let array = ['apple', 'orange', 'peach', 'strawberry'];

array.splice(1, 1, 'aa', 'bb', 'cc');
console.log(array);
/*-------출력-------*/
[ 'apple', 'aa', 'bb', 'cc', 'peach', 'strawberry' ]
  • 이러한 splice메소드의 특성을 이용하여 원하는 위치에 요소를 추가하는 함수로 사용할 수 있습니다.

< 요소추가함수로써 splice메소드 이용 >

let array = ['apple', 'orange', 'peach', 'strawberry'];

array.splice(1, 0, 'new1', 'new2');
console.log(array);
/*-------출력-------*/
[ 'apple', 'new1', 'new2', 'orange', 'peach', 'strawberry' ]



2️⃣ 배열(array)의 메소드 사용

  • 몇몇의 메소드는 배열의 index를 생각하지않고 간편하게 ‘요소’를 생성하고 삭제할 수있게 도와줍니다.

(1) 요소 제거 메소드

  • .shift()메소드는 배열의 첫번째 ‘요소’를 제거 해줍니다.
  • .pop()메소드는 배열의 마지막번째 ‘요소’를 제거 해줍니다.
let array = ['apple', 'orange', 'peach', 'strawberry'];

/* 첫번째 요소 삭제 메소드 */
array.shift();
console.log(array);

/* 마지막번째 요소 삭제 메소드 */
array.pop();
console.log(array);
/*-------출력-------*/
[ 'orange', 'peach', 'strawberry' ]
[ 'orange', 'peach' ]

(2) 요소 추가 메소드

  • .unshift()메소드는 배열의 첫번째 자리부터 ‘요소’를 추가 해줍니다.
  • .push()메소드는 배열의 마지막번째 자리부터 ‘요소’를 추가 해줍니다.
let array = ['apple', 'orange', 'peach', 'strawberry'];

array.unshift('aa', 'bb');  // 여러게의 인자를 받을 수 있음
console.log(array);

array.push('cc');
console.log(array);
/*-------출력-------*/
[ 'aa', 'bb', 'apple', 'orange', 'peach', 'strawberry' ]
[ 'aa', 'bb', 'apple', 'orange', 'peach', 'strawberry', 'cc' ]

(3) 특정 값 찾기 메소드

  • indexOf메소드는 배열의 첫번째 index부터 순차적으로 값을 탐색하여 찾아줍니다.
  • lastIndexOf메소드는 배열의 마지막index부터 역순으로 값을 탐색하여 찾아줍니다.
  • 값을 찾는데 성공시 그 값(요소)의 index의 값을 반환해 줍니다. (가장 먼저 발견된 값의 index를 반환합니다.)
  • 값을 찾는데 실패시 -1을 반환 합니다.
let array = ['a', 2, 'b', 'a', 2, 'b', 4];

console.log(array.indexOf(2));
console.log(array.lastIndexOf('a'));
/*-------출력-------*/
1
3

(4) 특정 값 존재유무 확인 메소드

  • includes메소드를 사용하면 특정 값의 존재유무를 boolean형으로 알 수 있습니다.
let array = ['apple', 'orange', 'peach', 'strawberry'];

console.log(array.includes('orange'));
console.log(array.includes('abocado'));
/*-------출력-------*/
true
false

(5) 배열을 뒤집는 메소드

  • reverse라는 메소드를 이용하면 배열의 순서를 뒤집을 수 있습니다.
let array = ['apple', 'orange', 'peach', 'strawberry'];

console.log(array);
array.reverse();
console.log(array);
/*-------출력-------*/
[ 'apple', 'orange', 'peach', 'strawberry' ]
[ 'strawberry', 'peach', 'orange', 'apple' ]

(6) 그밖의 배열관련 메소드

배열문법에 대한 사이트 링크 🖝🖝 Mozilla-array(배열)

3️⃣ 기타 배열 문법

(1) for of 반복문

  • for문을 이용할 때 of를 이용하면 배열의 요소값을 손쉽게 불러올 수 있습니다.
  • in도 배열에 사용할 수 있지만, in은 객체를 다루기 위해 사용하는 문법으로 배열에 사용할시 예상치 못한 결과를 얻을 수도 있습니다.

< of를 사용한 for문(추천방식) >

let array = ['apple', 'orange', 'peach', 'strawberry'];

for (let fruit of array)
{
  console.log(fruit);
}
/*-------출력-------*/
apple
orange
peach
strawberry
  • of대신 in을 사용하게 되면 요소의 index값이 출력됨을 알 수 있습니다.
  • for in은 객체에 좀 더 최적화된 문법이기 때문에 배열에 사용하는 것은 자제하는 것이 좋습니다.

< in을 사용한 for문(비추천방식) >

let array = ['apple', 'orange', 'peach', 'strawberry'];

for (let index in array)
{
  console.log(index);
}
for (let index in array)
{
  console.log(array[index]);
}
/*-------출력-------*/
0
1
2
3
apple
orange
peach
strawberry

(2) 다차원 배열

  • 배열안에 ‘배열형태의 요소’를 가지는 형태로 객체안의 객체와 느낌이 비슷한 배열입니다.
  • 하지만 각각의 요소의 특별한 의미를 부여하지않고 단순히 리스트의 형태로 사용할 때 사용합니다. (각각의 요소에 의미를 부여하고 싶으면 ‘객체’를 이용합니다.)
  • 배열이기 때문에 splice메소드를 이용하여 자유롭게 수정이 가능합니다.
let narray = [['a', 'b'], ['c', 'd'], ['e', 'f']];

console.log(narray);
console.log(narray[1]);
console.log(narray[1][0]);
console.log();

/* `값형태의 요소`를 추가 */
narray.splice(1, 0, 'a');
console.log(narray);
console.log();

/* `배열형태의 요소`를 추가 */
narray.splice(1, 0, ['s','s']);
console.log(narray);
console.log();

/* '배열형태의 요소'를 삭제 */
narray.splice(2,1);
console.log(narray);
console.log();

/* 'narray[2]'에 접근하여 사용 */
narray[2].splice(0,1);
console.log(narray);
/*-------출력-------*/
[ [ 'a', 'b' ], [ 'c', 'd' ], [ 'e', 'f' ] ]
[ 'c', 'd' ]
c

[ [ 'a', 'b' ], 'a', [ 'c', 'd' ], [ 'e', 'f' ] ]

[ [ 'a', 'b' ], [ 's', 's' ], 'a', [ 'c', 'd' ], [ 'e', 'f' ] ]

[ [ 'a', 'b' ], [ 's', 's' ], [ 'c', 'd' ], [ 'e', 'f' ] ]

[ [ 'a', 'b' ], [ 's', 's' ], [ 'd' ], [ 'e', 'f' ] ]



< 자바스크립트[JavaScript] 기초문법 포스트 목차 >

1.  자바스크립트 기초문법1 [변수선언, 기본출력, 기본 규칙]
2.  자바스크립트 기초문법2 [자료형, 연산자, 함수선언, 반복문, 조건문]
3.  자바스크립트 기초문법3 [객체(objact)]
>> 자바스크립트 기초문법4 [배열(array)]
5.  자바스크립트 기초문법5 [(지수,n진법)표기법, 숫자형 메소드, Math객체]



© 2021.02. by kirim

Powered by kkrim