[인프런] Javascript입문 - 배열과 문자열 2 - .concat(), .join(), .split(), .indexOf(), .lastIndexOf(), .slice(), .splice()

* 이 글은 인프런에서 제공하는 호눅스님의 유료 강의 '쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1'를 듣고 공부하며 정리한 글입니다. 강의 내용에 더해, 제가 필기하고 구글링한 내용이 정리되어 있습니다. 초보인 제가 이해한 대로 정리했기 때문에, 부정확한 내용이 있을 수 있음을 감안해 주시길 바랍니다. 강의를 듣고 내용을 정리한 글이기 때문에 문제가 되지 않는다는 인프런 측 답변을 받은 적이 있으나(https://bibi6666667.tistory.com/37), 저작권상 문제가 된다면 보호 모드(비공개)로 전환하겠습니다.

 

배열과 문자열의 메소드 살펴보기

복습

• Array (배열, 어레이) - 여러 데이터를 담을 수 있는 자료구조입니다. []
• 자바스크립트에서 배열은 객체이므로 속성과 메소드를 가집니다.
• 배열과 문자열은 유사합니다.
• 차이점) 배열은 mutable(변하기 쉬운), 문자열은 immutable(불변의) 특징이 있습니다.
• 속성: length(배열의 길이)
• 메소드: push()맨 뒤에 넣기, pop()맨 뒤에서 빼기, unshift()맨 앞에 넣기, shift()맨 앞에서 뺴기

 

 

배열의 메소드 더 살펴보기

 

.concat() 컨캣

.concat();
배열이름.concat(합칠 배열 이름); 

배열 합치기. (숫자, 문자열끼리도 가능)
concatenate(사슬같이 잇다) 의 약자이다.

A.concat(B) 를 통해 A와 B를 이은 새 배열을 만들어 준다.
소괄호 안에는 숫자/문자열/배열이 들어갈 수 있다.
(기존 배열의 내용은 변하지 않으므로, 새로운 변수에 담아서 써야 한다)

var a = [1, 2, 3, 4, 5];
a.concat(6); // [1, 2, 3, 4, 5, 6]
a; // [1, 2, 3, 4, 5] 기존 배열의 내용을 바꾸는 것이 아님.

var a2 = a.concat(6);
a2; // [1, 2, 3, 4, 5, 6] 새로운 변수를 만들어 담아 써야 한다.

var a3 = a.concat([6, 7, 8]);
a3; // [1, 2, 3, 4, 5, 6, 7, 8] 괄호 안에 숫자/문자열 뿐 아닌 배열도 넣어 이어붙일 수 있다.

var s = "hello";
var s2 = s.concat(" world");
s; // "hello"
s2; // "hello world"

s2 = s + " world"; //와 같은 결과이다. ("문자열"의 경우에는 더하기로 이어붙인 것과 결과가 같다.)

 

❗ "원본을 바꾸지 않는 메소드"들은 배열과 문자열에 모두 적용 가능하다.
(문자열의 immutable속성 때문)

 

---

 

.join()

.join();
배열이름.join();

()기준, 배열을 문자열로 변환.
배열의 원소들을 문자열로 변환해 준다.
배열을 문자열로 바꿀 때 사용합니다.

-소괄호 내에 파라미터(매개변수)가 없을 때는 쉼표(,) 를 구분자로 해 배열의 형태 그대로 문자열로 만들어 준다.
-소괄호 내에 파라미터(매개변수)가 있을 때는 매개변수를 구분자로 해 문자열을 만들어 준다.

가장 많이 사용되는 형태는 .join(); 과 .join("");이다.

///////////파라미터 없이 사용하는 경우///////////
var a = [1, 2, 3, 4, 5];
a.join(); // "1, 2, 3, 4, 5" 배열을 문자열로 변환해 준다.
// 가장 많이 사용되는 형태(1)
a; // [1, 2, 3, 4, 5] 기존 배열을 변화시키진 않는다.

var a3 = a.join();
a3; // "1, 2, 3, 4, 5" 변환된 문자열은 새로운 변수에 담아서 써야 한다.
typeof a3; // "string". "1, 2, 3, 4, 5"가 통째로 문자열이다.

///////////파라미터를 구분자로 사용하는 경우///////////
a.join(""); // "12345" 구분자로 공백을 사용해, 배열의 모든 원소가 붙어져 문자열로 변환된다.
// 가장 많이 사용되는 형태(2)

a.join("--"); // "1--2--3--4--5"  --를 구분자로 한 문자열로 변환된다.


var s3 = ["h", "e", "l", "l", "o"];
s3.join(""); // "hello"
s3.join("a"); // "haealalao" 이런 장난도 칠 수 있다.

 

 

.split() 스플릿

.split()
문자열.split();

()기준, 문자열을 배열로 변환.
소괄호()를 기준으로 문자열을 나누어 배열로 변환하는 메소드.
문자열을 배열로 바꿀 때 사용합니다.

-소괄호 내에 파라미터(매개변수)가 없을 때는 문자열을 통째로 배열로 만든다(길이1인 배열).
-소괄호 내에 파라미터(매개변수)가 있을 때는 파라미터를 기준으로 해 배열의 원소로 나누어 배열로 변환한다.

var s = "hello";
s.split(); // ["hello"]
// 파라미터 없이 사용할 때는 문자열을 통째로 배열의 한 원소로 만든다.

s.split(""); // ["h", "e", "l", "l", "o"]
// 파라미터가 있을 때는 파라미터를 기준으로 원소로 나누어서 배열로 변환한다.

var s4 = s.split("");
s4; // ["h", "e", "l", "l", "o"]
// 역시 원본은 변화시키지 않기 때문에 새로운 변수에 담아서 사용해야 한다.

 

