코드잇 javaScript 기초 - 프로그래밍과 데이터 in JavaScript ② 배열

---

배열

// 배열(Array)

// 순서가 있는 여러 값들의 묶음

// 코드잇 강의의 인기순위 나열한 객체

let courseRanking = {

    '1st': '자바스크립트 프로그래밍 기초',

    '2nd': 'Git으로 배우는 버전 관리',

    '3rd': '컴퓨터 개론',

    '4th': '파이썬 프로그래밍 기초'

}

// 프로퍼티 네임보다는 값들의 "순서"가 중요한 상황임

// -> 값들의 "순서"만 유지해도 될 것 같음

// 이 객체를 배열로 만들면 이렇게 됨.

let RankingArray = [

    '자바스크립트 프로그래밍 기초', // -> 요소

    'Git으로 배우는 버전 관리',

    '컴퓨터 개론',

    '파이썬 프로그래밍 기초'

];

/*

요소(element) : 배열 안에 있는 값들

인덱스(index) : 배열의 요소에 매겨지는 숫자값

index == PropertyName

인덱싱 : 인덱스를 통해서 요소에 접근하는 것

인덱스는 0부터 시작함

*/

console.log(배열이름[index]);

console.log(RankingArray[0]);

// 첫 번째 요소

// ---> 자바스크립트 프로그래밍 기초

console.log(RankingArray[1 + 2]);

// 배열(Array)

// 순서 있는 여러 값들의 묶음 예시

// 서울 공항철도 노선

let airportLines = ['인천공항 2터미널', '인천공항 1터미널',

'겸암', '계양', '김포공항', '마곡나루', '디지털미디어시티',

'홍대입구', '공덕', '서울역'];

// 해리포터 시리즈

let harryPotterSeries = ['마법사의 돌', '비밀의 방', '아즈카반의 죄수',

'불의 잔', '불사조 기사단', '혼혈왕자', '죽음의 성물'];

// 십이지

let chineseZodiac = ['자', '축', '인', '묘', '진',

'사', '오', '미', '신', '유', '술', '해'];

// 십간

let tenHeavenlyStems = ['갑', '을', '병', '정',

'무', '기', '경', '신', '임', '계'];

// 순서가 없는 여러 값들의 묶음 예시

// 과일 묶음

let fruits = ['사과', '청포도', '딸기', '수박', '체리'];

// 세트 메뉴 묶음

let menus = ['짜장면', '짬뽕', '탕수육'];

// 배열 인덱싱 연습

let dataType = ['number', 'string',

'boolean', 'null', 'undefined', 'object'];

// for문

for (let i = 0; i < 6; i++) {

    console.log(dataType[i]);

  }

// while문

let i = 0;

  while (i < 6) {

    console.log(dataType[i]);

    i++;

  }

---

배열 다루기

// 배열 (Array)

let members = ['A', 'B', 'C', 'D', 'E'];

// 배열은 자바스크립트에서 만들어둔 특별한 객체임

console.log(typeof members); // object

/*

배열에 다양한 메소드들이 있어서 필요한 상황에 활용할 수 있음

members.length : 배열 안에 몇 개의 데이터가 들어 있는지 개수를 알려줌

*/

console.log(members.length); // 5

console.log(members['length']); // 5

console.log(members[members.length -1]); // E

// 배열의 마지막 요소에 접근

// 배열 (Array)

// 배열 요소를 수정하는 것은 객체와 비슷함

let members = ['A', 'B', 'C', 'D', 'E'];

console.log(members[5]);

// 존재하지 않는 원소 (배열의 6번째 원소)를 출력하려고 하면

// error가 나는게 아니라 'undefined'가 뜸.

members[5] = 'NiceCodeit'; // 배열의 요소가 추가

console.log(members[5]);

// 배열 (Array)

// 배열 요소를 수정하는 것은 객체와 비슷함

let members = ['A', 'B', 'C', 'D', 'E'];

