자바스크립트 중급 강좌 ②

문자열 String

---

벡틱의 유용한 점 

여러줄 쓸 때 유용하다.

let desc = `오늘은 맑고 화창한

날씨가 계속 되겠습니다.

내일은 비소식이 있습니다.`;

let desc = '오늘은 맑고 화창한 \n 날씨가 계속 되겠습니다. '; // 한줄로 써야한다 . 줄바꿈하면 에러난다. 

---

length : 문자열 길이

가입할 때 아이디나, 비밀번호를 몇자 이상 이하로 제한할때 체크하곤 한다.

let desc = '안녕하세요.' ;

desc.length // 6

---

배열과 동일하게 [ ] 대괄호를 이용하여 특정문자에 접근할 수 있다.

let desc = '안녕하세요.' ;

desc[2] // '하' , 문자열도 배열과 동일하게 index 0 부터 시작한다.

한글자만 바꾸는건 아무 변화가 일어나지 않는다.

desc[4] = '용' ;

console.log(desc); // "안녕하세요."

---

toUpperCase() / toLowerCase()

let desc = "Hi guys. Nice to meet you. " ;

desc.toUpperCase();

"HI GUYS. NICE TO MEET YOU." // 모든 영문을 대문자로 바꿔준다.

desc.toLowerCase();

"hi guys. nice to meet you." // 모든 영문을 소문자로 바꿔준다.

---

str.indexOf(text)

문자를 인수로 받아 몇번째 위치하는 지 알려준다.

let desc = "Hi guys. Nice to meet you. ";

desc.indexOf('to'); //14, index 0부터 14번째에 to가 위치한다.

desc.indexOf('man'); // -1 , 찾는 문자가 없으면 -1을 반환한다.

if(desc.indexOf('Hi')){ // 0이 출력되므로, if에서 0은 false이고 console은 찍히지 않는다.

console.log('Hi가 포함된 문장입니다.');

}

if(desc.indexOf('Hi')>-1){ // 그래서 항상 -1 보다 큰가로 비교하면 된다. 

console.log('Hi가 포함된 문장입니다.');

}

---

str.slice(n, m)

특정 범위의 문자열만 뽑는다.

n부터 m까지의 문자열을 반환한다.

n은 시작점, m 은 없으면 문자열 끝까지, 양수면 그 숫자까지(포함하지 않음), 음수면 끝에서부터 센다.

let desc = "abcdefg";

desc.slice(2) // "cdefg"

desc.slice(0, 5) // "abcde"

desc.slice(2, -2) // " cde"

---

str.substring(n,m)

n과 m사이(m포함하지 않음)의 문자열을 반환한다.

n과 m을 바꿔도 동작한다. 음수는 0으로 인식한다.

let desc = "abcdefg";

desc.substring(2, 5); // "cde"

desc.substring(5, 2); // "cde"

---

str.substr(n, m)

n부터 시작해서 m개를 가져온다.

let desc = "abcdefg" ;

desc.substr(2,4); // "cdef"

desc.substr(-4,2); // "de"

---

str.trim()

앞 뒤 공백 제거

사용자로 부터 뭔가를 입력받을 때 사용한다.

let desc = " coding             ";

desc.trim(); // "coding"

 

---

str.repeat(n) 

문자열을 n번 반복한다.

let hello = "hello!";

hello.repeat(3); // "hello! hello! hello! "

---

문자열 비교

1 < 3 // true

"a" < "c" // true

"a".codePointAt(0); // 97, 숫자코드를 얻으려면 codePointAt(0)을 사용한다.

String.fromCodePoint(97); // "a" , 숫자코드를 알고있으면 문자코드를 알수있다.

알파벳은 숫자가 a보다 z가 크다. 대문자보다 소문자가 숫자가 크다.

---

실습>

let list = [

"01. 들어가며",

"02. JS의 역사",

"03. 자료형",

"04. 함수",

"05. 배열",

];

let newList = [];

for (let i = 0; i <list.length; i++) {

newList.push(list[i].slice(4));

}

console.log(newList); // ["들어가며", "JS의 역사", "자료형", "함수", "배열"] 출력

