※ 본 포스팅은 책『실전 프로젝트 반응형 웹 퍼블리싱』을 바탕으로 작성하였음

객체(Object)

자바스크립트는 객체기반(Object Based)의 스크립트 언어이다. '객체'란 '특정 기능'을 수행하는 단위체를 말하는데 우리의 평소 생활에서 예를 찾는다면, 평소 전화를 걸거나 받을 때 사용하는 '휴대폰'이나 혹은 어떤 물건을 멀리 보내야 할 때 이를 대행하는 '택배기사'와 '집배원'등을 모두 '객체'라고 할 수 있다. 이때, 해당 객체가 지닌 각각의 기능을 자바스크립트에서는 '메서드'라는 용어로 정의한다.

휴대폰.통화하기(); // 메소드
휴대폰.색상; // 속성

이와 같이, 자바스크립트는 항상 객체를 중심으로 기술한다. 또한 객체명 뒤의 점(.)을 경계로 하여 그 객체에 해당하는 메서드(기능) 또는 속성을 기술하게 된다.

자바스크립트에는 저마다 고유한 기능을 가진 다양한 종류의 객체들이 존재하는데, 크게 '내장 객체'와 '브라우저 객체' 그리고 '사용자 정의 객체' 등이 있다. '내장 객체'는 자바스크립트 내에 내장된 객체로서 Date, Array, Math 등이 있으며, '브라우저 객체(BOM)'는 각 웹 브라우저에서 지원되는 객체로서 window, document(DOM), location 등이 있다.

※ 객체의 생성 - new 연산자

new 연산자는 새로운 객체를 생성할 때 사용하며, 앞에 new를 붙이고 내장 객체의 함수명을 써서 작성한다. 다음은 날짜와 관련된 Date 객체의 생성 예이다.

기본형식

var todayObj = new Date();

우리에게 필요한 제품을 새로 생산하듯 날짜 정보를 제공해주는 Date 객체를 new 연산자를 이용하여 생성하였다. 그리고 제품들 간의 구분을 짓기 위해 모델명을 붙이듯 날짜 객체에도 앞으로 사용할 todayObj라는 인스턴스 네임(객체의 이름표)을 부여하였다. 앞으로 날짜와 관련된 정보가 궁금할 때에는 todayObj에게 물어보면 될 것이다.
그렇다면 어떻게 물어보면 될까? 먼저 todayObj한테 현대 연도를 한번 물어보자.

todayObj야, 현재 연도에 대한 정보를 보여줘!

물론 이렇게 물어보지는 않는다.
자바스크립트에서는 '객체'를 먼저 기술하고, 점(.)을 경계로 사용하고자 하는 메서드를 기술한다.

todayObj.getFullYear();

위와 같이 작성하면 Date 객체는 현재 연도에 대한 정보를 제공하게 되는 것이다.

그런데 getFullYear() 메서드를 쓸 경우, 대문자와 소문자를 어떻게 구분하는 것일까?


자바스크립트는 낙타(camel)표기법을 따른다. getFullYear 메서드는 get + Full + Year 3개 단어의 조합이다. 첫 단어는 항상 소문자로 시작하고, 다음에 오는 단어 중 첫 글자는 항상 대문자로 표기하는 방법이다. 마치 낙타의 등이 연상되지 않는가?

위에서도 보다시피 객체를 생성할 때에는 보통 new를 사용한다. 하지만 new를 사용하지 않아도 되는 객체가 있는데, 바로 그 대표적인 예가 Math 객체이다. Math 객체의 경우에는 이미 정해져 있는 수학 공식을 가져다 써야하므로 '정적 객체'라고도 부른다.

그 외에도 꼭 new를 사용하지 않아도 간편하게 생성할 수 있는 String, Array 등의 객체들이 있다.

그럼 각 내장 객체의 종류와 메소드 및 속성의 사용법에 대해서도 알아보자

Date 객체

현재 또는 특정 날짜와 시간에 대한 정보를 제공한다. 만일 객체 생성 시 특정 날짜를 지정하지 않았다면 현재 컴퓨터 시스템에 입력된 날짜에 대한 정보를 제공한다.