/*

주의사항 : index의 순서를 띄어 놓으면서 추가하게 되면

undefined 값이 들어간 요소가 자동으로 생성됨.

현재 0부터 4까지 있고,

index 5가 비어있는 상태에서 6을 추가함.

*/

members[6] = 'NiceCodeit';

console.log(members[6]);

// 비어있는 5번 자리에 'empty'가 생성됨

// 배열의 길이도 늘어남

// 배열 (Array)

// 요소의 수정

let members = ['A', 'B', 'C', 'D', 'E'];

members[2] = '씨';

console.log(members);

// 배열 (Array)

// 요소의 삭제

let members = ['A', 'B', 'C', 'D', 'E'];

console.log(members);

delete members[4]; // 5번째 요소 삭제

console.log(members);

// 5번째 값이 'empty'로 바뀌었음

// 배열의 길이도 똑같이 5임.

// 완전히 요소가 삭제되었다고 보기는 힘듦.

 

• 온도 바꾸기

/*

온도 바꾸기 (섭씨 -> 화씨)

F: 화씨(fahrenheit), C: 섭씨(celsius)

F = ( C * 9 / 5 ) + 32;

*/

let celsiusTemps = [27, 25, 26, 22, 28, 27, 21];

let fahrenheitTemps = [];

// 화씨 배열에 섭씨 요소를 하나씩 추가하면 됨

// for문으로 작성

for (let i = 0; i < celsiusTemps.length; i++) {

  fahrenheitTemps[i] = (celsiusTemps[i] * 9 / 5) + 32

}

// 두 배열의 index가 서로 대응하니까

// 다른 변수를 굳이 생성해줄 필요가 없음

// while문으로 작성

let i = 0;

while (i < celsiusTemps.length) {

  fahrenheitTemps[i] = (celsiusTemps[i] * 9 / 5) + 32

  i++;

}

/*

i의 배열 길이를 모를 수 있으니 무조건 숫자로 쓰기 X

조건부분에 'i < celsiusTemps.length'라고 쓴 점 주의하기

배열길이 미만까지 i가 반복해야함 (0부터 시작하니까!)

*/

// fahrenheitTemps 테스트

console.log(fahrenheitTemps);

---

배열 메소드

// 배열의 메소드 (Array's Method)

// 배열을 안전하고 효과적으로 다루기 위해서 사용

let members = ['A', 'B', 'C', 'D', 'E'];

console.log(members);

delete members[4];

console.log(members);

// splice

members.splice(4);

// 삭제하고 싶은 인덱스를 파라미터로 전달하면 됨

// 4번 인덱스 = 5번째 원소가 삭제됨

console.log(members);

splice() 메소드

- 배열에서 요소를 추가하거나 삭제할 때 사용하는 메소드

- 첫 번째 인자 : 삭제를 시작할 인덱스

- 두 번째 인자 : 삭제할 개수

- 세 번째 인자 : 삭제한 요소 자리에 추가될 값

splice() 메소드에 인자를 전달하지 않으면, 배열에서 모든 요소를 삭제함.

members.splice(1)을 실행하면, 인덱스 1부터 끝까지의 요소를 삭제하게 되어 배열에 남는 요소가 없게 됨.

// 배열의 메소드 (Array's Method)

// 배열을 안전하고 효과적으로 다루기 위해서 사용

let members = ['A', 'B', 'C', 'D', 'E'];

console.log(members);

// splice

members.splice(1, 2);

console.log(members);

// 1번 인덱스(2번째 원소)부터 원소 2개를 삭제해라

// --> B, C가 삭제됨.

// splice

members.splice(1, 1);

console.log(members);

// 1번 인덱스(2번째 원소)부터 원소 1개를 삭제해라

// --> 해당하는 원소인 B만 삭제됨

// 배열의 메소드 (Array's Method)

let members = ['A', 'B', 'C', 'D', 'E'];

console.log(members);

// splice(startIndex, deleteCount, item)

members.splice(1, 1, 'NiceCodeit', 'HiCodeit');

// 인덱스1번 자리(두번째 원소)를 삭제한 후

