프로그래밍 기초 in JS_[토픽3]프로그래밍과 데이터 in JS_배열

실습과제: 온도 바꾸기

여기 이번 주 온도를 섭씨로 기록한 배열이 있습니다.

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

그런데, 미국에서 오랫동안 살다 온 태오는 아직 섭씨온도가 익숙하지 않은데요. 불편한 태오를 위해 각각의 섭씨온도들을 화씨로 변환해 봅시다. 화씨로 변환하는 공식은 아래와과 같은데요.

// F: 화씨(fahrenheit), C: 섭씨(celsius)
F = ( C * 9 / 5 ) + 32;

반복문을 이용해서 celsius 배열의 각 요소들을 화씨로 변환한 값을 fahrenheit 배열에 추가해 주세요.

코드를 잘 작성하셨다면 다음과 같은 결과가 출력되어야 합니다.

[
  80.6,   77, 78.8,
  71.6, 82.4, 80.6,
  69.8
]

나의 답안

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

// 여기에 코드를 작성해 주세요.
for (let i = 0; i < celsiusTemps.length; i++) {
  fahrenheitTemps[i] = (celsiusTemps[i] * 9 / 5) + 32;
}

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

또 다른 답안

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

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

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

 

배열 메소드 (1)

// 배열의 메소드
let members = ['엄마', '아빠', '오빠', '나'];

console.log(members);
delete members[3];
console.log(members);

// splice
members.splice(3);
console.log(members);

[ '엄마', '아빠', '오빠', '나' ]
[ '엄마', '아빠', '오빠', <1 empty item> ]
[ '엄마', '아빠', '오빠' ]

delete는 완전히 삭제시키지 않지만, slice는 완전히 삭제시켜준다.

 

// splice
let members = ['엄마', '아빠', '오빠', '나'];

members.splice(1);
console.log(members);

[ '엄마' ]

그러나 위와 같이 입력하면, 1번 인덱스 이후에 모든 요소들이 삭제되어 버린다.

 

// splice
let members = ['엄마', '아빠', '오빠', '나'];

members.splice(1, 2);
console.log(members);

[ '엄마', '나' ]

따라서 파라미터를 한 개 더 전달해주면 삭제할 개수를 조절할 수가 있다. 인덱스 1번부터 2개의 요소가 제거되었다.

 

// splice(startIndex, deleteCount, item)
let members = ['엄마', '아빠', '오빠', '나'];

members.splice(1, 1, '아버지');
console.log(members);

[ '엄마', '아버지', '오빠', '나' ]

여기에 파라미터를 한 개 추가로 전달해주면 삭제한 요소 자리에 그 값이 추가된다.

 

실습과제: splice 연습하기

splice 메소드를 활용하여 아래의 미션들을 수행하세요.

1. fruits 배열에 '토마토'를 삭제하고 그 자리에 '사과', '청포도'를 추가해 주세요.
2. fruits 배열의 첫 번째 요소를 삭제해 주세요.
3. ages 배열에 마지막 요소를 삭제해 주세요.
4. ages 배열의 2번, 3번 인덱스를 26, 28로 변경해 주세요.
5. numbers 배열에 1, 2, 3, 5, 8, 9를 순서대로 추가해 주세요.
6. 반복문을 활용해서 numbers 배열의 요소들 중 홀수를 모두 삭제해 주세요.

코드를 잘 작성하셨다면 다음과 같은 결과가 출력되어야 합니다.

청포도
사과
30
28
undefined
[ 2, 8 ]

모범 답안

let fruits = ['레몬', '토마토', '딸기', '바나나'];
let ages = [20, 24, 25, 29, 30, 33];
let numbers = [];

// fruits 배열에 '토마토'를 삭제하고 그 자리에 '사과', '청포도' 를 추가해 주세요.
fruits.splice(1, 1, '사과', '청포도');

// fruits 배열의 첫 번째 요소를 삭제해 주세요.
fruits.splice(0, 1);

// ages 배열에 마지막 요소를 삭제해 주세요.
ages.splice(5, 1);

// ages 배열의 2번, 3번 인덱스를 26, 28로 변경해 주세요.
ages.splice(2, 2, 26, 28);

// numbers 배열에 1, 2, 3, 5, 8, 9를 순서대로 추가해 주세요.
numbers.splice(0, 0, 1, 2, 3, 5, 8, 9);