다음은 날짜 객체를 생성하는 기본적인 방법이며, 인자값으로 연/월/일/시/분/초를 입력하면 날짜 객체는 지정된 특정 날짜와 시간에 대한 정보를 제공한다.

기본형식

var 변수 = new Date();

또는

var 변수 = new Date(연, 월, 일, 시, 분, 초);

날짜 정보 제공 메서드

getFullYear() --- 날짜에서 연도에 대한 정보를 제공
getMonth() --- 날짜에서 월에 대한 정보를 제공, 0~11 반환(0 → 1월, 11 → 12월)
getDate() --- 날짜에서 일에 대한 정보를 제공
getDay() --- 날짜에서 요일에 대한 정보를 제공(0 → 일요일, 6 → 토요일)
getHours() --- 시간에서 시(0~23)에 대한 정보를 제공
getMinutes() --- 시간에서 분(0~59)에 대한 정보를 제공
getSeconds() --- 시간에서 초(0~59)에 대한 정보를 제공
getMilliseconds() --- 시간에서 밀리(1/1000)초에 대한 정보를 제공
getTime() --- 1970년 1월 1일 이후 경과 시간을 밀리초로 제공

날짜 지정 메서드

setFullYear() --- 날짜에서 '연도'만 새로 지정할 때
setMonth() --- 날짜에서 '월'만 새로 지정할 때(1월 → 0, 12월 → 11)
setDate() --- 날짜에서 '일'만 새로 지정할 때
setHours() --- '시간'만 새로 지정할 때
setMinutes() --- '분'만 새로 지정할 때
setSeconds() --- '초'만 새로 지정할 때
setMilliseconds() --- '밀리초'만 새로 지정할 때
setTime() --- 현재까지 경과된 밀리초를 새로 지정할 때
toGMTString() --- 날짜를 그리니치 천문대 표준시로 표시
toString() --- 날짜를 문자 형식으로 표시

<script type="text/javascript">
//<![CDATA[
  document.write("<h1>현재날짜/시간 정보</h1>")
  var today=new Date();
  var nowMonth = today.getMonth() + 1;		// 현재 월(0~11)
  var nowDate = today.getDate();		// 현재 일
  var nowDay = today.getDay();			// 현재  요일(0:일요일 ~ 6:토요일)
  var nowHours = today.getHours();		// 현재 시간
  var nowMinutes = today.getMinutes();		// 현재 분
  var nowSeconds = today.getSeconds();		// 현재 초
  var nowTime = today.getTime();		// 1970년 1월 1일부터 밀리초 경과된 시간
  document.write("월: " + nowMonth + "<br />");
  document.write("일: " + nowDate + "<br />");
  document.write("요일: " + nowDay + "<br />");
  document.write("시: " + nowHours + "<br />");
  document.write("분: " + nowMinutes + "<br />");
  document.write("초: " + nowSeconds + "<br />");
  document.write("경과시간: " + nowTime + "<br />");
  document.write("<h1>날짜 바꾸기</h1>")
  today.setMonth(11);				// 월을 12월로 지정
  today.setDate(25);				// 일을 25일로 지정
  document.write("월: " + today.getMonth() + "<br />");
  document.write("일: " + today.getDate() + "<br />");
//]]>
</script>

Math 객체

단순하게 수를 더하거나 뺄 경우에는 앞에서 공부한 '산술 연산자'들을 사용한다. 하지만 소수점을 반올림하거나 최대/최소값 등 특정 공식을 사용해야 할 경우라면, 수학 객체의 메서드를 사용하는 것이 훨씬 편리하다. 수학 객체는 다른 내장 객체와 다르게 new(생성자 키워드)를 사용하지 않는 정적인 객체이다.

max(숫자1, 숫자2, 숫자3) --- 숫자 중 최대값을 반환
min(숫자1, 숫자2, 숫자3) --- 숫자 중 최소값을 반환
round(숫자) --- 소수점 첫째 자리를 반올림
ceil(숫자) --- 소수점 자리를 무조건 올림
floor(숫자) --- 소수점 자리를 무조건 절삭
abs(숫자) --- 수의 절대값을 반환
random() --- 0과 1 사이의 난수를 발생

