[ codeit ] 프로그래밍 기초 in JS - 프로그래밍과 데이터 in JS (2)

 배열 

1강. 배열

순서(위)가있는 값을 활용할 때 객체보다 유용

//배열(Array)
let courseRanking = {
  '1st' : 'js기초',
  '2nd' : 'git',
  '3rd' : '컴퓨터개론',
  '4th' : '파이썬'
}

//▽

let courseRanking = [
  'js기초', //요소(element)
  'git',
  '컴퓨터개론',
  '파이썬'
]

//배열내 순서 index == propertyName(객체)
//indexing : 원하는 배열의 요소를 가져올 때, 0~
//console.log(배열이름[index]);

console.log(courseRanking[0]); //js기초
console.log(courseRanking[2]); //컴퓨터개론
console.log(courseRanking[2 + 1 ]); //파이썬

 

2. 배열 인덱싱 연습하기

let dataType = ['number', 'string', 'boolean', 'null', 'undefined', 'object'];

// 요소 모두 출력하기
console.log(dataType[0]); //number
console.log(dataType[1]); //string
console.log(dataType[2]); //boolean
console.log(dataType[3]); //null
console.log(dataType[4]); //undefined
console.log(dataType[5]); //object



for (let i = 0; i < 6; i++) {
  console.log(dataType[i]);
}

//또는

let i = 0;
while (i < 6) {
  console.log(dataType[i]);
  i++;
}

 

3강. 배열 다루기

배열도 객체

let eng = [
  'a,'b','c','d'
]
console.log(typeof eng); //object

//length
console.log(eng.length); //4
console.log(eng['length']); //4
console.log(eng[eng.length -1]); //d, 배열의마지막 요소에 접근가능

//추가, 교체
eng[4] = 'D';
eng[5] = 'e';
eng[7] = 'g';
console.log(members[4]); //D
console.log(members[5]); //e
console.log(members); //[a,b,c,D,e,empty,g]로 6번째 empty도 하나의 요소로 적용됨

delete eng[5];
console.log(members) //[a,b,c,D,e,empty,empty]로 완전한 삭제x

 

4강. 온도바꾸기

//섭씨를 화씨로 바꾸기
//F = ( C * 9 / 5 ) + 32;

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


for( let i = 0; i<=6; i++){
  fahrenheitTemps[i] = ( celsiusTemps[i] * 9 / 5 ) + 32;
}

// fahrenheitTemps 테스트
console.log(fahrenheitTemps);



//또는 while문, 6대신 .length로
let i = 0;
while (i < celsiusTemps.length) {
  fahrenheitTemps[i] = (celsiusTemps[i] * 9 / 5) + 32
  i++;
}

 

5강. 배열 메소드I

let eng = [
  'a,'b','c','d'
]
console.log(typeof eng); //object

//삭제
delete eng[3];
console.log(members) //[a,b,empty,d]로 완전한 삭제x

//splice (startIndex, deleteCount, item)
eng.splice(3);
console.log(eng) //[[a,b,d]로 완전히 삭제됨

eng.splice(1);
console.log(eng) //[a]로 index1이후 모두 삭제

eng.splice(1,2);
console.log(eng) //[a, d]로 index 1부터 두개요소 삭제

eng.splice(1, 1, 'B', 'Bb'); //교체역할 가능
console.log(eng) //[a, B, Bb, c, d]로 index 1부터 한개 요소 삭제, 그자리에 B, Bb추가 

eng.splice(1, 0, 'B', 'Bb'); //추가역할 가능
console.log(eng) //[a, b, B, Bb, c, d]로 index 1부터 0개 요소 삭제, 그자리에 B, Bb추가

 

6강. splice 연습하기

// 반복문을 활용해서 numbers 배열의 요소들 중 홀수를 모두 삭제해 주세요.
let numbers = [];

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 !== 0) {
    numbers.splice(i, 1);
    i--;
  }
}

