변수를 사용하여 어떠한 데이터를 기록하고 사용할 수 있음을 우리는 이미 배웠습니다. 어떠한 출석부가 있는데, 여기에 있는 첫번째 학생의 이름인 '이수현'을 변수에 저장해 봅시다.
var studentName = "이수현";
두번째 학생의 이름은 '김수민'입니다. 이 이름도 변수를 선언하여 대입해봅시다.
var studentName2 = "김수민";
studentName이라는 변수는 이미 사용했으므로, 뒤에 2를 붙여 새로운 변수를 만들었습니다.
출석부에는 총 10개의 이름이 있습니다. 그럼 8개의 변수를 더해 총 10개의 변수를 사용해야겠네요.
var studentName3 = "아무개3"; var studentName4 = "아무개4"; var studentName5 = "아무개5"; var studentName6 = "아무개6"; var studentName7 = "아무개7"; var studentName8 = "아무개8"; var studentName9 = "아무개9"; var studentName10 = "아무개10";
다음으로 학생 한명에게 인사를 하는 함수를 만들어 봅시다.
function sayGoodMorning(name){ console.log("Good Morning, "+name+"!"); }
이번에는 모든 학생들에게 인사를 하는 함수를 만들어 봅시다.
function sayGoodMorningAll(){ sayGoodMorning(studentName); sayGoodMorning(studentName2); sayGoodMorning(studentName3); sayGoodMorning(studentName4); sayGoodMorning(studentName5); sayGoodMorning(studentName6); sayGoodMorning(studentName7); sayGoodMorning(studentName8); sayGoodMorning(studentName9); sayGoodMorning(studentName10); }
아래 명령어로 함수를 실행하면 모든 학생에게 인사를 합니다.
sayGoodMorningAll();
전체 코드는 다음과 같습니다.
var studentName = "이수현"; var studentName2 = "김수민"; var studentName3 = "아무개3"; var studentName4 = "아무개4"; var studentName5 = "아무개5"; var studentName6 = "아무개6"; var studentName7 = "아무개7"; var studentName8 = "아무개8"; var studentName9 = "아무개9"; var studentName10 = "아무개10"; function sayGoodMorning(name){ console.log("Good Morning, "+name+"!"); } function sayGoodMorningAll(){ sayGoodMorning(studentName); sayGoodMorning(studentName2); sayGoodMorning(studentName3); sayGoodMorning(studentName4); sayGoodMorning(studentName5); sayGoodMorning(studentName6); sayGoodMorning(studentName7); sayGoodMorning(studentName8); sayGoodMorning(studentName9); sayGoodMorning(studentName10); } sayGoodMorningAll();
위 코드는 물론 아무 문제 없이 잘 작동하지만 이렇게 코드를 작성하게 되면 유지 보수가 어려워집니다. 예를 들어 새로운 학생이 전학을 오게 되서 학생의 수가 11명으로 늘어나게 되면
지금 이 예제는 간단하기 때문에 이게 그리 큰일이 아닌 것 같이 보이기도 합니다. 하지만 만약 이 프로젝트에 함수 100개가 있고 그 중에 50개가 sayGoodMorningAll함수처럼 모든 학생의 데이터를 다루는 함수라면 학생이 한명 추가될 때마다 50개의 함수를 모두 찾아서 일일이 수정을 해주어야 합니다.
이러한 문제를 해결하기 위해 나온 것이 배열입니다. 배열이라는 것을 사용하면 위 10명의 학생을 한 변수에 담을 수 있고, 학생이 추가되는 경우 해당 변수에 학생을 추가해주기만 하면 됩니다.
그럼 지금부터 배열에 대해 자세히 알아봅시다.
여러가지의 데이터를 하나의 변수에 담을 수 있는 것이 배열입니다. 변수가 데이터를 하나만 담을 수 있다면, 배열은 여러개의 데이터, 혹은 한개의 데이터 혹은 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로 선택한다고 외우시면 되겠습니다. 배열은 상당히 자주 쓰이기 때문에 쓰다보면 별 생각 없이 배열[0]이 첫번째 값이라는 것에 익숙해지게 됩니다.
배열_이름.length
를 사용하여 배열의 길이를 얻을 수 있습니다.
console.log(studentNames.length); //10
배열의 1번째 데이터는 [0]를 사용해서 선택할 수 있고, 배열의 마지막 데이터는 [배열_길이-1]를 사용하여 선택할 수 있으므로, studentNames의 마지막 데이터를 선택하려면
studentNames[studentNames.length-1]
를 사용하면 됩니다. 물론 배열의 길이가 10인 것을 알고 있으면 studentNames[9]라고 하면 되지만, studentNames[studentNames.length-1]로 작성하면 studentNames데이터의 길이가 바뀌더라도 언제나 마지막 값을 가질 수 있습니다.
지금까지 배운 배열에 대한 내용과 반복문을 사용하여 길이가 일정하지 않은 학생 이름 배열의 모두에게 인사를 하는 함수를 만들어 봅시다.
function sayGoodMorningArray(names){ for(var i=0; i<names.length; i++){ console.log("Good Morning, "+names[i]+"!"); } }
i의 초기값은 배열의 첫번째 값을 선택하기 위해 0이고, 배열의 다음 값을 선택하기 위해 반복후 매번 i++를 실행하며, for문의 조건은 i<names.length 로 하여 i의 마지막 값이 names.length-1이 되도록 하였습니다.
sayGoodMorningArray(studentNames);
로 모든 학생들에게 인사를 할 수 있습니다.
전체 코드는 다음과 같습니다.
var studentNames = ["이수현", "김수민", "아무개3", "아무개4", "아무개5", "아무개6", "아무개7", "아무개8", "아무개9", "아무개10"]; function sayGoodMorningArray(names){ for(var i=0; i<names.length; i++){ console.log("Good Morning, "+names[i]+"!"); } } sayGoodMorningAllArray(studentNames);
만약 새로운 학생이 전학을 오게 된다면?
var studentNames = ["이수현", "김수민", "아무개3", "아무개4", "아무개5", "아무개6", "아무개7", "아무개8", "아무개9", "아무개10", "아무개11"];
이렇게 studentNames 배열만 수정해 주면 다른 부분은 고칠 필요가 없습니다. 배열을 쓰지 않은 것과 비교해서 유지보수가 훨씬 쉽죠.
이제 배열이 왜 필요한지 이해가 되시나요?
댓글
이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기