Ian H Blog

이번 강의에서는 데이터 타입(자료형)으로써 오브젝트(object)에 대해 알아보겠습니다. 객체라고 번역하여 표현하기도 합니다. 

오브젝트는 서로 관련이 있는 데이터를 하나의 변수로 묶어주는 역할을 합니다. 예를들어, 오브젝트를 사용하지 않고 변수를 사용하여 이름과 나이를 저장하려고 하면, 아래와 같이 표현할 수 있습니다.

var name = "김봉팔";
var age = 18;

오브젝트를 사용하여 이 사람의 이름과 나이를 저장하면, 아래와 같이 하나의 변수에 묶을 수 있습니다. 프로그래머가 더 쉽게 데이터를 알아 볼 수 있습니다.

var person = {name: "김봉팔", age: 18};

이 때 name, age와 같이 오브젝트 안에서 데이터의 이름을 나타내는 이름들을 항목(property)라고 하고, 항목의 데이터를 값(value)라고 합니다.

오브젝트의 선언

아래와 같은 형식으로 오브젝트를 선언하여 변수에 담을 수 있습니다.

var 변수_이름 = {항목_이름1:값1, 항목_이름2:값2, 항목_이름3:값3}

항목의 이름을 만드는 규칙은 변수, 함수의 이름을 만드는 규칙과 동일합니다.

항목의 값에는 어떠한 데이터라도 들어갈 수 있습니다. 심지어 배열이나 다른 오브젝트들도 값으로 사용될 수 있습니다. 또한 오브젝트 역시 데이터이므로 배열에 넣을 수 있습니다.

항목의 호출 및 값 변경

변수_이름.항목_이름

위 형태로 오브젝트 내 항목의 데이터를 호출할 수 있습니다. 위에서 선언했던 person 변수에서 name과 age를 각각 호출해 봅시다.

person.name;
//"김봉팔"

person.age;
//18

항목은 변수와 마찬가지로 데이터를 대입할 수 있습니다.

person.age = 20;

person.age;
//20

항목의 추가 및 삭제

만약 오브젝트에 없는 항목을 호출하려고 하면, 오류를 내지 않고 undefined를 리턴합니다.

person.friends
//undefined

오브젝트에서 항목의 추가는 그냥 새 항목 이름을 호출하고 데이터를 넣어버리면 됩니다. friends라는 항목에 친구 이름 배열을 추가해 봅시다.

person.friends = ["김삼순", "James Bond"];

person.friends;
//(2) ["김삼순", "James Bond"]

이 때 person.friends는 배열을 나타내므로, 배열에 관련된 모든 명령어를 사용할 수 있습니다. 예를들어 해당 배열의 길이는 person.friends.length로 확인할 수 있습니다.

오브젝트에서 항목을 삭제하기 위해서는 delete 예약어를 사용합니다. 나이 항목을 지워봅시다.

delete person.age;
//true

person;
//{name: "김봉팔", friends: Array(2)}

delete 명령어를 사용하면, 해당 항목이 존재하여 항목이 성공적으로 지워진 경우에는 true를, 항목이 없어서 삭제하지 못한 경우에는 false를 리턴합니다.

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

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 myArray= [];

로 빈 배열, 즉 데이터를 0개 담고 있는 배열을 만들 수 있습니다. 이게 중요한 이유는, 그냥 변수를 선언하면 그건 변수이지 배열이 아니기 때문에 배열관련 명령어들을 사용할 수 없습니다.

var myVal;

myVal.length;

//myVal는 배열이 아니므로 배열의 길이는 가지는 length가 없습니다. 그러므로 에러가 납니다.

하지만 최소한 빈 배열을 넣어두면 코드가 에러를 내진 않습니다.

var myArray= [];

myArray.length;

//0

배열에 데이터 추가하기(push)

배열_이름.push(데이터)

로 현재 배열의 마지막에 값을 추가할 수 있습니다.

myArray 배열에 "apple", "orange", "banana"를 넣어봅시다.

myArray.push("apple");
myArray;
//["apple"]

myArray.push("orange");
myArray;
//(2) ["apple", "orange"]

myArray.push("banana");
myArray;
//(3) ["apple", "orange", "banana"]

배열의 마지막 값 빼내기(pop)

배열_이름.pop()

로 배열의 마지막 값을 빼낼 수 있습니다. 이 함수는 1. 배열의 마지막 데이터를 return하고, 2. 배열에서 마지막 데이터를 지웁니다.

var myVal = myArray.pop();

myVal;
//"banana";

myArray;
//(2) ["apple", "orange"]