---

// 금칙어 : 콜라

function hasCola(str){

if(str.indexOf('콜라')){

console.log('금칙어가 있습니다.');

}else {

console.log('통과')

}

}

hasCola("와 사이다가 짱이야!"); // 금칙어가 있습니다. -1이 나오므로 if(-1)은 true이다. 

hasCola("무슨소리, 콜라가 최고"); // 금칙어가 있습니다.

hasCola("콜라"); // 통과, 0이 나오므로 if(0)은 false이다.

---

function hasCola(str){

if(str.indexOf('콜라')>-1){

console.log('금칙어가 있습니다.');

}else {

console.log('통과')

}

}

hasCola("와 사이다가 짱이야!"); // 통과 -1이 나오므로 if(-1)은 true이다. 

hasCola("무슨소리, 콜라가 최고"); // 금칙어가 있습니다.

hasCola("콜라"); // 금칙어가 있습니다. 0이 나오므로 if(0)은 false이다.

 

---

str.includes(text)

문자가 있으면 true 없으면 false를 반환한다.

function hasCola(str){

if(str.includes('콜라'){

console.log('금칙어가 있습니다.');

}else {

console.log('통과')

}

}

hasCola("와 사이다가 짱이야!"); // 통과

hasCola("무슨소리, 콜라가 최고"); // 금칙어가 있습니다.

hasCola("콜라"); // 금칙어가 있습니다. 

---

Array
push() : 뒤에 삽입

pop(): 뒤에 삭제

unshift() : 앞에 삽입

shift() : 앞에 삭제

---

arr.splice(n,m)

배열의 n번째 부터 m 개 특정요소를 지운다.

let arr = [1, 2, 3, 4, 5];

arr.splice(1,2);

console.log(arr); // [1,4,5]

---

arr.splice(n,m,x)

 
배열의 n번째부터 m개 지우고 x요소를 추가한다.

let arr = [1, 2, 3, 4, 5];

arr.splice(1,3, 100, 200);

console.log(arr); // [ 1, 100, 200, 5]

let arr = ["나는", "철수", "입니다"];

arr.splice(1,0, "대한민국", "소방관"); // ["나는", "대한민국", "소방관", "철수", "입니다" ]

// 0개를 지우면, 아무것도 지우지 않고 그 앞자리에 들어간다.

arr.splice() 는 삭제된 요소를 반환한다.

let arr = [1,2,3,4,5] ;

let result = arr.splice(1,2);

console.log(arr); // [1,4,5]

console.log(result); // [2, 3]

---

arr.slice(n,m)

n부터 m까지 반환한다. 문자열의 slice()와 같다.

let arr = [1,2,3,4,5];

arr.slice(1,4); // [2,3,4]

괄호안에 아무것도 안넣으면 배열이 복사된다.

let arr2 = arr.slice();

console.log(arr2); // [1,2,3,4,5]

---

arr.concat(arr2, arr3..)

인자로 주어진 배열이나 값들을 기존의 배열에 합쳐서 새 배열을 반환한다.

let arr = [1, 2];

arr.concat([3,4]); // [1,2,3,4]

arr.concat([3,4],[5,6]); // [1,2,3,4,5,6]

arr.concat([3,4],5,6); // [1,2,3,4,5,6]

---

지금까지 배열의 반복은 

for문이나 for..of문을 사용하였다.

forEach를 사용할수도 있다.

arr.forEach(fn) 

배열을 반복하고 함수를 인수로 받는다.

그 함수는 세개의 매개변수가 있는데, 첫번재는 해당요소이고, 두번째는 index, 세번째는 해당배열자체를 의미한다.

보통 첫번째, 두번째만 사용한다.

let users = ['Mike', 'Tom', 'Jane'];

users.forEach((item, index, arr) => {

//..

});

실습>

//forEach

let arr = ["Mike", "Tom", "Jane"];

arr.forEach((name, index) => {

console.log(`${index + 1}. ${name}`); // 1. Mike 2. Tom 3. Jane 출력된다.

}); 

---

arr.indexOf()/ arr.lastIndexOf()

문자열의 indexOf과 사용법이 같다.

발견하면 해당요소의 index를 반환하고 없으면 -1을 반환한다.

let arr = [1,2,3,4,5,1,2,3];

arr.indexOf(3) ; // 2

인수가 두개인경우, 두번째 인수는 시작위치를 의미한다.

arr.indexOf(3,3) // 7

끝에서부터 탐색하고 싶으면 

arr.lastIndexOf(3); // 7 

---

arr.includes()

index 확인할필요 없고 포함하고 있는지 확인할 때 사용한다.

let arr = [1,2,3];

arr.includes(2); //true

arr.includes(8); //false

---

arr.find(fn) / arr.findIndex(fn)

indexof 처럼 찾는다는 의미는 동일하지만 보다 복잡한 연산이 가능하도록 함수를 전달할 수 있다.

함수가 true인 첫번째 값을 반환한다.

짝수를 찾는다는지, 성인을 찾는다는지

첫번째 true 값만 반환하고 끝, 만약 없으면 undefined를 반환한다.

findexIndex는 해당 index를 반환한다. 없으면 -1을 반환한다.

---

//find / findIndex

let arr = [1,2,3,4,5];

const result = arr.find((item) => {

return item % 2 === 0; // 2로 나눴을때 나머지가 0인 요소를 찾는다.

});

console.log(result); // 2가 출력된다.

//미성년자를 찾는다.

let userList = [

{ name: "Mike", age : 30},

{ name: "Jane", age : 27},

{ name: "Tom", age : 10},

];

// 객체가 들어있는 배열 경우, indexOf로 찾기 힘들다. 이럴때 find(fn) 사용한다.

const result = userList.find((user)=>{ // user는 배열의 각 객체이다.

if(user.age <19){

return true;

}

return false;

});

console.log(result); // { name: "Tom", age:10 } 이 출력된다.

const result = userList.findIndex((user)=>{ // user는 배열의 각 객체이다.

if(user.age <19){

return true;

}

return false;

});

console.log(result); // 2가 출력된다.

find는 딱 하나를 찾았다. 

---

arr.filter(fn) 

배열 각 요소에 대하여 주어진 함수의 결괏값이 true 인 요소를 모아 새로운 배열을 반환하는 메소드

let arr = [1,2,3,4,5,6];

const result = arr.filter((item) => {

return item % 2 === 0; // 2로 나눴을때 나머지가 0인 요소를 찾는다.

});

console.log(result); // [2, 4, 6] , 모든 요소가 배열로 출력된다.

---

arr.reverse()

배열을 역순으로 재정렬해준다.

최근 가입된 유저부터 보여주거나, 게시판에서 가장 최신글부터 정렬할때 자주 사용된다.

let arr = [1,2,3,4,5];

arr.reverse(); // [5,4,3,2,1]

---

arr.map(fn)

배열 각 요소에 대하여 주어진 함수를 수행한 결과를 모아 새로운 배열을 반환하는 메서드

//arr.map() , 매번 나이를 추가하기 귀찮아서 isAdult가 추가된 새로운 배열을 만들어보자.

let userList = [

{ name: "Mike", age:30},

{name: "Jane", age:27},

{name:"Tom", age:10},

];

let newUserList = userList.map((user, index) =>{

return Object.assign({ } , userList, {isAdult:user.age>19,

});

});

console.log(newUserList); // [ { name: "Mike", age:30, isAdult:true} , {name: "Jane", age:27, isAdult:true}, {name:"Tom", age:10, isAdult:false} ] 

console.log(UserList); // [ { name: "Mike", age:30} , {name: "Jane", age:27}, {name:"Tom", age:10} ]  기존 userList는 바뀐게 없다.

---

arr.join(구분자)

배열을 합쳐서 문자열을 만드려면 join을 사용하면된다.

let arr = ["안녕", "나는", "철수야"];

let result = arr.join("-");

console.log(result); // // 안녕-나는-철수야

---

split(구분자)

구분자 기준으로 문자열을 나눠서 배열로 반환한다.

const users = "Mike, Jane, Tom, Tony";

const result = users.split(",");

console.log(result); //["Mike", "Jane", "Tom", "Tony"]

let str = "Hello, My name is Mike.";
const result = str.split("");

console.log(result); // ["H", "e", "l" ...... ] // 빈문자열기준으로 잘라준다.

---

Array.isArray()

배열인지 아닌지 구분할때 사용한다.

let user = {

name: "Mike",

age:30,

};

let userList=["Mike", "Tom", "Jane"];

console.log(typeof user); //object 출력

console.log(typeof userList); //object 출력

console.log(Array.isArray(user)); // false 출력

console.log(Array.isArray(userList)); //true 출력

---

arr.sort() 

배열을 재정렬 해준다. 배열 자체가 변경되니 주의해라.

 

let arr = [1,5,4,2,3];

arr.sort();

console.log(arr); // [1,2,3,4,5] 출력

---

let arr = ["a", "c", "d", "e", "b"];

arr.sort();

console.log(arr); // ["a", "b", "c", "d", "e"] 출력

---

let arr = [27,8,5,13];

arr.sort();

console.log(arr); // [13,27,5,8] 출력, 정렬할때 요소를 문자열로 취급하기 때문이다. 1과 2로 시작하는 13과 27이 제일 앞에 왔다.

제대로 된 정렬을 하려면 값을 비교해줄수 있는 함수를 전달해야한다.

sort는 함수를 인수로 받는다.

let arr =[27,8,5,13];

arr.sort((a,b) => {

return a - b; // 작은걸 앞으로 보낸다.

});

console.log(arr); // [5, 8, 13, 27] 

---

sort (함수) 어렵다. 보통 저런 함수를 만들어서 사용하기 보다

Lodash 라는 라이브러리를 사용한다. 

Lodash를 사용하면 _.sortBy(arr); 로 가능하다.

숫자든, 문자든, 객체든 원하는 기준으로 정렬해준다.

실무에서 Lodash는 많이 사용된다. 공식사이트에서 학습해라

---

//배열의 모든 수 합치기

let arr = [1,2,3,4,5];

// for, for of, for Each

let result = 0;  // 초기값 0을 준다.

arr.forEach((num) => {

result += num;

});

console.log(result); // 15 출력된다. 위의 코드작업을 한번에 처리해줄수 있는게 reduce이다.

---

arr.reduce(fn)

인수로 함수를 받음.

배열 각 요소에 대하여 함수를 실행하고, map과 filter와 달리 배열이 아닌 하나의 결괏값을 반환한다는 차이점이 있다.

(누적 계산값, 현재값) => { return 계산값 };

 

//배열의 모든 수 합치기

let arr = [1,2,3,4,5];

// for, for of, for Each

const result = arr.reduce((prev, cur)=>{ //prev 는 누적된 계산값, cur은 현재값

return prev + cur;

}, 0 ) // 초기값 0

console.log(result); // 15 출력된다. 위의 코드작업을 한번에 처리해줄수 있는게 reduce이다.

---

map이나 filter 대신에 reduce를 통해 배열을 반환해보자

성인만 뽑아서 배열을 만들어보자.

let userList = [

{ name: "Mike", age:30},

{name: "Tom", age:10},

{name:"Jane", age:27}.

{name:"Sue", age:26},

{name:"Harry", age:42},

{name:"Steve", age: 60},

];

let result = userList.reduce((prev,cur)=>{

if(cur.age>19){

prev.push(cur.name);

}

return prev;

},[]);

console.log(result); // ["Mike", "Jane", "Sue", "Harry", "Steve"] 

나이 합을 구하려면??

let result = userList.reduce((prev,cur) =>{

return (prev += cur.age);

}, 0);

console.log(result); //196이 출력된다.

이름이 3자인 사람을 찾으려면?

let result = userList.reduce((prev, cur) => {

if(cur.name.length ===3){

prev.push(cur.name);

}

return prev;

}, []);

console.log(result); //["Tom", "Sue"] 출력된다.

filter, map , foreach , reduce 등 상황에 맞게 써야 한다.

//arr.reduceRight(); 우측부터 연산하는 차이만 있다.

---