console.log(numbers); //[2, 8]

 

7강. 배열 메소드 II

//배열의 메소드 (Array's Method)
let eng = ['a','b','c'];
console.log(eng); //['a', 'b', 'c'];


//배열의 첫요소 삭제 : shift()
eng.shift();
console.log(eng); //['b','c']

//배열의 마지막요소 삭제 : pop()
eng.pop();
console.log(eng); //['a','b']

//배열의 첫요소에 값 추가 : unshift(value)
eng.unshift('A');
console.log(eng); //['A','a','b','c']

//배열의 마지막요소 값 추가 : push(value)
eng.pop('d');
console.log(eng); //['a','b','c','d']

 

8강. 배열 메소드 익히기

 

9강. 배열 메소드 Tip

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

array.indexOf(item) : 찾는 인덱스리턴, 없을 경우 -1리턴, 여러개인 경우 첫 인덱스 리턴

array.lastIndexOf(item) : 찾는 인텍스를 뒤에서부터 탐색

let brands = ['Google', 'Naver', 'Kakao', 'Kakao'];
console.log(brands.indexOf('Kakao')); //2
console.log(brands.indexOf('Daum')); //-1

let brands = ['Google', 'Naver', 'Kakao', 'Kakao'];
console.log(brands.lastIndexOf('Kakao')); //3
console.log(brands.lastIndexOf('Daum')); //-1

 

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

array.includes(item) : item이 있을 경우 true, 없을 경우 false

let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands.includes('Kakao')); //true
console.log(brands.includes('Daum')); //false

 

- 배열 뒤집기 (reverse)

array.reverse(); // ['a','b','c'] -> ['c','b','a']

let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands); //['Google', 'Kakao', 'Naver', 'Kakao'];
brands.reverse();
console.log(brands); //["Kakao", "Naver", "Kakao", "Google"]

 

let indices = [];    //array 배열에서 'a'가 존재하는 위치들을 저장할 배열입니다.
let array = ['a', 'b', 'a', 'c', 'a', 'd'];
let element = 'a';
let idx = array.indexOf(element); //첫 번째 시작 지점입니다.

//만약 찾고자 하는 요소가 배열에 없다면 idx = -1 일테니 요소가 없다면 아래 반복문은 패스될거예요
while (idx != -1) { 
//idx가 -1이 될 때 까지, 즉 배열의 끝 까지 다 탐색하여도 
//더이상 찾고자 하는 요소와 같은 요소가 없을 때까지 반복을 계속합니다.

  indices.push(idx);  //찾은 index를 indices 배열에 push 해줍시다

  idx = array.indexOf(element, idx + 1); 
//바로 다음 index 부터 'a'가 있는지 탐색을 해봅니다.
//더이상 'a'가 없을 경우엔 -1이 반환 되니 while 반복문은 종료되겠죵
}


console.log(indices);
// [0, 2, 4]
console.log(indices.length);
// 3

 

10. for..of 반복문

//for..of
for(요소(변수) of 배열){
  동작부분;
}

//for..in
for(변수 in 객체){
  동작부분;
}

let eng = ['a', 'b', 'c']

for(let i = 0; i<eng.lenth; i++){
  console.log(eng[i]);
}
//a, b, c

//▽ 
//반복문을 돌릴필요없이 element에 eng의 요소 할당

for(let element of eng){
  console.log(element)
}
//a, b, c

for..in으로도 사용가능하나 모든 property를 반복하기때문에 배열의 method, length 들이 변수에 할당될수도있어 권장 x

 

11강. 투표 집계하기

//내 풀이
let votes = [
  '이재식', '이재식', '이규하', '이규하', '이규하',
  '이재식', '이재식', '이규하', '이규하', '이재식',
  '이규하', '이규하', '이규하', '이규하', '이재식',
  '이재식', '이규하', '이재식', '이재식', '이재식',
  '이재식', '이재식', '이규하', '이규하', '이규하',
  '이규하', '이규하', '이재식', '이규하', '이규하',
  '이규하', '이규하', '이재식', '이규하', '이규하',
  '이규하', '이재식', '이재식', '이재식', '이규하',
];