// 그 자리에 'NiceCodeit'과 'HiCodeit'을 넣음.

console.log(members);

// 배열의 메소드 (Array's Method)

let members = ['A', 'B', 'C', 'D', 'E'];

console.log(members);

// splice(startIndex, deleteCount, item)

members.splice(1, 0, 'NiceCodeit', 'HiCodeit');

console.log(members);

// 삭제할 개수 = 0 이면

// 아무것도 삭제하지 않고 요소를 추가할 수 있음

members.splice(2, 1, 'MaumNo');

console.log(members);

// 2번 인덱스(세번쨰 원소)를 'MaumNo'로 수정함

members.splice(2, 2, 'Blah', '산토끼달토끼');

console.log(members);

// 2번 인덱스(세번쨰 원소)는 Blah

// 3번 인덱스(네번째 원소)는 산토끼달토끼로 수정

---

반복문으로 배열 원소 추가하기

let numbers = [];

// numbers 배열에 1, 2, 3, 5, 8, 9를 순서대로 추가하기

numbers.splice(0, 0, 1, 2, 3, 5, 8, 9)

console.log(numbers)

// 반복문을 활용해서 numbers 배열의 요소들 중 홀수를 모두 삭제하기

// 주의 : 홀수 인덱스가 아니라 '홀수'인 요소를 삭제하는 것!

// for 반복문

for ( let i = 0; i < numbers.length; i++ ){

    if (numbers[i] % 2 !== 0) {

      numbers.splice(i, 1)

      i--;

    }

}

/*

주의 : i = 0인경우 해당 원소가 삭제되고, i값이 증가해서

실제 인덱스값은 0임에도 불구하고 i = 1가 되는 현상이 발생함

그러므로 삭제되는 원소는 삭제할 때 i값도 하나씩 감소시켜야 함

*/

// while 반복문

let i = 0;

while ( i < numbers.length ) {

    if (numbers[i] % 2 !== 0) {

        numbers.splice(i, 1)

      } else {

    i++;

    }

}

console.log(numbers)

/*

for 반복문과 while 반복문 모두 numbers 배열을 수정하고 있으므로,

첫 번째 반복문이 끝난 후에는 numbers 배열의 내용이 이미 변경되었기 때문에

두 번째 반복문에서는 수정된 내용이 반영됨.

console.log(numbers)는 마지막으로 실행된 반복문에서 수정된 numbers 배열을 출력함.

*/

---

shift, unshift, push, pop 메소드

// 배열의 메소드 (Array's Method)

let members = ['A', 'B', 'C', 'D', 'E'];

console.log(members);

// splice(startIndex, deleteCount, item)

// 배열의 첫 요소를 삭제

members.splice(0, 1);

// 배열의 마지막 요소를 삭제

members.splice(members.length - 1, 1);

// 배열의 첫 요소로 값 추가

members.splice(0, 0, 'NiceCodeit');

// 배열의 마지막 요소로 값 추가

members.splice(members.length, 0, 'HiCodeit');

// 배열의 메소드 (Array's Method)

let members = ['A', 'B', 'C', 'D', 'E'];

console.log(members);

// ★★ 다른 종류의 메소드 ★★

// 배열의 첫 요소를 삭제 : shift() (파라미터 없음)

members.shift();

console.log(members);

// 배열의 마지막 요소를 삭제 : pop()

members.pop();

console.log(members);

// 배열의 첫 요소로 값 추가 : unshift(value) (파라미터 있음)

members.unshift('NiceCodeit');

console.log(members);

// 배열의 마지막 요소로 값 추가 : push()

members.push('HiCodeit');

console.log(members);

 

---

배열에서 특정 값 찾기 (indexOf / lastIndexOf)

배열에 특정 값이 있으면 해당 인덱스 번호를 출력함.

// 배열에서 특정 값 찾기 (indexOf/lastIndexOf)