위 명령어를 실행하면 myVal에는 myArray의 마지막 값이였던 "banana"가 대입되고, myArray에는 "banana"가 빠지게 됩니다.

배열에서 데이터 위치 찾기(indexOf)

배열_이름.indexOf(데이터)

배열_이름[배열_위치]로 해당 배열 위치의 데이터를 출력할 수 있음을 이전 강의에서 배웠습니다. 이번에는 반대로 데이터를 사용해서 배열 위치(index)를 찾는 함수입니다.

myArray.indexOf("orange");
//1

myArray.indexOf("apple");
//0

만약, 배열에 없는 데이터를 indexOf에 넣으면 항상 -1이 return됩니다. 역으로 -1이 나온다면 해당 데이터가 배열에 존재하지 않는 다는 것을 알 수 있습니다.

myArray.indexOf("onion");
//-1

두개의 배열 합치기(concat)

배열_이름.concat(배열_이름2)

이 함수는 두개의 배열을 합쳐 새로운 배열을 생성하고 return합니다. 하지만 push나 pop과는 다르게 기존의 배열의 데이터를 바꾸지 않습니다.

새로운 배열 myArray2를 만들고 concat함수를 사용해 두개의 배열을 합쳐봅시다.

var myArray2 = ["pear","melon"];
var myArray3 = myArray.concat(myArray2);

myArray;
//(2) ["apple", "orange"]

myArray2;
//(2) ["pear", "melon"]

myArray3;
//(4) ["apple", "orange", "pear", "melon"]

기존의 배열에 값을 더하기 위해서는 아래와 같이 사용합니다.

myArray = myArray.concat(myArray2);

myArray;
//(4) ["apple", "orange", "pear", "melon"]

원래 배열(myArray)에 새로운 배열(myArray2)이 더해진 것 처럼 보이지만, 사실은 새로 생성된 배열과 기존 배열을 바꿔치기한 것입니다.

배열에서 일부 데이터로 새 배열 만들기(slice)

배열_이름.slice(시작위치, 마지막위치)

배열에서 일부분으로 새로운 배열을 만들지만, 기존 배열의 데이터는 변경하지 않습니다.

var slicedArray = myArray.slice(1,3);

slicedArray;
//["orange", "pear"]

myArray;
//(4) ["apple", "orange", "pear", "melon"]

myArray[1]부터 myArray[3] 이전까지의 값으로 새 배열이 만들어 집니다. myArray는 값이 변하지 않습니다.

배열에서 일부를 지우고 새로운 데이터 삽입(splice)

배열_이름.slice(시작위치, 갯수, 새_데이터)

배열 함수 중에 제일 복잡하지만 그만큼 자주 쓰이는 함수입니다. 아래의 경우에 사용됩니다.

1. 배열의 일부를 지우거나 가져올 때(slice와 비교해서 기존의 배열의 데이터가 변경됩니다.)
2. 배열의 중간에 한개의 데이터를 넣을 때
3. 배열의 일부를 지우고 새로운 데이터를 넣을 때(위 두가지를 동시에 하는 것)

순서대로 살펴봅시다.

2. 배열의 일부를 지우거나 가져올 때

var splicedArray = myArray.splice(2,2);

splicedArray;
//["pear", "melon"]

myArray;
//(4) ["apple", "orange"]

slice와 다르게 두번째 파라메터에 잘라낼 데이터의 수가 들어갑니다. myArray[2]부터 2개의 데이터를 잘라내어 splicedArray에 담았습니다.

slice와 다르게 함수 실행 후 myArray에서 잘라낸 데이터가 사라집니다. 이 때문에 배열에서 데이터를 지울 때 이 함수를 사용합니다.

2. 배열의 중간에 한개의 데이터를 넣을 때

myArray.splice(1,0, "peach");

myArray;
//(4) ["apple", "peach", "orange"]

myArray[1]번 위치에서 0개의 데이터를 잘라내고 "peach"를 넣으라는 명령어입니다.

3. 배열의 일부를 지우고 새로운 데이터를 넣을 때

myArray.splice(1,1, "cherry");

myArray;
//(4) ["apple", "cherry", "orange"]

myArray[1]번 위치에서 1개의 데이터를 잘라내고 "cherry"를 넣으라는 명령어입니다.

이번 강의에서는 배열의 데이터를 조작하는 함수들에 대해 배워 봤습니다. 외울 내용이 좀 많은데, 저도 사실 splice 한동안 안쓰다가 쓰려고 하면 검색해보고 합니다. 내용을 달달달 외우는 것보다, 이런 것들을 할 수 있다는 것을 알면 알고리즘을 만들 때 도움이 되고 정확한 명령어나 문법은 검색해서 사용하면 됩니다.