[생활코딩] JavaScript 문법 - 배열

이번편에서는 자바스크립트 문법 배열을 배워보자. 배열은 영어로 array 이며, 대괄호 [ ] 를 쓴다는 것을 기억해라. 나중에 반복문이랑 활용하면 가치가 높아진다.

---

배열(array)

연관돼있는 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입이다.

변수는 데이터들을 담는 그릇으로 하나의 데이터를 저장하기 위한 것이다. 

배열 또한 데이터들을 담는 그릇이지만 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이다.

var name = 'egoing'
alert(name);

배열의 생성

변수 member에 회원정보를 담아보자. 대괄호로 시작해서 대괄호로 끝내야 한다. 대괄호 [ ] 는 배열을 만드는 기호이다.

대괄호 안에서 데이터를 콤마 , 로 나열하면 된다.

var member = ['egoing', 'k8805', 'sorialgi']
alert(member[0]);
alert(member[1]);
alert(member[2]);

결과 => egoing k8805 sorialgi

하나의 변수에 3개의 데이터를 담았는데 각각의 데이터를 원소(element)라고 부른다. 

배열에 있는 값을 꺼내올 때는?

경고창으로 출력할 경우 alert( )를 사용하고 ( ) 안에다가 변수인 number를 쓰며 배열을 만드는 기호 [ ]에 숫자를 넣어서 출력하면 된다. 프로그래밍에서는 숫자를 0부터 numbering 하니까 0~2까지 해주면 된다. 이 숫자를 색인(index) 라고 부른다.

 

배열이 없다면?

회원 아이디를 제공해야 할 때, 함수를 쓴다면? 

함수는 하나의 값만을 출력(return) 할 수 있으므로 각각의 회원정보를 출력하는 함수를 만들어야한다.

function get_member1(){
    return 'egoing';
}
document.write(get_member1());
 
function get_member2(){
    return 'k8805';
}
document.write(get_member2());
 
 
function get_member3(){
    return 'sorialgi'
}
document.write(get_member3());

만약 배열을 이용한다면? 간.단.

function get_members(){
    return ['egoing', 'k8805', 'sorialgi'];
}
var members = get_members();
document.write(members[0]);
document.write(members[1]);
document.write(members[2]);

배열은 연관되어 있는 정보를 한꺼번에 다룰 수 있도록 해준다. 이는 프로그래밍을 하는데 있어서 중요한 수단이다.

배열의 사용

배열에 담겨 있는 어떤 값을 우리가 가져올 때, index(숫자)값이 1000개 이상일 경우, 그 값을 기억하고 있다는 것은 불가능하다. 고로, 배열에 담겨 있는 값들을 '반복문'으로 하나씩 꺼낸 후 가공하는 것이 배열을 사용하는 핵심적인 요소이다. 배열은 혼자 쓰이기 보다는 '배열 + 반복문' 조합으로 이용해야 가치가 발휘된다. 반복문으로 리스트에 담긴 정보를 하나씩 꺼내서 처리 할 수 있기 때문이다.

function get_members(){
    return ['egoing', 'k8805', 'sorialgi'];
}
members = get_members();
// members.length는 배열에 담긴 값의 숫자를 알려준다. 
for(i = 0; i < members.length; i++){
    // members[i].toUpperCase()는 members[i]에 담긴 문자를 대문자로 변환해준다.
    document.write(members[i].toUpperCase());   
    document.write('<br />');
}

결과 => EGOING K8805 SORIALGI

알아둘 것 

• 반복문 이용 => 배열 members의 원소를 하나씩 꺼냄 => 원소를 대문자로 변경 =>  출력
• 배열이란 연관된 정보를 하나의 그룹으로 관리하기 위해서 사용한다.
• 그리고 그 정보를 처리 할 때는 반복문을 이용한다. 
• .toUpperCase(); 이 내장함수는 소문자를 대문자로 바꿔준다.
• .length(); 이 내장함수는 배열에 담겨있는 값(원소)이 몇개 인가를 나타내준다.
• 내장함수:  JS언어 안에 기본적으로 내장되어있는 함수이다. 함수니까 ( );를 쓰는 것.
• 사용자 정의 함수: 우리가 직접 작성해서 정의하는 함수이다. function 변수( ){ } 이런 것.
• 반복문: for ( true 인지 false 인지 확인 후 true 면 { }출력) { 실행되어야 할 코드 } 기억할 것.