기본 메서드 사용법을 익히기 위해 다음 예제를 실습해 보자

<script type="text/javascript">
  //<![CDATA[
  var maxNum = Math.max(30, 70, 5);
  document.write("최대값: " + maxNum + "<br />");		// 출력값 --- "최대값: 70"

  var minNum = Math.min(8, 10, 15);
  document.write("최소값: " + minNum + "<br />");		// 출력값 --- "최소값: 8"

  var roundNum = Math.round(3.5);
  document.write("반올림: " + roundNum + "<br />");		// 출력값 --- "반올림: 4"

  var ceilNum = Math.ceil(5.1);
  document.write("소숫점올림: " + ceilNum + "<br />");		// 출력값 --- "소숫점 올림: 6"

  var floorNum = Math.floor(10.5);
  document.write("소숫점내림: " + floornum + "<br />");		// 출력값 --- "소숫점 내림: 10"

  var absNum = Math.abs(-10);
  document.write("절대값: " + absNum + "<br />");		// 출력값 --- "절대값: 10"

  var ranNum = Math.random();
  document.write("0~1 난수: " + ranNum + "<br />");
  //]]>
</script>

응용문제
파일명이 각각 "img1.jpg" / "img2.jpg" / "img3.jpg" 인 이미지들이 접속할 때마다 랜덤으로 출력되도록 만드세요.

응용 문제의 그림 파일명들은, 'img'는 공통적이고 뒤에 붙은 숫자만 1~3으로 구분되어 있다. 그러므로 1에서 3까지의 난수를 활용하면 무작위(random) 이미지를 출력할 수 있겠다. 다음의 공식을 이용하면 원하는 숫자 사이에서 난수를 발생시킬 수 있다.

random 메서드를 이용해서 원하는 숫자(작은수 ~ 큰수) 사이의 난수값을 도출하는 공식

Math.floor( Msth.random() * (큰수 - 작은수 + 1) ) + 작은수

<script type="text/javascript">
//<![CDATA[
  var imgNum = Math.floor(Math.random()*3)+1;
  document.write("<img src = 'images/img" + imgNum + ".jpg' alt='랜덤이미지' />");
//]]>
</script>

위 예제는 난수값 공식을 이용하여 1부터 3까지의 정수가 무작위로 추출되도록 하였다. 랜덤으로 구한 숫자를 이용해 src 경로의 파일명에 숫자 대신 난수가 오도록 변수로 처리한 것이다.

String 객체

아마도 이번 String(문자열) 객체가 내장 객체 중에서는 활용 빈도가 가장 높을 것이다. 앞에서 우리는 이미 문자형 데이터를 변수에 저장하여 사용했다. 그 문자형 변수도 또한 String 객체인 것이다. 그러므로 이런 문자형 변수에는 String 객체가 사용할 수 있는 메서드나 속성들을 동일하게 사용할 수 있다. 만약 변수에 숫자를 저장한 후 String 객체에 해당하는 메서드를 사용하면 에러가 발생한다.

그럼 String 객체를 생성하는 방법에 대해 먼저 배운 후, 메서드와 속성의 사용법에 대해 공부해 보자. String 객체도 역시 보편적인 new 연산자를 사용해 생성할 수 있지만, 보다 간편하게 생성할 수도 있다.

보편적인 생성법

기본형식

var 변수(인스턴스 네임) = new String("자바스크립트");

간편한 생성법

기본형식

var 변수(인스턴스 네임) = "자바스크립트";

당연히 간편하게 생성하는 두 번째 방식을 더 많이 쓸 것이다. 그럼 다음 문자 객체를 사용하여 메서드에 대해 공부해보자.

var theText = "web js hi ciy";