❗ .join()과 .split(), .join("")과 .split("")은 서로 반대 관계로, 함께 많이 사용한다.

var a3 = "hello"
a3.split(); // ["hello"]
a3.split(""); // ["h", "e", "l", "l", "o"]

var s3 = ["h", "e", "l", "l", "o"];
s3.join(); // "h,e,l,l,o"
s3.join("") // "hello"

즉 
.join() <-> .split()
.join("") <-> .split("")
의 관계에 있다.

 

※ 문자열의 .split()

문자열.split();

문자열을 쪼개어 문자 배열로 만드는 메소드.
소괄호()내의 파라미터(매개변수)를 기준으로 쪼개 준다.
(매개변수는 한 자리 문자가 아니어도 된다 - s6 참고)

❗ 매개변수 (소괄호 내 문자) 로 사용된 문자는 배열로 전환될 때 사라진다!

var s = "hello, world, a-b-c"; 

var s1 = s.split(); // 아무 값 없이 스플릿.
s1; // ["hello, world, a-b-c"] 

var s2 = s.split(""); // 비어 있는 문자 = null문자로 스플릿.
s2; // ["h", "e", "l", "l", "o", ",", " ", "w", "o", "r", "l", "d", ",", " ", "a", "-", "b", "-", "c"]
// 글자, 기호, 공백 각각 하나하나가 배열의 원소가 된다.
s2.length; // 19

var s3 = s.split(","); // 콤마를 기준으로 스플릿.
s3; // ["hello", " world", " a-b-c"]

var s4 = s.split(" "); // 공백문자를 기준으로 스플릿.
s4; //  ["hello,", "world,", "a-b-c"]
// 위와 달리 공백 기준 스플릿이므로, 콤마를 포함하여 배열의 원소가 된다.

var s5 = s.split("-");
s5; //["hello, world, a", "b", "c"]

var s6 = s.split("ll");
s6; // ["he", "o, world, a-b-c"]

 

---

 

.indexOf(), .lastIndexOf()

.indexOf()
배열이름.indexOf()
(O는 대문자!)

소괄호()안에 배열/문자열 안의 원소를 넣으면, 그 원소의 위치 = 인덱스를 찾아 준다.
(0 = 1번째. 1 = 2번째 .. 컴퓨터는 언제나 0부터 센다)

특히 .indexOf()가 많이 사용됨.

var a = [1, 2, 3, 4, 5];

a.indexOf(3); // 2
// 세 번째 원소의 인덱스는 2.
a[2]; // 3

a.indexOf(1); // 0
// 첫 번째 원소의 인덱스는 0.
a[0]; // 1

///// ??배열 내에 같은 이름의 원소가 여러 개 존재할 때는??
var a2 = [1, 2, 3, 4, 5, 2, 3];
a2.indexOf(2); // 1 
// 배열의 두 번째 원소인 2만 찾아진다.
// 왜? .indexOf는 맨 앞의 결과 하나만 먼저 알려주기 때문.

// 반대로 맨 뒤의 결과 하나를 먼저 알려주는 .lastIndexOf()도 있다.
a2.lastIndexOf(2); // 5
// 배열의 여섯 번째 원소인 2를 찾아준다.
a2.lastIndexOf(3); // 6
// 배열의 일곱 번째 원소인 3을 찾아준다.

 

❗ 만약 .indexOf로 배열 내에 존재하지 않는 원소를 찾으라고 하면? Null? undefined?
배열 내에 그 원소가 없다면 -1 이 출력된다. + 활용 코드.

var a = [1, 2, 3, 4, 5];
a.indexOf(100); // -1

// 이러한 결과값이 아래와 같이 응용된다.
if (a.indexOf(100) === -1) { // 배열 a 내에 100이라는 원소가 없다면.
	console.log("배열 a 안에는 100이 없다")
}

 

---

 

.slice() 슬라이스

.slice()
배열이름.slice(startIndex, endInedx);

- 기존 배열을 잘라서, 새로운 배열을 만듭니다.
- 기존 배열은 변하지 않습니다. (문자열에도 사용 가능함)
- startIndex 위치부터 endIndex 직전의 위치까지 자릅니다. endIndex의 원소는 포함되지 않습니다.

a = [1, 2, 3, 4, 5, 2, 3]; 
a.slice(0, 3); // [1, 2, 3]
// 배열 a의 0번째부터 3번째직전 = 2번째까지 잘라내어 새로운 배열로 만든다.

a; // [1, 2, 3, 4, 5, 2, 3];
// .slice() 역시 원본을 바꾸지 않는 메서드이다. 따라서 string에도 적용 가능하다.

// 3, 4, 5만 잘라내어 새 배열로 만들고 싶다면
var a2 = a.slice(2,5);
a2; // [3, 4, 5]
a; // [1, 2, 3, 4, 5, 2, 3];

-문자열에 .slice를 사용한 경우 잘라낸 부분을 새로운 문자열로 만듦.
마찬가지로 기존 문자열은 변하지 않음.

// 문자열에 .slice 사용하기
var s = "hello"
var s2 = s.slice(2, 4);
s2; // "ll"
s; // "hello" 

 

 

 

.splice() 스플라이스

.splice()
배열이름.splice(startIndex, numElement);

• 배열을 startIndex부터, numElement 개수만큼 잘라냅니다.
• ❗ 기존 배열을 변화시킴. 잘라낸 원소들은 원본 배열에서 사라집니다. (.slice와의 차이점)
  따라서 반드시 새로운 변수를 활용해 잘라내는 것이 좋다.
• 기존 배열을 변화시키므로 문자열string에는 .splice()를 사용할 수 없다.
• slice()와 splice()는 둘 다 유용하므로 각각의 사용법을 잘 기억해 놓는 게 좋습니다.