// 후보별 득표수 객체
let voteCounter = {};

// votes 배열을 이용해서 voteCounter 객체를 정리하기
for (let name of votes) {
  // 코드를 작성하세요.

  if (array.includes('이재식') == true){
    i++;
  } else {

    console.log(`'이규하': ${j}`);
  }

}

// 후보별 득표수 출력
console.log(voteCounter);

프로퍼티가 존재하는지 여부를 판단할 때는 undefined 값과 일치비교를 할 수도 있지만, in 연산자를 통해 확인할 수도 있다

voteCounter[name] === undefined;
name in voteCounter;

// 정답
let votes = [
  '이재식', '이재식', '이규하', '이규하', '이규하',
  '이재식', '이재식', '이규하', '이규하', '이재식',
  '이규하', '이규하', '이규하', '이규하', '이재식',
  '이재식', '이규하', '이재식', '이재식', '이재식',
  '이재식', '이재식', '이규하', '이규하', '이규하',
  '이규하', '이규하', '이재식', '이규하', '이규하',
  '이규하', '이규하', '이재식', '이규하', '이규하',
  '이규하', '이재식', '이재식', '이재식', '이규하',
];

// 후보별 득표수 객체
let voteCounter = {};

// votes 배열을 이용해서 voteCounter 객체를 정리하기
for (let name of votes) {
  // 코드를 작성하세요.
  if (name in voteCounter) {
    voteCounter[name]+= 1;
  } else {
    voteCounter[name] = 1;
  }
}

// 후보별 득표수 출력
console.log(voteCounter);

.......????????????????????????????????????

다시 풀어보기

 

12강. 다차원 배열 : 배열의 요소에 배열이 들어간 경우

값의 의미보다 위치나 순서에 초점 (의미가 중요할 때는 property를 활용할 수 있는 객체 사용 권장)

//다차원 배열 (multidimensional array)
let twoDimensional = [[1, 2], [3, 4]]; //2차원 배열

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

 

13강. 팀나누기

//내 풀이
let groups = [
	['영준', '캡틴'], 
	['태순', '우재'],
	['재훈', '지웅'],
	['윤형', '동욱'],
	['규식', '소원'],
];

let teams = [
	[],
	[],
];

// 여기에 코드를 작성해 주세요.
teams[0] = [groups[0][0], groups[1][0], groups[2][0], groups[3][0], groups[4][0]]
teams[1] = [groups[0][1], groups[1][1], groups[2][1], groups[3][1], groups[4][1]]

// 테스트 코드
console.log(teams[0]);
console.log(teams[1]);

//해답풀이
let groups = [
	['영준', '캡틴'], 
	['태순', '우재'],
	['재훈', '지웅'],
	['윤형', '동욱'],
	['규식', '소원'],
];

let teams = [
	[],
	[],
];

// 여기에 코드를 작성해 주세요.

//순차적으로 나열하기 - 규칙찾기
//teams[0][0] = groups[0][0];
//teams[1][0] = groups[0][1];
//teams[0][1] = groups[1][0];
//teams[1][1] = groups[1][1];
//teams[0][2] = groups[2][0];
//teams[1][2] = groups[2][1];
//teams[0][3] = groups[3][0];
//teams[1][3] = groups[3][1];
//teams[0][4] = groups[4][0];
//teams[1][4] = groups[4][1];

for(let i = 0; i < groups.length; i++) {
  for(let j = 0; j < groups[i].length; j++) {
  //console.log(groups[i][j]);
    teams[j][i] = groups[i][j];
  }
}


// 테스트 코드
console.log(teams[0]);
console.log(teams[1]);