위 데이터는 theText라는 변수에 13개의 인덱스로 구분되어 저장된다고 보면 된다. 문자의 공백도 각각 하나의 문자로 인식되므로 데이터의 총 문자수는 13개이며, 각 낱글자별 인덱스 번호는 0부터 부여되므로 '총 문자개수'에서 1을빼면 마지막 인덱스 번호를 구할 수 있다.

theText(변수) // 인덱스번호 : 12

0	1	2	3	4	5	6	7	8	9	10	11	12
w	e	b		j	s		h	i		c	i	y

theText.bold() --- 텍스트를 진하게 표현하여 반환 // web js hi ciy
theText.link("URL") --- 텍스트에 링크를 걸어 반환 // web js hi ciy
theText.length --- 텍스트의 개수를 반환 // 13
theText.toLowerCase() --- 영문자를 소문자로 바꿔 반환 // web js hi ciy
theText.toUpperCase() --- 영문자를 대문자로 바꿔 반환 // WEB JS HI CIY
theText.indexOf("i") --- 처음에서부터 "i"를 찾아 최초로 일치하는 인덱스 번호를 반환, 없을 경우 -1을 반환 // 8
theText.lastIndexOf("i") --- 끝에서부터 "i"를 찾아 최초로 일치하는 인덱스 번호를 반환, 없을 경우 -1을 반환 // 11
theText.charAt(5) --- 5번 인덱스에 저장된 문자 데이터를 반환 // s
theText.substring(4,6) --- 4번부터 6번 인덱스까지의 문자 데이터를 반환 // js
theText.substr(10, 3) --- 10번 인덱스부터 3글자를 반환 // ciy
theText.replace("web", "bye") --- 텍스트 중 "web"을 "bye"로 치환(교체)해서 반환 // bye js hi ciy
theText.slice(7, 9) --- 7번부터 9번 인덱스까지의 일부만 잘라서 반환 // hi
theText.concat("good") --- 끝에 "good"이라는 문자를 결합하여 반환 // web js hi ciy good
theText.split(" ") --- " "(공백)을 기준으로 데이터를 분리(콤마) // web, js, hi, ciy

<script type="text/javascript">
//<![CDATA[
  document.write("<h3>문자치환</h3>");
  var theText1 = "img2_out.jpg";			// 문자객체1
  theText1 = theText1.replace("out", "over");
  document.write(theText1 + "<br />");

  document.write("<h3>문자추출</h3>");
  var theText2 = "images/img10.jpg";			// 문자객체2
  theText2 = theText2.split("/")[1];			// "img10.jpg"가 theText2에 저장됨
  theText2 = theText2.substring(3);			// "10.jpg"가 theText2에 저장됨
  theText2 = parseInt(theText2);			// "10.jpg"에서 10만 남음
  document.write(theText2 + "<br />");			// '10' 출력
  
  document.write("<h3>마지막 문자 추출</h3>");
  var theText3 = "hello javascript";			// 문자객체3
  var lastIndex = theText3.length-1;			// 문자개수-1 (마지막 인덱스번호)
  var theText3 = tehText3.charAt(lastIndex);		// 인덱스 번호에 해당하는 문자 반환
  document.write(theText3 + "<br />");			// "t"

  document.write("<h3>특정 문자 포함여부</h3>");
  var theText4 = "tel phone noe home";			// 문자객체4
  var findIndex = theText4.indexOf("mobile");		// 문자를 찾아 인덱스 번호 반환
  if(findIndex<0){
    document.write("텍스트에 찾는 문자가 없습니다.")
  }else{
    document.write("텍스트에 찾는 문자가 포함 되어있습니다.");
  }
//]]>
</script>

출력화면

문자치환

img2_over.jpg

문자추출

10

마지막 문자 추출

t

특정 문자 포함여부

텍스트에 찾는 문자가 없습니다.

