<22.03.08> JavaScript 공부 일지 #03. 문자열, 배열 내장 함수 정리

웹 프로그래밍/JavaScript

<22.03.08> JavaScript 공부 일지 #03. 문자열, 배열 내장 함수 정리

mayberry 2022. 3. 8. 21:15

오늘은 자바스크립트의 문자열과 배열의 내장 함수에 대해 정리하고자 한다. 각 자료형에는 상당히 많은 내장 함수가 있지만, 그 중 기능적으로 유용한 것들에 대해서만 일부 포스팅을 하고자 한다.

1. 문자열 내장함수

1-1. 문자 검색 관련 함수

1-1-1. .indexOf( )

문자열 내에서 특정 문자를 검색하고 싶을 때가 있다. 이러한 문제를 처리하기 위해 자바스크립트에서는 다양한 내장 함수를 지원한다. 첫 번째로 indexOf이다. 아래 예시 코드를 보자.

var str = "Please wait a minute Please";
console.log(str.indexOf("Please"));

'indexOf(찾고자 하는 문자)' 의 형태로 사용할 수 있다. 위 코드는 str 문자열 중 "Please" 문자를 찾아달라는 의미이므로, 콘솔 창에는 0이 출력된다. indexOf는 찾고자 하는 문자가 시작하는 인덱스를 반환하기 때문에 Please가 처음으로 등장하는 인덱스 0을 출력한다.

1-1-2. .lastIndexOf( )

예시로 들었던 위 코드는 Please가 두 번 등장한다. 따라서 indexOf() 함수를 사용할 경우 문자열 내 찾고자 하는 단어가 두 개 이상이더라도 처음으로 등장하는 인덱스만 반환한다. lastIndexOf는 indexOf 함수와 반대로, 마지막으로 등장하는 인덱스를 반환한다.

var str = "Please wait a minute Please";
console.log(str.lastIndexOf("Please"));

위 코드를 실행하면 콘솔에서는 21이 출력된다.

1-2. 문자열 범위 지정

1-2-1. .slice( ) / .substring( )

자바스크립트의 문자열은 특정 범위에 해당하는 문자열들을 통째로 가지고 올 수 있다. 이를 도와주는 함수가 slice 함수다. slice 함수는 두 개의 정수 인자를 받는다. 문자열에서 첫 번째 인자부터 두 번째 인자내에 있는 문자열을 모두 반환한다. 아래의 코드를 보자.

var str = "Please wait a minute Please";
console.log(str.slice(2,8));

2번째부터 8번째까지 위치한 문자열을 반환하게 된다. 이 때, slice의 마지막 인자(8)에 해당하는 문자(wait의 a)는 출력하지 않고 7번째 문자까지만 출력한다. 이를 주의해서 사용하자. 위 코드를 실행하면 'ease w'가 출력된다. 공백도 하나의 문자로 취급한다.

아래의 코드를 보자.

var str = "Please wait a minute Please";
console.log(str.slice(-8, -1));

slice 함수는 음수도 인자로 전달할 수 있다. 음수로 인자를 전달할 경우 인덱싱이 문자열의 오른쪽부터 시작된다. 따라서, str 변수를 예시로 들면, esaelP ,etun... 이렇게 거꾸로 인덱싱이 진행되는 것이다. 하지만 출력할 때는 정방향으로 출력된다. 인덱싱만 거꾸로 진행될 뿐이다.

가장 오른쪽 끝에 있는 문자가 -1이 되며, 왼쪽으로 -1만큼 이동한다. 따라서, -8부터 -1 범위를 준 위 코드의 출력물은 'e Pleas'가 되는 것이다.

substring 함수의 경우 slice와 기능이 동일하다. 따라서 별도의 코드를 삽입하진 않겠지만, 사용은 slice와 동일하다.

1-2-2. substr( )

substr은 두 개의 정수 인자를 받는데, 첫 번째 인자를 시작으로하여 두 번째 인자만큼의 문자열을 출력한다. 아래 코드를 보자.

var str = "Please wait a minute Please";
console.log(str.substr(3, 5));

문자열 변수 str의 세 번째 인덱스 이후로 다섯개의 문자를 출력한다. 즉, ase w 까지 출력되는 것이다. 위 함수를 활용하여 주민등록번호와 같은 개인정보를 입력받았을 때 생년월일이나, 고향을 출력하는 로직을 생성할 수 있다.

