[JS] Method

문자열 함수 Array 객체 함수

str.indexOf(searchValue)

     method  arguments

 

 

 

문자열 함수,  immutable

---

1. string ( )

전달된 인자를 모두 문자열로 변환

 

String(1) // '1'

String(true) // 'true'

String([1,2,3,4]) // '1,2,3,4'


반환된 값도 변경이 가능

let And = true && true

String(And) // 'true'


let fn = function(){ return 1 }

String(fn) // '1'

 

 

2. length ( )

문자열의 길이 즉, 문자 갯수를 반환

 

`모두들 힘내세요`.length // 8

`Code States 최고`.length // 14

 

 

3. indexOf ( )

인자로 전달된 문자열을 대상으로 한 문자열에서 검색하여 처음 발견된 곳의 index를 반환

 

let str = `다들 힘내서 공부합시다`


str.indexOf('힘') // 3

str.indexOf('부합') // 8

str.indexOf('그냥 잠이나 잡시다') // -1 (반환하지 못했을경우)

 

 

4. replace ( )

바꾸고 싶은 문자열이 있을때 문자열을 대체시키는 메소드

 

let str = '공부 안하고 잘거야'


str.replace('안','다') // '공부 다하고 잘거야'

str.replace('고 잘거야','면 안잘거야') // '공부 안하면 안잘거야'

 

 

5. split ( )

인자로 전달된 값을 대상으로 한 문자열에서 검색해서 전달 시켜준 값을 기준으로 분리시켜 문자열로 이루어진 배열을 반환하는 메소드 (csv 형식을 처리할 때 유용함)

 

let str = '그 실력에 잠이 오십니까?'


그냥 사용하면 문자열을 배열로 반환

str.split() // ['그 실력에 잠이 오십니까?']


''는 각 문자를 분리시켜 반환

str.split('') // ['그',' ','실','력','에',' ','잠','이',' ','오','십','니','까','?',]


공백을 구분지어서 각 단어를 반환

str.split(' ') // ['그','실력에','잠이','오십니까?']

 

 

6. substring ( )

시작 인덱스와 끝 인덱스를 전달 시켜 그 사이의 문자열을 반환

 

let str = `여러분 잠은 자고 하세요!`


str.substring(0,3) // '여러분'


시작과 끝을 반대로 적으셔도 알아서 바꿔 반환

str.substring(6,4) // '잠은'


끝 인덱스를 안넣어주면 문자열 끝까지 반환

str.substring(4) // '잠은 자고 하세요!'


indexOf와 함께 사용하면 더 효율적입니다

str.substring(0, str.indexOf(' ')) // '여러분'

 

 

7. slice ( )

substring()과 큰 차이는 없지만 음수(-)를 전달받게 되면 인덱스를 거꾸로 접근

 

let str = '스트레칭 하세요 골병나요'


음수로 적용 할 경우 인덱스가 -1부터 0으로 인식

str.slice(-4) // '골병나요'


str.slice(0,3) // '스트레'


시작과 끝을 반대로 적으셔도 알아서 바꿔 반환

str.slice(6,4) // ' 하'


끝 인덱스를 안넣어주면 문자열 끝까지 반환

str.slice(4) // ' 하세요 골병나요'

 

 

8. trim ( )

문자열의 양쪽 끝 공백을 제거

 

let string = '  곧 끝나요 참아요  ' 

문자열의 양쪽 끝 공백 제거

string.trim() // '곧 끝나요 참아요' 

 

 

9. includes ( )

인자로 전달된 문자열을 대상으로 한 문자열에서 검색해서 참과 거짓을 반환

 

let str = '저 이거하고 잘겁니다'


str.includes('이거') // true

sti.includes('안잘겁니다') // false 

 

 

10. toUpperCase ( ),  toLowCase ( )

대상으로 한 문자열을 대문자, 소문자로 변환

 

let str = 'Bye bye'


str.toUpperCase() // 'BYE BYE'

str.toLowCase() // 'bye bye'

 

 

 

Array 객체 함수

---

1. concat ( )

둘 이상의 배열을 연결,  immutable

 

var nums = ["1", "2", "3"];

var chars = ["a", "b", "c", "d"];

nums.concat(chars)

// (7) ["1", "2", "3", "a", "b", "c", "d"]

 

 

2. push ( ), unshift ( )

새로운 요소 추가,  mutable

 

var nums = ["1", "2", "3"];