• replace 메서드를 이용하여 문자열 중 'out'을 'over'로 치환하였다.
• split 메서드를 사용하여 문자열을 나누면, 데이터들이 [0,1,2...]의 순서로 인덱스된 공간에 각각 저장된다. 바로 뒤에서 공부할 '배열'이라는 개념으로, 변수 하나에 여러 데이터를 순서대로 나눠 저장하는 것이다. 즉 여기서는 'images/img01.jpg'이라는 문자열이 슬래쉬(/)를 기준으로 나뉘면서 배열[0]에는 'images'가, 배열[1]에는 'img10.jpg'가 각각 저장된 것이다. 결국, 예제의 split 실행문(theText2 = theText.split("/")[1];)의 마지막 [1]이란 이렇게 둘로 나뉜 배열공간 0번과 1번 중에서 두 번째 [1] 공간을 의미한다.
  정리하면, 원래 'images/img10.jpg'이던 theText2 변수내용 중 'img10.jpg' 부분만 남긴 것이다. 그 후 substring 메서드를 이용하여 'img10.jpg'이라는 문자열의 3번 인덱스부터 끝까지의 문자만(10.jpg) 남기고, 마지막으로 뒤에서 다룰 parseInt 메서드를 사용하며 정수만(10) 남았다.
• 문자열에서 마지막 문자를 추출하기 위해 마지막 인덱스 번호를 '문자개수-1'을 이용하여 구하고, charAt 메서드를 이용해 해당 인덱스 번호의 문자를 구했다.
• indexOf 메서드를 이용하면 찾는 문자가 있을 경우에는 해당 인덱스 번호를, 찾는 문자가 없을 때에는 '-1'을 반환하므로 if 조건문을 활용해 문자로 출력되도록 했다.

위 예제 중 '문자치환' 예제는 보통 웹 페이지 내의 '버튼 이미지'를 바꿀 때에 많이 사용되며, '문자추출' 예제는 요소의 속성값을 가져와 그 숫자를 활용할 경우에 많이 사용된다.

그리고 마지막에 쓰인 indexOf 메서드의 경우에는 찾는 문자의 인덱스 번호를 반환하기도 하지만 찾는 문자가 포함되어 있는지 여부를 알아볼 때에도 많이 사용된다. 찾는 문자가 있을 때는 좌측에서부터 검색된 문자의 인덱스 번호를 반환하지만 찾는 문자가 없을 때는 '-1'이란 값을 반환한다. 그러므로 indexOf로 찾은 문자의 인덱스 번호가 0보다 작다는 것은 찾는 문자가 없다는 것이다.

Array 객체

우리는 지금까지 여러 차례 변수 선언을 통해 데이터를 저장해 보았다. 지금까지의 방법을는 반드시 한 번에 한 개의 데이터만 저장되었다. 가령 '10'은 지워지고 새로운 '100'이 저장되듯이 말이다.

하지만 '배열(Array)' 을 이용하면 하나의 변수에 여러 개의 데이터를 저장할 수 있다. 하나의 변수에 여러 개의 공간으로 이뤄진 '배열 객체'를 대입하여 저장하므로, 각 공간마다의 인덱스(Index) 번호가 존재하며 우리는 그 인덱스 번호를 사용해 각각의 공간에 저장된 여러 데이터들을 불러올 수 있는 것이다. '배열 객체'를 쉽게 '서랍장'이라고 생각해보자.

그럼 변수에 여러 개의 데이터를 저장하는 '배열 객체'를 어떻게 생성하는지 보자.

new 연산자를 사용한 배열 객체 생성법

기본형식

var 변수(인스턴스 네임) = new Array();

위 기본형식은 "변수야, 이제 여러 개의 값을 저장해도 돼!"라는 뜻으로 이해하면 된다.
이제, 변수에 인덱스 번호를 지정하여 직접 나눠서 저장할 수 있다.

기본형식
변수[0] = "값1"
변수[1] = "값2"
변수[2] = "값3"
변수[3] = "값4"
변수[4] = "값5"

저장 공간을 지정한 배열 객체 생성법

기본형식

var 변수(인스턴스 네임) = new Array(5);

새 배열 객체를 생성하며 '5'라는 숫자를 넣었다. 이는 데이터를 5개만 저장할 수 있도록 총 5개의 저장 공간을 두겠다는 뜻이다. 즉, "전체 공간을 5개로 나눠서 총 5개의 데이터만 저장하라"는 말로 이해하면 된다.