1-3. 문자열 분할 및 조립

1-3-1. .split( )

문자열은 여러 문자열로 분할될 수 있으며, 여러 개의 문자열을 한데 모아 하나의 문자열로 만들 수도 있다. 내장함수 split은 하나의 문자열을 여러 개로 분산하여 배열에 저장한다. 인자로는 문자열을 받을 수 있다. 아래 코드를 보자.

var str = "Please wait a minute Please";
console.log(str.split(" "));

위 코드는 변수 str을 공백을 기준으로 쪼개어 배열에 담는다. 변수 str에는 총 4개의 공백이 있으므로, ["Please", "wait", "a", "minute", "Please"]와 같은 배열이 출력된다.

만일 문자열 내에 쉼표나 다른 특수기호가 있다면 split(",")나, split("-")와 같은 형태로 사용하여 문자열을 분할 할 수 있다.

1-3-2. .concat()

concat 함수는 서로 다른 문자열을 하나의 문자열로 만들어주는 합병 함수다. 아래의 코드를 보자.

var text = "Please wait a minute";
var text2 = "Please";

var text3 = text.concat(text2);

위와 같이 사용할 수 있는데, concat 함수에는 병합하고자 하는 문자열 앞에 특정 문자열을 추가하는 작업을 진행할 수 있다. 위와 같이 작성하면, "Please wait a minutePlease"가 된다. 여기서, minute과 Please를 띄워주고 싶다면 아래와 같이 작성하면 된다.

var text = "Please wait a minute";
var text2 = "Please";

var text3 = text.concat(" ", text2);

concat 함수의 첫 번째 인자에 공백을 넣으면, 병합하고자 하는 문자열 앞에 공백이 삽입된다.

2. 배열 내장함수

배열은 지난 포스팅에서 소개한적이 있듯이, 다양한 타입의 변수들이 한데 모여있는 자료형이라고 했다. 이 배열에도 상당히 많은 내장함수들이 있는데, 이 중 일부를 소개하고자 한다.

2-1. .sort( )

sort 함수는 배열의 원소를 오름차순 및 내림차순으로 정렬해준다. 이 때 배열의 원소를 모두 문자열 취급하여 정렬하게 되는데, 아래의 코드를 보자.

var newArray = ["Park-Ji-Yoon", "Um-Jung-Hwa", "Seo-Tae-ji", "Kim-Jong-Min"];
console.log(newArray.sort());

영어로 되어있는 문자열의 경우, A-Z 순으로 정렬이 이루어진다. 이를 콘솔창에서 확인하면 아래와 같다.

실제 원소들의 앞 글자가 A-Z 순으로 정렬되어짐을 알 수 있다. 하지만 sort() 함수는 위에서 설명했듯이, 배열의 원소를 모두 문자열로 취급하기 때문에 정수로 이루어진 배열에서는 sort() 함수만 사용할 경우 예상과는 다른 결과를 얻게 된다. 아래 코드와 결과를 보자.

var newArray2 = [1, 30, 6, 932, 260, 1000];
console.log(newArray2.sort());

정렬이 제대로 되지 않았다. 위와 같은 결과가 나온 이유는, sort()함수를 사용하면 배열의 원소가 모두 문자열로 취급된다고 했었는데, 위 코드의 경우 1, 6, 30, 260, 932, 1000이 모두 문자열로 바뀌고 sort() 함수로 정렬되는 과정에서 각 문자의 유니코드 코드 포인트 값에 따라 정렬되기 때문에 실제 사용자가 기대하는 값과는 다르게 정렬된다. 위와 같은 문제를 해결하기 위해 아래와 같은 코드를 작성하면 해결할 수 있다.

