배열 객체와 문자열 객체 살펴보기 - 자바스크립트(Javascript)

지금까지는 하나의 변수에는 하나의 데이터를 저장했습니다. 하지만 배열 객체는 하나의 변수명에 인덱스(index)를 이용하여 여러 데이터를 저장할 수 있게끔 합니다. 오늘은 배열 객체 & 문자열 객체에 대해 살펴봅니다.

 

---

배열 객체를 생성할 때 아래와 같이 3가지 방법을 사용합니다.

배열객체 생성하는 방법

 

person1은 배열 객체를 선언하고, person2와 person3에는 여러 개의 데이터(숫자형, 문자형)를 입력하고 출력해 봅니다.

 

현재 선언된 배열 객체에 입력된 값과 인덱스 번호는 아래와 같습니다.

 

	인덱스 번호
	0	1	2
person1	배열 객체만 선언되고 값은 없음
person2	1	이	3
person3	일	2	삼

반복문을 이용하여 배열 객체에 임의의 데이터를 입력하고 출력해 봅니다.

 

document.write("<h1>배열 객체</h1>");

br="<br>";

var num = new Array();

for (count=1;count<=20;count++){

num[count-1]=count;

}

document.write(num, br);

document.write(num[0],br);

document.write(num[19],br);

document.write(num[20],br);

document.write(num.join(":"));

 

num[0]에는 숫자 1이 num[19]에는 숫자 20이 입력되고, num[20]에는 아무 데이터도 저장된 값이 없는 것을 확인하고 배열 객체 join() 속성을 이용하여 하나의 문자열로 출력되는 것을 확인해 봅니다.

join 속성으로 배열 객체 연결하여 출력

배열 객체에서 사용 가능한 메서드와 속성에 대해 살펴봅니다.

 

종류	설명
join(연결 문자)	해당 데이터를 연결 문자 기준으로 연결하여 1개의 문자열로 반환
reverse( )	데이터의 순서를 거꾸로 바꾼 후 반환
sort( )	데이터를 오름차순으로 정렬 후 반환
slice(index1. index2)	인덱스 구간만큼 잘라서 배열 객체로 반환
splice( )	지정 데이터를 삭제하고 그 구간에 새로운 데이터를 삽입
concat( )	2개의 배열 객체를 하나로 결합
pop( )	배열 객체의 맨 마지막 데이터를 삭제
push(new data)	배열 객체의 맨 마지막에 새 데이터 삽입
shift( )	배열 객체에서 첫 번째 인덱스에 저장된 데이터 삭제
unshift(new data)	배열 객체의 맨 앞의 인덱스에 새 데이터 삽입
Length	배열 객체의 데이터 개수 반환

 

var lang_1 = ['Python','JavaScript','Ruby','Basic'];

var lang_2 = ['C++','C','Java','PHP'];

var br = "<br>";

var result = lang_1.join(' : ');

document.write(result, br);

결과 : Python : JavaScript : Ruby : Basic

 

result=lang_1.concat(lang_2);

document.write(result, br);

결과 : Python, JavaScript, Ruby, BasiC, C++,C, Java, PHP

 

result=lang_1.slice(0,3);

document.write(result, br);

결과 : Python, JavaScript, Ruby

 

result=lang_1.splice(3,1, 'R','c#');

document.write(result, br, lang_1, br);

결과 : Basic

Python, JavaScript, Ruby, R, c#

 

lang_2.sort();

document.write(lang_2, br);

결과 : C, C++,Java, PHP

 

lang_2.reverse();

document.write(lang_2, br);

결과 : PHP, Java, C++,C

 

result=lang_2.pop();

document.write(result, br, lang_2, br);

결과 : C

PHP, Java, C++

 

상기 결과를 확인하며 자바스크립트에서 배열 객체와 그 속성을 어떻게 다루는지 알아 둡니다. 이제 문자열 객체에 대해 살펴봅니다.

 

new String을 사용하여 문자열 객체를 생성합니다. 문자열 객체 text에 인덱스 번호별 저장된 데이터를 확인해 봅니다.

 

인덱스 번호	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
데이터	H	e	l	l	o		J	a	v	a	s	c	r	i	p	t

문자열 객체에서 사용할 수 있는 메서드에 대해 살펴봅니다.

 

메서드 종류	설명	사용 예	결괏값
charAt(index)	문자열에서 인덱스 번호에 해당하는 문자 반환	charAt(2)	l
indexOf("찾을 문자")	찾고자 하는 문자의 첫 번째 인덱스 번호 반환 (찾는 문자가 없으면 -1을 반환)	indexOf("Java")	6
lastindexOf("찾을 문자")	끝에서부터 찾고자 하는 문자의 첫 번째 인덱스 번호 반환 (찾는 문자가 없으면 -1을 반환)	lastindexOf("Hello")	0
match("찾을 문자")	찾고자 하는 문자 또는 문자열을 반환 (찾지 못하면 null 반환)	match("Java")	Java
replace("바꿀 문자","새 문자")	바꿀 문자를 새 문자로 치환	replace("Hello","Hi")	Hi Javascript
search("찾을 문자")	indexOf와 동일하지만 정규 표현식을 적용할 수 있다 (indexOf는 정규 표현식을 지원 X)	indexOf("Java")	6
slice(index1, index2)	index1부터 index2미만까지 추출 후 반환	slice(2,10)	llo Java
substring(index1, index2)	index1부터 index2미만까지 추출 후 반환 (slice와 다른 점은 index1 > index2일 경우 바꾸어서 실행)	substring(10,2)	llo Java
substr(index1, 문자 개수)	index1부터 n 개까지 추출 후 반환	substr(2,8)	llo Java
split("문자")	지정 문자를 기준으로 나누어 배열에 저장	split(" ")	["hello","Javascript"]
toLowerCase( )	영문 대문자를 소문자로 반환	toLowerCase( )	hello javascript
toUpperCase( )	영문 소문자를 대문자로 반환	toUpperCase( )	HELLO JAVASCRIPT
length	문자의 개수를 반환	length	16
concat("새로운 문자")	기존 문자열에 새로운 문자를 결합하여 반환	concat("new string")	Hello Javascriptnew string
charCodeAt(index)	해당 인덱스에 저장된 데이터의 아스키코드값을 반환	charCodeAt(0)	72
trim( )	문자의 앞뒤 공백을 제거	" 공백 ".trim()	공백

 

상기 메서드를 사용하여 console.log에 출력해 봅니다.

다양한 문자열 메서드 사용하여 출력

document.write가 브라우저 메인화면에 출력하는 것이라면 console.log는 콘솔 창에서 확인 가능합니다.(크롬 브라우저에서 F12 키를 눌러보세요~!)

배열 객체와 문자열 객체가 비슷한 문법이 사용되는 경우가 많습니다. 개념도 비슷합니다. 역시나 다소 지루하더라도 직접 타이핑해가며 확인해 보는 것이 중요합니다. 자바스크립트를 학습하는 분이라면 직접 확인해 보세요~! 다른 언어에서도 사용되는 개념들이오니 한번쯤은 자세히 살펴볼 가치가 있는 객체들입니다. 궁금하신 내용이나 의문사항을 댓글로 남겨주시면 제가 아는 범위 내에서 회신드리도록 하겠습니다.