편리한 배열 객체 생성법

기본형식

var 변수(인스턴스 네임) = [값1, 값2, 값3, 값4, 값5]

이와 같이 new 연산자를 사용하징 않고 변수에 여러 개의 값을 저장하는 방법들이 있다. 많은 사람들이 이 방식을 선호한다.

그럼 다음 예제를 통하여 배열 객체에 데이터를 저장하는 방법과 출력하느 방법을 실습해보자.

<script type="text/javascript">
//<![CDATA[
  // 1. 특정 인덱스에 저장된 데이터 출력
  var name = new Array();
name[0] = "홍길동";
name[1] = "임꺽정";
name[2] = "아무개";
name[3] = "전우치";
name[4] = "이도령";
document.write(name[3] + "<br />"); // 3번 인덱스에 저장된 데이터를 출력

// 2. 오늘읜 요일 알아보기
var days = new Array("일", "월", "화", "수", "목", "금", "토");
var today = new Date();
var yoil = days[today.getDay()]; // 오늘의 요일에 해당하는 값을 반환 일:0 ~ 토:6
document.write(yoil + "요일 <br />"); // 오늘의 요일 반환

// 3. 전체 재산의 합 구하기
var money = [100, 100, 200, 50];
var theLen = money.length;
var total = 0;
for(var i=0; i<thLen; i++){
  total = total + money[i];
}
document.write(total);
//]]>
</script>

예제와 같이 오늘의 요일을 출력하고 싶을 때에는 먼저 요일에 대한 문자 데이터를 '일요일 ~ 토요일'의 순서로 배열하고, 날짜 객체로 오늘의 요일에 해당하는 인덱스 값을 구한다. 이후 그에 맞는 문자 데이터를 배열 인덱스에서 받으면 요일을 문자로 출력할 수 있다.

전체 재산의 합 구하기의 경우는, 저장된 배열개수가 4개이므로 최초 '0'으로 설정도니 total 변수를 지정하여 하나씩 차례대로 더하되 for 문을 사용하여 0부터 총 배열개수(theLen)보다 작은 인덱스 번호의 데이터들만 더하도록 한 것이다. 결국 실행문은 인덱스 0번부터 3번까지의 데이터를 total 변수에 누적하여 합산하게 된다. 그 최종 저장값을 출력했다.

배열 메서드

reverse() --- 배열 데이터를 역순으로 반환
slice(번호1, 번호2) --- 인덱스 번호 1부터 시작하여 직전의 데이터까지 잘라서 저장
sort() --- 배열 데이터를 알파벳 혹은 0/1/2..의 오름차순을 정렬
join("구분자") --- 배열 데이터를 구분자로 연결하여 결합
concat() --- 여러 개의 배열 데이터들을 하나로 결합

배열 데이터 추가/삭제 메서드

shift(); --- 배열에서 첫 인덱스(0)에 저장된 데이터를 삭제
pop(); --- 배열에서 마지막 인덱스에 저장된 데이터를 삭제
unshift(값); --- 배열에서 첫 인덱스(0)에 새 데이터를 중첩하여 추가
push(값); --- 배열에서 마지막 인덱스에 새 데이터를 중첩하여 추가
concat() --- 여러 개의 배열 데이터들을 하나로 결합