---

배열의 제어

배열은 복수의 데이터를 효율적으로 관리, 전달하기 위한 목적으로 고안된 데이터 타입이다. 고로 배열에 담겨있는 데이터를 추가/ 수정 / 삽입 / 변경 과 같은 일을 편리하게 할 수 있도록 돕는 내장함수가 있다. 

배열의 조작 

추가

• 원소를 배열의 끝에 밀어 넣는 것
• push는 인자로 전달된 값을 배열(li)에 추가하는 명령
• .push();

var li = ['a', 'b', 'c', 'd', 'e'];
li.push('f');
alert(li);

결과 => a, b, c, d, e, f

 

• 복수의 원소를 배열에 한 번에 넣는 것
• concat은 인자로 전달된 값을 추가하는 명령
• .concat(); 

var li = ['a', 'b', 'c', 'd', 'e'];
li = li.concat(['f', 'g']);
alert(li);

결과 => a, b, c, d, e, f, g

• 배열의 시작지점에 원소를 추가하는 것 
• unshift는 인자로 전달한 값을 배열의 첫번째 원소로 추가하는 명령
• 배열의 기존 값들의 index(색인)을 1씩 증가시킴
• .unshift(); 

var li = ['a', 'b', 'c', 'd', 'e'];
li.unshift('z');
alert(li);

결과 => z, a, b, c, d, e

• 배열의 중간 지점에 원소를 삽입하는 것
• 특정구간을 추출 & 배열을 추가
• splice는 첫번째 인자에 해당하는 원소부터 두번째 해당하는 원소의 숫자만큼의 값을 배열로부터 제거한 후에 리턴, 세번째 인자부터 전달된 인자들을 첫번째 인자의 원소 뒤에 추가한다
• array.splice(index, howmany, element1, ... , elementN
  • index: 배열에 추가할 특정 배열의 위치를 가르키는 것
  • howmany:  index에서부터 제거될 원소들의 수. index + howmany 에 해당하는 원소들은 삭제된다. 이 값이 0이면 어떠한 원소도 삭제 되지 않는다.
  • element 1,....elementN : index와 index+howmany 사이에 추가될 값

var li = ['a', 'b', 'c', 'd', 'e'];
li.splice(2, 0, 'B');
alert(li);

결과 => a, b, B, c, d, e

https://opentutorials.org/course/50/110

splice - 생활코딩

제거

• .shift();
• 배열의 첫번째 원소를 제거하는 방법

var li = ['a', 'b', 'c', 'd', 'e'];
li.shift();
alert(li);

결과 => b, c, d, e

• .pop();
• 배열의 맨 끝의 원소를 제거하는 방법

var li = ['a', 'b', 'c', 'd', 'e'];
li.pop();
alert(li);

결과 => a, b, c, d

정렬

어떻게 하면 더 빠른 정렬을 할 수 있는가. 이런 부분에 대한 연구들을 '알고리즘'이라고 부른다

• .sort();
• 알파벳 순으로 정렬하는 방법 

var li = ['c', 'e', 'a', 'b', 'd'];
li.sort();
alert(li);

결과 => a, b, c, d, e

• .reverse();
• 역 알파벳 순으로 정렬하는 방법

var li = ['c', 'e', 'a', 'b', 'd'];
li.reverse();
alert(li);

결과 => e, d, c, b, a

만약 이렇게 말고 우리가 원하는 정렬 방법에 따라서 정렬을 하고 싶다면? 

array.sort(func)을 사용하면 된다. 이것은 사전에서 필요할 때마다 찾아보는 거로 하자.

https://opentutorials.org/course/50/109

sort - 생활코딩

---

JAVASCRIPT 기본 문법 시리즈

[생활코딩] JavaScript 기본문법 정리 (숫자와 문자, 변수, 주석, 줄바꿈과 여백, 비교)

[생활코딩] JavaScript 기본문법 정리 (숫자와 문자, 변수, 주석, 줄바꿈과 여백, 비교)

[생활코딩] JavaScript 문법 - 조건문

[생활코딩] JavaScript 문법 - 조건문

[생활코딩] JavaScript 문법 - 반복문

[생활코딩] JavaScript 문법 - 반복문

[생활코딩] JavaScript 문법 - 함수

[생활코딩] JavaScript 문법 - 함수