// 반복문을 활용해서 numbers 배열의 요소들 중 홀수를 모두 삭제해 주세요.
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 !== 0) {
    numbers.splice(i, 1);
    i--;
  }
}

// 테스트 코드
console.log(fruits[1]);
console.log(fruits[0]);
console.log(ages[ages.length - 1]);
console.log(ages[3]);
console.log(numbers[3]);
console.log(numbers);

 

배열 메소드 (2)

let members = ['엄마', '아빠', '오빠', '나'];

// 배열의 첫 요소를 삭제: shift()
members.shift();
console.log(members);
// 배열의 마지막 요소를 삭제: pop()
members.pop();
console.log(members);
// 배열의 첫 요소로 값 추가: unshift(value)
members.unshift('강아지');
console.log(members);
//배열의 마지막 요소로 값 추가: push(value)
members.push('고양이');
console.log(members);

[ '아빠', '오빠', '나' ]
[ '아빠', '오빠' ]
[ '강아지', '아빠', '오빠' ]
[ '강아지', '아빠', '오빠', '고양이' ]

 

배열 메소드 Tip

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

배열에서 특정 값을 찾으려면 indexOf 메소드를 사용하면 된다. array.indexOf(item)을 하면 array 배열에 item이 포함되어 있는지 확인할 수 있다.

1. 만약 포함되어 있다면, item이 있는 인덱스가 리턴된다.
2. 포함되어 있지 않다면, -1이 리턴된다.
3. 여러 번 포함되어 있으면, 처음 발견된 인덱스가 리턴된다.

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

1
-1

그리고  비슷하게 lastIndexOf라는 메소드가 있는데, indexOf와는 반대로 탐색을 뒤에서 부터 하게 된다. 방금과 같은 경우에 'Kakao'를 lastIndexOf 메소드로 찾게 되면 마지막에 있는 인덱스가 리턴된다.

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

3
-1

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

indexOf/lastIndexOf는 특정 값을 찾아서 해당 값의 index를 알려준다. 하지만 때로는 그냥 그 값이 배열 안에 있는지, 그 여부만 확인하고 싶을 수도 있는데, 그럴 땐 includes라는 메소드를 활용하면 된다.

array.includes(item)을 하게 되면 array 배열에 item이 있을 경우 true를, 없을 경우 false를 리턴한다.

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

true
false

배열 뒤집기 (reverse)

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

(4) ["Google", "Kakao", "Naver", "Kakao"]
(4) ["Kakao", "Naver", "Kakao", "Google"]

 

for...of 반복문

/*
for...of
for (변수 of 배열) {
  동작부분;
}
*/
let influencer = ['김씨', '박씨', '이씨']

// for문
for (let i = 0; i < influencer.length; i++) {
  console.log(influencer[i]);
}

// for...of문
for (let element of influencer) {
  console.log(element);
}

// for...in문
for (let index in influencer) {
  console.log(influencer[index]);
}

김씨
박씨
이씨
김씨
박씨
이씨
김씨
박씨
이씨

for in문은 배열에 사용하지 말 것을 권장한다. 특별한 환경에서는 배열의 메서드나 배열의 length property같은 게 할당되는 경우가 있기 때문이다.

특별한 환경이라 함은 array-like 즉 유사배열을 의미할 수 있을 것이다.

let numbers = {'1': 1, '2': 2, '3': 4, '4': 8, '5': 10}

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

위 코드는 동작하지 않는다. 배열에 제공되는 length 프로퍼티를 가지지 않기 때문인데, length 프로퍼티를 갖게 된다면 이를 유사배열이라고 말할 수 있다.

let numbers = {'1': 1, '2': 2, '3': 4, '4': 8, '5': 10, 'length': 6}

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

마치 배열과 같이 반복문이 동작한다. 여기서 for in문을 쓰면 문제가 발생한다.

let numbers = {'1': 1, '2': 2, '3': 4, '4': 8, '5': 10, 'length': 6}

for(let number in numbers) {console.log(number);
}

// output
1
2
3
4
5
length

이 이유 때문이 아니더라도 for in문이 배열보다는 객체에 적합하게 설계된 반복문이라 배열에 쓸 경우 효율성도 떨어진다. 그러므로 배열에는 안 쓰는 것이 좋다.