<script type="text/javascript">
//<![CDATA[
  // 1. reverse() - 배열 데이터 역순 정렬
  var theFood = ["짜장면", "냉면", "갈비탕", "돈까스", "삼겹살"];
  theFood.reverse();
  console.log(theFood)
  // 출력값 : [ "삼겹살", "돈까스", "갈비탕", "냉면", "짜장면" ]

  // 2. sort() - 배열 데이터 오름차순 정렬
  var theSubway = ["2호선", "9호선", "7호선", "4호선", "3호선"];
  theSubway.sort();
  console.log(theSubway);
  // 출력값 : [ "2호선", "3호선", "4호선", "7호선", "9호선" ]

  // 3. concat() - 배열된 데이터를 결합
  var Mountain1 = ["남산", "도봉산", "관악산", "청계산", "북한산"];
  var Mountain2 = ["설악산", "지리산", "한라산", "속리산"];
  var joinResult = Mountain1.concat(Mountain2);
  console.log(joinResult);
  // 출력값 : [ "남산", "도봉산", " 관악산", "청계산", "북한산", "설악산", "지리산", "한라산", "속리산" ]

  // 4. slice(시작 인덱스, 마지막 인덱스) - 원하는 데이터만 선택
  var theName = ["최준호", "이성은", "기오정", "김민경", "정예선"];
  var result = theName.slice(2, 4);
  console.log(result);
  // 출력값 : [ "기오정", "김민경" ]

  // 5. join("구분자") - 구분자 기분으로 데이터를 합친다.
  var theProduct = ["냉장고", "컴퓨터", "선풍기", "밥솥", "핸드폰"];
  var joinResult = theProduct.join("-");
  console.log(joinResult);
  // 냉장고 - 컴퓨터 - 선풍기 - 밥솥 - 핸드폰

//]]>
</script>

• reverse()를 이용하여 배열에 저장된 데이터를 역순으로 바꾼다.
• sort()를 이용하여 배열에 저장된 데이터를 오름차순으로 정렬한다.
• concat()를 이용하여 Mountain1과 Mountain2 배열을 하나로 합쳐 새로운 배열로 생성한 후 joinResult에 저장한다.
• slice()를 이용하여 배열에 저장된 데이터 중 2번 인덱스(기오정)부터 4번 인덱스 직전, 즉 3번 인덱스(김민경)까지 잘라서 새로운 배열로 생성한 후 result에 저장한다.
• join()을 이용하여 배열에 저장된 데이터를 구분자(-)로 연결하여 하나의 데이터로 새로 생성 후 joinResult에 저장한다.

<script type="text/javascript">
//<![CDATA[
  var theSubway = ["2호선", "9호선", "7호선", "4호선", "3호선"];
  var newLine1 = "1호선";
  var newLine2 = "분당선";

  theSubway.shift();			// 맨 앞(0번 인덱스)의 데이터 삭제
  console.log(theSubway)
  // 출력값 : [ "9호선", "7호선", "4호선", "3호선" ]

  theSubway.unshift(newLine1);		// 맨 앞(0번 인덱스)의 데이터 추가(변경)
  console.log(theSubway)
  // 출력값 : [ "1호선", "9호선", "7호선", "4호선", "3호선" ]

  theSubway.pop();			// 마지막 (4번 인덱스)의 데이터 삭제
  console.log(theSubway)
  // 출력값 : [ "1호선", "9호선", "7호선", "4호선" ]

  theSubway.push(newLine2);		// 마지막(4번 인덱스)의 데이터 추가(변경)
  console,log(theSubway)
  // 출력값 : [ "1호선", "9호선", "7호선", "4호선", "분당선" ]
//]]>
</script>

'데이터 추가'의 역할을 하는 unshift와 push을 혼동하기 쉬운데, 이들의 '추가'란 결국 '중첩/변경' 과도 같아서 다음과 같이 작동한다.
현재 theSubway라는 변수에는 ["2호선", "9호선", "7호선", "4호선', "3호선"]의 순서대로 인덱스 번호 0에서 4까지 구성된 배열 객체가 생성되었는데, 이때 unshift 메서드를 이용해 새로 지정된 newLine1 변수의 값 "1호선"'을 '추가'해주면, 원래 theSubway 변수의 배열 데이터 0번인 "2호선"을 뒤로 밀고 앞으로 추가되어 ["1호선", "2호선", ...] 순으로 재정렬 되는 것이 아니라 "2호선"이란 데이터를 "1호선"으로 씌우게 되는 것이다. 결국, ["1호선", "9호선", "7호선", "4호선", "3호선"]의 순서로 다시 정렬되는 것이다. push의 역할도 마찬가지로서, '추가'라는 개념의 의미를 정확히 알아야 한다.