Ian H Blog

이번 글은 연습문제 풀이입니다. 이전 글에서 연습문제를 풀어 보신 분들만 아래 내용을 확인하시길 바랍니다.

19-1 풀이

//주어진 배열
var fruitArray = ["banana", "orange", "apple"];

//풀이 코드
fruitArray.splice(fruitArray.indexOf("banana"),1);

fruitArray 배열에서 "banana"의 위치는 fruitArray.indexOf("banana")로 구할 수 있습니다.

풀이코드는 splice함수로 fruitArray 배열에서 "banana"의 위치로부터 1번째까지 데이터를 잘라내는 명령어 입니다.

19-2 풀이

//주어진 배열
var fruitArray1 = ["apple", "orange", "banana"];
var fruitArray2 = ["pear", "melon", "peach", "cherry"];

//풀이 코드
fruitArray3 = fruitArray1.splice(fruitArray1.length-2,2).concat(fruitArray2.splice(fruitArray2.length-2,2));

배열에서 뒤에서 두번째 위치는 배열_이름.length-2입니다.

풀이코드는 각각 배열에서 뒤에서 두번째 위치에서부터 2번째 까지 데이터를 splice함수로 잘라내고 concat함수로 합쳤습니다.

19-3 풀이

function getRockScissorPapperValue(){
  var values = ["가위", "바위", "보"];
  return values[Math.floor(Math.random()*3)];
}

10강에서 배웠던 랜덤한 정수 생성하는 방법 아직 기억하고 계신가요? 랜덤한 정수 생성 코드를 사용하면 배열내의 랜덤한 데이터를 가져올 수 있습니다.

이전 강의에서 배운 배열 함수를 연습해 봅시다.

연습문제(19-1)

var fruitArray = ["banana", "orange", "apple"];

위 배열에서 banana를 찾아서 빼버리는 코드를 만들어 봅시다

이 코드는 fruitArray의 데이터들("banana", "orange", "apple")의 순서가 달라져도 잘 작동해야 합니다.

연습문제(19-2)

var fruitArray1 = ["apple", "orange", "banana"];
var fruitArray2 = ["pear", "melon", "peach", "cherry"];

위 두 배열에서 각각 마지막 2개의 데이터를 잘라내고 잘라낸 두 배열을 합쳐 새로운 변수 fruitArray3에 대입하는 코드를 만들어 봅시다.

이 코드는 fruitArray1, fruitArray2의 데이터가 바뀌더라도 잘 작동해야 합니다. (fruitArray1, fruitArray2는 항상 2가지 이상의 문자열 데이터를 가지고 있는 배열입니다.)

연습문제(19-3)

배열과 Math.random함수를 사용하여 "가위", "바위", "보" 중 하나의 값을 return하는 getRockScissorPapperValue 함수를 만들어 봅시다.

변수를 사용하여 어떠한 데이터를 기록하고 사용할 수 있음을 우리는 이미 배웠습니다. 어떠한 출석부가 있는데, 여기에 있는 첫번째 학생의 이름인 '이수현'을 변수에 저장해 봅시다.

var studentName = "이수현";

두번째 학생의 이름은 '김수민'입니다. 이 이름도 변수를 선언하여 대입해봅시다.

var studentName2 = "김수민";

studentName이라는 변수는 이미 사용했으므로, 뒤에 2를 붙여 새로운 변수를 만들었습니다.

출석부에는 총 10개의 이름이 있습니다. 그럼 총 10개의 변수를 사용해야겠네요.

아래와 같이 학생들에게 인사를 하는 함수가 있습니다.

function goodMorning(name){
  console.log("Good Morning, "+name+"!");
}

위 함수를 써서 출석부의 모든 학생에게 인사를 하는 함수를 작성해 봅시다.

function goodMorningAll(){
  goodMorning(studentName);
  goodMorning(studentName2);
  goodMorning(studentName3);
  goodMorning(studentName4);
  goodMorning(studentName5);
  goodMorning(studentName6);
  goodMorning(studentName7);
  goodMorning(studentName8);
  goodMorning(studentName9);
  goodMorning(studentName10);
}

이렇게 만들어진 함수는 유지 보수에 치명적인 결함이 있는데, 출석부 상의 학생 수가 변경되면 위 함수는 재사용할 수 없게 되어 버립니다. 코드를 수정해서 사용하여야 하죠.

예를들어 학생 수가 12명으로 늘어난다면 goodMorningAll함수에 goodMorning함수를 2번 더 작성해야 합니다.

이러한 문제를 해결하기 위해 나온 것이 배열입니다.

배열(Array)

데이터를 모아 하나의 변수에 담을 수 있는 것이 배열입니다. 변수가 데이터를 하나만 담을 수 있다면, 배열은 여러개의 데이터, 혹은 한개의 데이터 혹은 0개의 데이터를 담을 수 있습니다.

문자열, 숫자, Boolean등과 마찬가지로, 배열도 데이터타입(자료형)의 한 종류입니다. 다만, 다른 데이터들을 담고 좀 특별한 데이터타입이죠. 배열은 대괄호([])를 써서 나타내고, 배열안의 데이터들은 쉼표(,)를 사용해 구분합니다. 위 출석부의 이름들을 배열로 나타내면 아래와 같이 나타낼 수 있습니다.

["이수현","김수민","아무개3","아무개4","아무개5","아무개6","아무개7","아무개8","아무개9","아무개10"]