/*

array.indexOf(item) : array 배열에 item이 포함되어 있는지 확인 가능

1) 포함 O ---> item이 있는 인덱스가 리턴됨.

2) 포함 X ---> -1 이 리턴됨.

3) 여러번 포함 O ---> 처음 발견된 인덱스가 리턴됨.

*/

let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];

console.log(brands.indexOf('Kakao'));

// brands라는 배열에 'kakao'가 포함되어 있는지 확인 가능함.

// 포함되어 있으므로 'Kakao'의 인덱스인 1이 리턴됨.

// 인덱스 3에도 Kakao가 있지만 처음 발견된 인덱스인 1이 출력됨.

console.log(brands.indexOf('Daum'));

// brands라는 배열에 Daum이 포함되어 있지 않음.

// ---> -1이 리턴됨.

// 배열에서 특정 값 찾기 (indexOf/lastIndexOf)

/*

array.lastIndexOf(item)

indexOf와 같지만 뒤에서부터 탐색을 함.

*/

let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];

console.log(brands.lastIndexOf('Kakao')); // 3

// 뒤부터 탐색을 하니까 맨 끝에 있는 Kakao의 인덱스가 출력됨.

console.log(brands.lastIndexOf('Daum')); // -1

---

배열에서 특정 값이 있는지 확인하기 (includes)

해당하는 값이 배열 안에 있는지, 그 여부만 확인할 때 'includes'라는 메소드를 활용함.

// 배열에서 특정 값 찾기 (indexOf/lastIndexOf)

let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];

console.log(brands.includes('Kakao'));

// 해당 값이 있음 ----> true

console.log(brands.includes('Daum'));

// 해당 값이 없음 ----> false

---

배열 뒤집기 (reverse)

배열 안 원소의 순서를 뒤집을 수 있음

// 배열 뒤집기 (reverse)

let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];

console.log(brands);

brands.reverse();

// brands라는 배열의 원소 순서를 뒤집는다

console.log(brands);

---

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

---

for...of 반복문

// for...of

let influencer = ['suwonlog', 'small.tiger', 'Minam.ludens', 'cu_convenience24']

// 일반적인 for 문

for (let i = 0; i < influencer.length; i++) {

    console.log(influencer[i]);

}

// for-of문

// 배열에 요소가 할당됨.

for (변수 of 배열) {

    동작부분;

}

for (let element of influencer) {

    console.log(element);

}

// 배열의 길이만큼 반복하고,

// 반복할 때마다 element라는 변수에 할당됨.

// for-in문

for (let index in influencer) {

    console.log(influencer[index]);

}

// 변수에 프로퍼티 네임이 들어감 ---> index

// 일반 객체에 최적화 ---> 배열에는 사용 X

---

투표 집계하기

 

배열 votes의 정보를 토대로,
객체 voteCounter에 후보별 득표수를 정리

votes가 ['장태환', '신성순', '신성순', '장태환', '장태환']
voteCounter는 {'장태환': 3, '신성순': 2}

// 투표 결과 리스트

let votes = [

    '이재식', '이재식', '이규하', '이규하', '이규하',

    '이재식', '이재식', '이규하', '이규하', '이재식',

    '이규하', '이규하', '이규하', '이규하', '이재식',

    '이재식', '이규하', '이재식', '이재식', '이재식',

    '이재식', '이재식', '이규하', '이규하', '이규하',

    '이규하', '이규하', '이재식', '이규하', '이규하',

    '이규하', '이규하', '이재식', '이규하', '이규하',

    '이규하', '이재식', '이재식', '이재식', '이규하',

  ];

 

  let A = 0;

  let B = 0;

  // 후보별 득표수 객체

  let voteCounter = {

    '이재식' : A,

    '이규하' : B

  };

 

  // votes 배열을 이용해서 voteCounter 객체를 정리하기

  for (let name of votes) {

  // 여기에 코드를 작성하세요

    if ( name == '이재식' ) {

      A++;

      voteCounter['이재식'] = A;

    } else {

      B++;

      voteCounter['이규하'] = B;

    }

  }

 

  // 후보별 득표수 출력

  console.log(voteCounter);

  /*

  변수 A, B를 객체 위에 선언

  A와 B에 각각 votes 배열에 있는 이재식과 이규하의 개수를 넣을 것임.

  for-of문으로 votes배열에 있는 원소를 name에 할당하여,

  name에 있는 원소가 이재식이면 --> A를 하나 증가

  name에 있는 원소가 이규하면 ---> B를 하나 증가

  나중에 A,B가 있는 voteCounter 객체를 출력하면 됨.

  */

 