nums 배열 맨 끝에 "4"와 "5" 요소 추가

nums.push("4", "5")

새 요소가 추가된 후의 배열 요소의 개수가 변환됨

//5


nums

// (5) ["1", "2", "3", "4", "5"]


nums 배열 맨 앞에 "0" 요소 추가

nums.unshift("0") 

새 요소가 추가된 후의 배열 요소의 개수가 반환됨

// 6


nums

// (6) ["0","1", "2", "3", "4", "5"]

 

 

3. pop ( ), shift ( )

배열에서 요소 추출,  mutable

 

var study = ["html", "css", "javascript"] 

마지막 요소를 추출하고 반환

study.pop()

// "javascript"


study

// (2) ["html", "css"]


var js = ["es6", "node", "react", "angular", "vue"]


배열의 첫 요소를 반환

// js.shift() 

// "es6+"

 

 

4. splice ( )

원하는 위치의 요소를 삭제하거나 추가,  mutable

 

- 인수가 1개일 경우

 

var numbers = [0, 1, 2, 3, 4, 5]


인덱스 2(세번째 요소) 이후 끝까지 삭제

numbers.splice(2)  

// (4) [2, 3, 4, 5]


numbers

// (2) [0, 1]

 

- 인수가 2개일 경우 : 첫 번째 인수는 인덱스 값이고 두 번째 인수는 삭제할 개수

 

var study = ["html", "css", "web", "jquery"]


인덱스 2에서 한 개 삭제

study.splice(2,1)

// ["web"]


study

// (3) ["html", "css", "jquery"]

 

- 인수가 3개일 경우 : 세 번째 인수부터는 삭제한 위치에 새로 추가할 요소를 지정

 

study.splice(2, 1, "js")

// ["jquery]


study

삭제한 자리에 새로운 요소 추가

// (3) ["html", "css", "js"]


study.splice(2, 0, "jquery")

삭제한 요소 없기 때문에 빈 배열

// [] 


study

새로운 요소 추가

//(3) ["html", "css", "jquery", "js"] 

 

5. slice ( )

원하는 위치의 요소들을 추출,  immutable

 

- 인수가 1개일 경우

 

var colors = ["red", "green", "blue", "white", "black"]


colors.slice(2)

인덱스 2부터 끝까지 추출

// (3) ["blue", "white", "black"]  


color

// (5) ["red", "green", "blue", "white", "black"]

- 인수가 2개일 경우

 

var colors = ["red", "green", "blue", "white", "black"]

var colors2 = colors.slice(1,4) // 인덱스 1부터 인덱스 3까지


colors2

// (3) ["green", "blue", "white"]


colors

// (5) ["red", "green", "blue", "white", "black"]

 

 

6. join ( )

배열의 모든 요소를 연결해 문자열로 전환, immutable

 

let array = ['red', 'green', 'blue'];


let newArray1 = array.join(); 

newArray1

//'red,green,blue'


let newArray2 = array.join(', ');

newArray2

// 'red, green, blue'


let newArray3 = array.join(' + ');

newArray3

// 'red + green + blue'


let newArray4 = array.join('');

newArray4

// 'redgreenblue'


문자열을 배열의 형태로 전환

newArray4.split(" ").join(" ");

 

 

7. Array.isArray ( )

인자가 Array인지 판별

 

object로 타입이 확인되는 경우를 주의해야한다.

if(typeof anything === "object"){

    if(anything === null){
    
      return 'null';
      
    }
    
    else if(Array.isArray(anything)){
    
    return 'array';
    
    }
    
    else{
    
      return 'object';
      
    }
    
  }

 

 

8. sort ( )

배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환, immutable

 

문자 정렬


let traffic = ['bus', 'car', 'airplane'];


ASCII순으로 정렬

traffic.sort(); 

// (3) ["airplane", "bus", "car"]


숫자 정렬


let score = [4, 11, 2, 13, 3, 1];


score.sort();

// ASCII순으로 정렬되어 숫자의 크기대로 나오지 않음

// (6) [1, 11, 13, 2, 3, 4]  


오름차순

score.sort(function(a,b) { 

	return a-b;
    
});


//화살표 함수를 사용하여 간결하게 변환

score.sort((a,b) => a-b);


내림차순

score.sort(function(a,b) {  

	return b-a;
    
});


//화살표 함수를 사용하여 간결하게 변환

score.sort((a,b) => b-a);