변수에 대입

배열 역시 데이터이므로 변수에 담겨져야지만 재사용할 수 있습니다. 위 출석부 이름들을 변수에 담아봅시다.

var studentNames = ["이수현", "김수민", "아무개3", "아무개4", "아무개5", "아무개6", "아무개7", "아무개8", "아무개9", "아무개10"];

studentNames은 변수지만 배열을 담고 있으므로, 배열이라고 부르기도 합니다. 정확히는 배열이 대입된 변수라고 할 수 있지만, 일반적으로 그냥 배열이라고 부릅니다.

console.log를 사용해서 studentNames 데이터를 출력해 봅시다.

console.log(studentNames);
// (10) ["이수현", "김수민", "아무개3", "아무개4", "아무개5", "아무개6", "아무개7", "아무개8", "아무개9", "아무개10"]

배열 전체 데이터가 출력됩니다. 왼쪽에 (10)이라고 표시되는 부분은 해당 배열 속 데이터의 수입니다.

아래와 같은 형태로 배열속 데이터 중 하나의 값만 선택할 수 있습니다.

배열_이름[배열_번호]

이때 배열 번호는 0번부터 시작합니다. 첫번째 데이터인 "이수현"을 선택하고 싶다면, student[0]을 사용합니다.

console.log(studentNames[0]);
// 이수현

첫번째 데이터를 선택할 때 1이 아닌 0을 선택하는 것에는 이유가 있습니다. 배열이 처음 도입되었을 때 데이터는 메모리에 아래와 같은 형태로 저장되었습니다.

  0          1          2          3          4                  
  |----------|----------|----------|----------|----------|
  | data1    | data2    | data3    | data4    | data5    |
  |----------|----------|----------|----------|----------|
  ^
  배열 데이터의 시작 주소

studentNames이라는 변수는, 배열 데이터의 시작 주소이자 동시에 배열의 첫번째 데이터의 주소인 곳을 표시하게 되고, 그곳에서 몇 번째 떨어진 곳인지를 나타내는 숫자를 []안에 적은 것입니다.

즉 studentNames[1]은 studentNames의 1번째 데이터를 나타내는 것이 아닌, 메모리상의 studentNames 주소에서 1번째 떨어져 있는 곳의 데이터 - studentNames의 2번째 데이터를 뜻합니다.

이 부분은 제대로 이해하려면 내용이 꽤 복잡하기 때문에 최대한 단순하게 설명하였습니다. 정 이해가 안되시면 그냥 변수를 선택할 때 n번째 데이터는 n-1로 선택한다고 외우시면 되겠습니다.

배열의 길이

배열_이름.length

를 사용하여 배열의 길이를 알 수 있습니다.

console.log(studentNames.length);
//10

배열의 1번째 데이터는 [0]를 사용해서 선택할 수 있고, 배열의 마지막 데이터는 [배열_길이-1]를 사용하여 선택할 수 있으므로, studentNames의 마지막 데이터를 선택하려면

studentNames[studentNames.length-1]

를 사용하면 됩니다. 물론 길이가 10인 것을 알고 있으면 studentNames[9]라고 하면 되지만, 위와 같이 작성하면 studentNames데이터의 길이가 바뀌더라도 언제나 마지막 값을 가질 수 있습니다.

지금까지 배운 배열에 대한 내용과 반복문을 사용하여 길이가 일정하지 않은 학생 이름 배열의 모두에게 인사를 하는 함수를 만들어 봅시다.

function goodMorningAllArray(names){
  for(var i=0; i<names.length; i++){
    goodMorning(names[i]);
  }
}

i의 초기값은 배열의 첫번째 값을 선택하기 위해 0이고, 배열의 다음 값을 선택하기 위해 반복후 매번 i++를 실행하며, for문의 조건은 i<names.length 로 하여 i의 마지막 값이 names.length-1이 되도록 하였습니다.

goodMorningAllArray(studentNames)

로 모든 학생들에게 인사를 할 수 있습니다.

함수 선언(Function Declarations)

지금까지 함수를 선언할 때 아래와 같은 방식으로 선언했었습니다.

function sayHello(){
  console.log("hi!");
}

이 방식을 함수 선언(Function Declarations)이라고 합니다.

함수 표현(Function Expressions)

첫번째 방식과는 다르게 아래와 같이 함수를 선언할 수도 있습니다.

var sayHello2 = function(){
  console.log("hi!2");
}

변수에 함수를 담는 모양이 되었는데, 이 방식을 함수 표현(Function Expressions)이라고 합니다.

함수 선언과 함수 표현의 차이점

함수 선언으로 생성된 함수든, 함수 표현으로 생성된 함수든, 함수의 호출 방법은 같습니다. 둘의 차이점은 브라우저가 코드를 받아드리는 방식에 차이인데, 아래 코드를 복사해서 실행해봅시다.

sayHello();

function sayHello(){
  console.log("hi!");
}

함수 선언전에 함수를 먼저 호출했으므로 실행이 안될 것 같지만, 실행이 됩니다! 이는 코드 해석기가 함수 선언부를 찾아서 먼저 적용한다음 나머지 코드들을 실 행시키기 때문입니다.

반면에 함수 표현은 반드시 함수 호출 전에 이루어져야 합니다.

sayHello2();

var sayHello2 = function(){
  console.log("hi!2");
}

위 코드를 실행하면 sayHello2함수를 찾을 수 없다는 에러가 납니다.