이렇게 코드를 짜면 

1) 쓸데없이 A, B라는 변수를 'voteCounter'라는 객체에 선언해야함.

→ 불필요한 변수를 최대한 줄이자 

2) A와 B를 앞에서 초기화 했으니까 뒷부분 for-of문에서 카운트한 내용을 다시 A에 넣어야 됨

→ 이미 voteCounter 객체의 A와 B에 0이 들어 있기 때문에 for-of문에서 변경된 A, B를 다시 넣어야됨.

→ 안 그러면 A와 B는 무조건 0으로 출력됨.

 

// 투표 결과 리스트

let votes = [

    '이재식', '이재식', '이규하', '이규하', '이규하',

    '이재식', '이재식', '이규하', '이규하', '이재식',

    '이규하', '이규하', '이규하', '이규하', '이재식',

    '이재식', '이규하', '이재식', '이재식', '이재식',

    '이재식', '이재식', '이규하', '이규하', '이규하',

    '이규하', '이규하', '이재식', '이규하', '이규하',

    '이규하', '이규하', '이재식', '이규하', '이규하',

    '이규하', '이재식', '이재식', '이재식', '이규하',

  ];

 

  // 후보별 득표수 객체

  let voteCounter = {

    '이재식' : 0,

    '이규하' : 0

  };

  // 프로퍼티 값을 변수 말고 숫자로 넣었음

  // --> 바로 하나씩 증가시키면 됨

  // votes 배열을 이용해서 voteCounter 객체를 정리하기

  for (let name of votes) {

  // 여기에 코드를 작성하세요

    if ( name == '이재식' ) {

      voteCounter['이재식']++;

    } else { // 선택지가 2개 밖예 없어서 else만 써도 됨.

      voteCounter['이규하']++;

    }

  }

 

  // 후보별 득표수 출력

  console.log(voteCounter);

수정하여 더 깔끔한 코드로 만들었음.

---

다차원 배열

// 다차원 배열 (multidimensional array)

// 요소의 모양이 특별할 뿐이지 특별히 어려운 건 없음.

let twoDimensional = [[1, 2], [3, 4]];

console.log(twoDimensional[0]) // [1,2]

// 인덱스 0인 원소 ==> 첫번째 배열

console.log(twoDimensional[0][1]) // 2

// 첫번째 배열의 인덱스 1(두번째) 원소

// 다차원 배열 (multidimensional array) 활용

let myFridge = [

    ['참외', '토마토', '오이', '양파'],

    ['볶음멸치', '장조림', '김치'],

    ['사이다', '콜라', '물', '쥬스'],

    ['사과', '바나나', '청포도'],

    ['얼음'],

    ['찰떡아이스', '투게더', '메로나']

];

let mailbox = [

    [101, 201, 301, 501, 601],

    [102, 202, 302, 502, 602],

    [103, 203, 303, 503, 603],

    [104, 204, 304, 504, 604],

    [105, 205, 305, 505, 605],

];

let chessBoard = [

    ['R','N','B','Q','K','B','N','R'],

    ['P','P','P','P','P','P','P','P'],

    [' ',' ',' ',' ',' ',' ',' ',' '],

    [' ',' ',' ',' ',' ',' ',' ',' '],

    [' ',' ',' ',' ',' ',' ',' ',' '],

    [' ',' ',' ',' ',' ',' ',' ',' '],

    ['P','P','P','P','P','P','P','P'],

    ['r','n','b','q','k','b','n','r'],

];

---