var newArray2 = [1, 30, 6, 932, 260, 1000];
console.log(newArray2.sort(function(a, b) {
    if (a > b) {
        return 1;
    }else if (a < b) {
    	return -1;
    }else {
    	return 0
    }
});

얼핏 보기엔 이게 뭔가 싶다. sort( )함수 안에 들어가는 함수를 콜백 함수(Callback function)이라고 하는데, 콜백 함수는 파라미터로 함수를 전달하는 함수를 의미한다. 다음에 자바스크립트에 대해 조금 더 깊숙히 배우게 되었을 때 콜백 함수에 대한 부분을 따로 포스팅하도록 하겠다.

위처럼 a, b 두 개의 인자를 받는 함수를 선언하는데, 이는 newArray2라는 배열을 돌면서 현재 원소값과 다음 원소값의 대소관계를 비교하기 위함이다. 위 함수는 보다시피 두 개의 원소를 파라미터로 받는데, 함수의 리턴값에 따라 a와 b의 정렬이 다르게 진행된다.

1. 리턴값이 0보다 작을 경우, a가 b보다 앞에 온다.

2. 리턴값이 0보다 클 경우, b가 a보다 앞에 온다.

3. 리턴값이 0일 경우, a와 b의 순서를 바꾸지 않는다.

위 세 개의 규칙을 이용하여 return 값을 조정하면 sort( )함수로 정수로 이루어진 배열을 오름차순, 내림차순 정렬할 수 있다. 하지만 위보다 훨씬 더 간단한 구성으로 sort() 함수를 활용할 수 있다.

var newArray2 = [1, 30, 6, 932, 260, 1000];
console.log(newArray2.sort(function(a, b) {
    return a-b;
});

return 값에 따라 a와 b의 정렬이 달라진다면 굳이 if를 사용하지 않더라도 두 개의 원소의 차이를 이용하여 a와 b를 정렬해도 된다. 위와 같이 구성하면 오름차순으로 정렬할 수 있다. 내림차순으로 하고 싶다면, b-a로 설정하면 된다.

객체로 이루어진 배열에서도 sort( )를 사용할 수 있다. 다만 정렬을 진행할 원소의 key값에 접근해야 한다. 이를 제외하면 여태껏 설명한 것과 동일하다. 아래 예시를 보자.

var newArray3 = [
    {name: "박지윤", age: 20},
    {name: "서태지", age: 25},
    {name: "엄정화", age: 26},
    {name: "이재은", age: 20}
];

newArray3.sort(function(a,b) {
	return a.age - b.age;
});

console.log(newArray3);

객체의 나이를 기준으로 오름차순으로 정렬하는 코드이다. 위와 같이 작성하면 콘솔창에는 아래와 같이 출력된다.

나이 순으로 배열 안 객체들이 다시 정렬되었다. 객체가 모인 배열들도 위와 같은 형태로 접근할 수 있음을 알 수 있다. 참고로 sort( )함수는 복사본을 리턴하지 않고, 기존 객체를 그대로 바꾼다. 따라서 별도의 변수에 선언하지 않아도 된다.

2-2. .filter( )

filter 함수를 사용하면 배열 내 원소들을 특정 조건에 따라 남길 수 있다. sort( ) 함수와 마찬가지로 인자로써 콜백 함수를 작성할 수 있다. 아래 코드를 보자.

var intArray = [1,5,4,10,15,29,0];

var newArray = intArray.filter(function(atom) {
    return atom > 10;
})

console.log(newArray);

랜덤한 정수로 이루어진 intArray에서 10 이상인 원소들만 골라 newArray라는 새로운 배열로 만드는 코드이다. 위 코드를 실행하면 newArray의 원소는 15,29가 된다.

filter 함수는 객체 배열에서 사용할 때 더욱 효율적이다. 아래 코드를 보자.

var celebList = [
	{name: "박지윤", locate: '서울', age: 20},
	{name: "엄정화", locate: '부산', age: 25},
	{name: "이재은", locate: '부산', age: 22},
	{name: "서태지", locate: '부산', age: 27},
	{name: "이정현", locate: '대구', age: 23}
];

var newList = celebList.filter(function(celeb) {
	return celeb.locate == '부산' && celeb.age >= 25;
});

console.log(newList);

newList는 locate가 부산이면서 age가 25 이상인 celeb 객체만을 담는다. 결과는 아래와 같다.

참고로 age랑 locate는 임의로 설정한 것이다. 오해 없길..

위 코드에서 본 것처럼 return에 논리연산자를 활용하여 여러 조건을 추가할 수 있다.

2-3. .reduce( )

reduce( ) 함수는 배열에 있는 원소들을 누적하여 덧셈하여 결과물로써 단일값을 출력한다. for문을 활용하지 않고 배열 내 원소값을 모두 한꺼번에 더할수 있는 것이다. 아래 코드를 보자.

var intArray = [1,5,8,2,10,13];

var sum = intArray.reduce(function(a, c) {
	return a + c;
});

console.log(sum);

결과값(sum)은 39가 나온다. reduce 함수에 파라미터로 들어간 콜백함수를 자세히 보자. 여태까지 소개했던 내장 함수의 콜백함수에 들어갔던 인자는 모두 a,b였는데, 여기서는 a,c로 설정했다. 왜그럴까? 이는, reduce 함수에서 사용할 수 있는 네 가지의 변수중 앞글자를 딴 것이기 때문이다.

1. accumulate -> 누산기(변수 c에 합할 값)

2. currentValue -> 현재값(배열을 돌았을 때마다 설정되는 현재 원소값)

3. index -> 현재 배열의 인덱스

4. array -> 전체 배열

실제 위 코드는 accumulate와 currentValue 앞글자를 딴 a와 c만 넣었으나, index와 array도 추가적으로 넣을 수 있다. reduce 함수는 여태껏 소개한 함수와 마찬가지로 객체 배열에도 사용할 수 있지만, 일반 배열과는 조금 다른 점이 있다.

var Persons = [
    {lastName: 'Ji-Yoon', firstName: 'Park', Age: 20, Position: 'Idol'},  
    {lastName: 'Jeong-Hwa', firstName: 'Um', Age: 22, Position: 'Idol'},  
    {lastName: 'Hyun-Jeong', firstName: 'Kim', Age: 22, Position: 'singer'},  
    {lastName: 'Tae-Ji', firstName: 'Seo', Age: 25, Position: 'Idol'},  
    {lastName: 'Dong-Geun', firstName: 'Yang', Age: 20, Position: 'actor'},  
];

var init = 0;
var sumAge = Persons.reduce(function(a, c){
    return a + c.Age;
}, init);

console.log(sumAge);

위 배열은 배열에 존재하는 각 객체들의 Age들을 reduce 함수를 통해 모두 합하는 코드이다. 객체 배열에서 reduce( )함수를 사용할 때 조심해야 할 점은, currentValue가 되는 변수 c의 key에 접근해야한다는 점과, 객체의 key값이 올바르게 콜백함수에 적용될 수 있도록 반드시 초기값이 있는 변수를 설정해야 한다는 점이다. 위 코드에서는 0으로 초기화된 init과, reduce 함수의 두 번째 인자에 적어준 init이다.

결과는 109로, 객체의 Age들을 모두 더한 109이다.

2-4. .map( )

map 함수는 기존 배열의 원소를 받아 특정한 처리를 해주어 새로운 배열을 만들어준다. 객체 배열을 예시로 들어 map 함수를 사용해보자. 아래 코드를 보자.

var Persons = [
    {lastName: 'Ji-Yoon', firstName: 'Park', Age: 20, Position: 'Idol'},  
    {lastName: 'Jeong-Hwa', firstName: 'Um', Age: 22, Position: 'Idol'},  
    {lastName: 'Hyun-Jeong', firstName: 'Kim', Age: 22, Position: 'singer'},  
    {lastName: 'Tae-Ji', firstName: 'Seo', Age: 25, Position: 'Idol'},  
    {lastName: 'Dong-Geun', firstName: 'Yang', Age: 20, Position: 'actor'},  
];

var NewSet = Persons.map(function(person) {
    return {Name:person.firstName.concat(person.lastName) , Age:person.Age , Position:person.Position, email:person.firstName.concat(person.lastName) + "@gmail.com"};
});

console.log(NewSet);

map 함수를 활용하여 기존 객체 배열에 접근한 뒤, 기존 배열의 객체 key들을 조합하여 새로운 객체 배열 NewSet을 생성한다. Persons 배열에 있는 각 객체들의 lastName과 firstName key를 조합하여 풀네임을 나타내는 name key를 새로 만들고, 풀네임을 활용하여 새로운 이메일을 저장하는 키를 만든다. 위 코드의 결과는 아래와 같다.

map 함수를 활용하여 새로운 객체 배열을 생성했다.

오늘은 자바스크립트에서 사용할 수 있는 주요 내장 함수들에 대해 알아보았다. 조금 포스팅이 길어졌지만 그래도 충분히 공부가 되었다. 다음에도 재미있는 공부거리를 들고 오겠다.

P. S 조잡한 글 읽어주셔서 감사합니다! 혹시나 틀린 정보가 있다면 과감한 지적(하지만 욕은 삼가해주시면 감사하겠습니다 ㅎㅎ) 부탁드립니다.

저작자표시 비영리 변경금지 (새창열림)