/*

이긴사람이 0번 index, 진 사람이 1번 index 배열

이긴 사람끼리 그리고 진 사람끼리 팀을 나눠 teams 배열을 완성해 주세요.

*/

let groups = [

    ['영준', '캡틴'],

    ['태순', '우재'],

    ['재훈', '지웅'],

    ['윤형', '동욱'],

    ['규식', '소원'],

  ];

 

  let teams = [

    [],

    [],

  ];

// 풀이 1

let groups = [

    ['영준', '캡틴'],

    ['태순', '우재'],

    ['재훈', '지웅'],

    ['윤형', '동욱'],

    ['규식', '소원'],

];

let teams = [

    [],

    [],

];

// 인덱스 0 --> teams배열의 인덱스 0에 밀어 넣기

// 인덱스 1 ---> teams배열의 인덱스 1에 밀어 넣기

for (let A of groups) {

  teams[0].push(A[0])

  // teams배열의 0번째 인덱스 -- 변수 A의 0번째 인덱스

  // 이때 unshift, push 중에서 영준이부터 들어가야하니까 push를 써야함.

  teams[1].push(A[1])

}

// 테스트 코드

console.log(teams[0]);

console.log(teams[1]);

/* 참고

A는 groups 배열의 원소를 하나씩 받아오게 됨.

A[0]은 groups 배열의 각 원소(배열)의 첫번째 요소

→ 그룹의 첫번째 인원의 이름을 의미

A[1]은 두번째 요소

→ 그룹의 두번째 인원의 이름을 의미

*/

// 풀이 2

// 노동으로 바꾸기

let groups = [

    ['영준', '캡틴'],

    ['태순', '우재'],

    ['재훈', '지웅'],

    ['윤형', '동욱'],

    ['규식', '소원'],

];

let teams = [

    [],

    [],

];

// 인덱스 0 --> teams배열의 인덱스 0에 밀어 넣기

// 인덱스 1 ---> teams배열의 인덱스 1에 밀어 넣기

teams[0][0] = groups[0][0]

teams[0][1] = groups[1][0]

teams[0][2] = groups[2][0]

teams[0][3] = groups[3][0]

teams[0][4] = groups[4][0]

teams[1][0] = groups[0][1]

teams[1][1] = groups[1][1]

teams[1][2] = groups[2][1]

teams[1][3] = groups[3][1]

teams[1][4] = groups[4][1]

// 테스트 코드

console.log(teams[0]);

console.log(teams[1]);

/* 참고

A는 groups 배열의 원소를 하나씩 받아오게 됨.

A[0]은 groups 배열의 각 원소(배열)의 첫번째 요소

→ 그룹의 첫번째 인원의 이름을 의미

A[1]은 두번째 요소

→ 그룹의 두번째 인원의 이름을 의미

*/// 풀이 3

// for 반복문으로 행과 열을 서로 바꿔줌

let groups = [

    ['영준', '캡틴'],

    ['태순', '우재'],

    ['재훈', '지웅'],

    ['윤형', '동욱'],

    ['규식', '소원'],

];

let teams = [

    [],

    [],

];

//groups 원소의 행렬을 바꾸어 teams에 할당

for ( i = 0 ; i < groups.length ; i++ ) {

    teams[0][i] = groups[i][0]

    teams[1][i] = groups[i][1]

}

// 테스트 코드

console.log(teams[0]);

console.log(teams[1]);

// 다차원 배열의 길이

// 배열의 길이는 배열이 가진 요소들의 수

// --> 그냥 배열 안에 있는 배열의 개수만 세면 됨!!!!

let groups = [

    ['영준', '캡틴'],

    ['태순', '우재'],

    ['재훈', '지웅'],

    ['윤형', '동욱'],

    ['규식', '소원'],

];

let teams = [

    [ '영준', '태순', '재훈', '윤형', '규식' ],

    [ '캡틴', '우재', '지웅', '동욱', '소원' ]

];

console.log(groups.length) // 5

console.log(teams.length) // 2