JS 메소드

★함수(function)

• func.length : 함수 정의 시 작성된 매개 변수 개수를 출력 ex) function a (ex1, ex2) {} =>  a.length = 2
• args.length : 함수 호출 시 인자의 개수를 출력
• 즉시 실행 함수 : 정의와 동시에 실행되는 함수로 최초의 한번만 호출하고 다시 호출하지 않는 함수로 주로 초기화 처리 등에 사용이 가능함.
• 내부 함수 : 부모 함수는 자식 함수(내부 함수)의 변수에 접근 할 수 없지만 자식 함수는 부모 함수의 변수에 접근 가능
• 콜백 함수 : 함수를 명시적으로 호출하는 방식이 아닌 특정 이벤트 발생 시, 호출되는 함수(ex)addEventListener)로 주로 비동기식 처리 모델에 사용(호출도리 콜백 함수를 미리 매개 변수에 전달 하고 처리가 종료되면 콜백 함수를 호출함), 콜백함수는 클로저임.

 

★각종 용어

• Prototype : JS에서 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결이 되어 있다. 클래스의 상속개념과 같이 부모 객체의 프로퍼티 및 메소드를 상속 받아 사용할 수 있게 하는데 이러한 부모 객체를 프로토 타입(객체)이라 함.
• Math.abs(값) : 값의 절대값 / .round() : 반올림 / .ceil() : 올림 / floor() : 내림 / sqrt() : 제곱근 반환(ex) Mth.sqrt(9) = 3) / pow(a, b) : a에 b승 (ex) Math.pow(2, 4) = 2에 4승 => 16)
• new Date() : 날짜와 시간을 가지는 인스턴스(인수를 전달하지 않으면 현재 날씨와 시간을 갖는 인스턴스 반환 함 & new Date(숫자) - 해당 숫자의 밀리 초만큼 경과된 날씨와 시간을 가지는 결과 반환(1000이 1초, 86400000이 1일) & new Date(문자열) - 인터프리터가 해석이 가능한 형식일 때, 해당 문자열의 날짜와 시간을 가짐
• 정규 표현식(Regular Expression) : 조건을 정규표현식을 이용해 매우 간단하게 표현하는 방법(따로 작성 예정)

 

★String

• new String(value) : value는 모두 문자열로 반환됨 ex)let str1 = new String("start") => String { 0:'s', 1:'t', 2:'a', 3:'r', 4:'t', length:5, [[PrimitiveValue]]: 'start'}
• String은 유사 배열 객체 이므로 배열과 유사하게 접근이 가능함.
• str.charAt(n) : 문자열의n번째 인덱스에 해당하는 위치의 문자를 반환(result : string)

// 문자열 순회. 문자열은 length 프로퍼티를 갖는다.

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

    console.log(str.charAt(i));

  }

• str.indexOf(문자열, n) : n번째(default 0) 부터 찾을 문자열을 검색해 처음 발견된 곳의 index 번호를 반환함(발견하지 못하면 -1 반환)  <=> str.lastIndexOf : indexOf랑 똑같이 수행하나 마지막으로 발견된 곳의 index 번호 반환(x시 -1)
• str.includes(문자열) : ES6추가 문법으로 해당 문자열이 포함 되어 있는 경우 true / 없으면 false 반환
• str.replace(문자열1, 문자열2) :첫 번째로 검색된 문자열1을 새로운 문자열로 반환 함 => 원본 문자열은 ☆☆변하지 않음!, 정규 표현식 사용 가능 ex) /hello/ig: hello를 대소문자 구분 없이 모든 패턴 검색

const camelCase = 'helloWorldEveryone';

// /.[A-Z]/g => 1문자와 대문자의 조합을 문자열 전체에서 검색한다.(대문자를 기준으로 잘라서 앞에 _를 넣고 소문자로 바꾼다.)

console.log(camelCase.replace(/.[A-Z]/g, function (match) {

  // match : oW => match[0] : o, match[1] : W

  return match[0] + '_' + match[1].toLowerCase();

})); //

//바로 위에 console이랑 같은 방법

console.log(camelCase.replace(/(.)([A-Z])/g, '$1_$2').toLowerCase()); //

=> 출력 결과는 둘다 hello_world_everyone 대문자를 기준으로 대문자 앞에 _(underscore)를 삽입 후 소문자로 바꿈

const snakeCase = 'hello_world_everyone';

//_를 찾아서 붙인 후 바로 뒤에 있는 문자를 대문자로 바꾸기

console.log(snakeCase.replace(/_./g, function (match) {

    // match : _w => match[1] : w

    return match[1].toUpperCase();

}));

=> 출력 결과는 helloWorldEveryone, _를 찾아 붙이고 바로 뒤의 문자를 대문자로 변경

• str.split(문자열, limit) : 해당 문자열로 잘라 배열로 반환 함(이 때, limit 지정 시 해당 수만큼만 반환함)
• str.trim(문자열) : 문자열의 양쪽 끝에 있는 공백 문자 제거한 문자열 반환 
• str.replace(/ /g, "") : 정규식을 사용해 빈 공백을 모두 제거
• str.repeat(n) : n만큼 반복해 반환함, n이 0이면 빈 문자열 반환 & 음수면 RangeError 오류

 

★ Array

• new Array(value) : value 개수가 1개 이고 숫자인 경우 해당 value크기의 빈 배열을 생성함,  그 외의 경우는 매개변수로 전달된 값들을 요소로 가지는 배열을 생성함.
• Arrayof(n) : ES6문법으로 n이 개수가 1개이고 숫자이더라도 해당 n을 요소로 한 배열을 생성
• Object.key(arr) : 해당 arr의 요소의 인덱스 위치값을 반환(빈 요소만 참조 시 undefined 반환) , ex) arr = [5, <empty>, 3, <empty>, 1] => console.log(Object.keys(arr) = [ '0', '2', '4'] 가 출력(여기 안에 들어있는 요소 타입은 string)
• delete arr[n] : 해당 배열의 n 번째 인덱스 값을 삭제
• Array.isArray(parameter) : 주어진 매개변수가 배열이면 true(빈 배열도 true) / 아니면 false 반환함
• Array.from(유사배열/이터러블객체) : 유사배열/이터러블 객체를 변환 해 새로운 배열로 생성함.
• Array.indexof(n, m) : 해당 배열에 n요소가 있는지 m위치(생략 시 처음부터)부터 검색해 해당 요소의 첫 번째 인덱스 번호만 반환함(해당 요소가 없을 시 -1 반환)
• Array.includes(요소) : ES7문법으로 요소가 해당 배열에 있으면 true, 없으면 false 반환함
• Array.concat(arr2||요소) : arr2를 해체 후 Array 배열의 마지막 요소로 추가해 새로운 배열을 반환(이 때 파라미터가 요소라면 Array의 마지막 요소로 해당 요소를 추가한 새로운 배열을 반환 함.(새 배열이 반환 되는 것이므로 ☆☆원본 배열은 변경되지 않는다!)
• Array.join(구분자) : 원본 배열의 모든 요소를 문자열로 변환 후 구분자로 연결한 문자열을 반환(구분자는 생략이 가능하며 default는 ,(콤마)이다.)
• Array.push(값) : 원본 배열에 모든 값을 배열의 마지막 요소로 추가 후 변경된 length를 반환 함(★★원본이 바뀜), 값 부분에 배열이 들어왔다면 원본 배열 뒤에 그대로 배열 형태로 넣음(ex) arr=[1, 2, [3, 4]] (Tip) push()는 원본 배열을 직접 변경하는 부수 효과가 있기에 ES6의 spread syntax 사용하는 편이 좋음)
• Array.pop() : 원본 배열의 마지막 요소를 제거 후 제거한 요소를 반환(원본이 빈 배열이면 undefined 반환 & ★★원본이 바뀜), 마지막 요소가 배열이라면 해당 배열을 반환 함
• Array.shift() : 원본 배열의 첫 요소를 제거 후 제거한 요소 반환 (원본이 빈 배열이면 undefined 반환 & ★★원본이 바뀜), 마지막 요소가 배열이라면 해당 배열을 반환 함
• Array.unshift(값) : 원본 배열에 모든 값을 배열의 첫 요소로 추가 후 변경된 length를 반환 함, push와 동일하게 값이 배열로 들어왔다면 그대로 배열 형태로 넣음(★★원본이 바뀜)
• Array.reverse() : 원본 배열의 순서를 반대로 변경 후 변경된 배열을 반환(주의!! ★★원본이 바뀜)
• Array.slice(index, length) : 해당 배열의 index위치의 값부터 length-1위치까지 복사해서 반환, 얕은 복사가 가능 함 ex) const _arr = arr.slice(), ☆☆이 때 원본 배열은 변경되지 않는다!
• Array.splice(index, n, 값) : 해당 배열의 index위치의 값부터 n개만큼의 배열 요소들을 지운다음 값을 그 위치에 추가함, 이 때 제거한 요소가 배열로 반환이 됨(값 지정x 시, 삭제만 함 & 값이 배열로 들어오면 배열의 형태로 저장 &  n 지정 x 시, index위치부터 모든 요소 제거 후 제거된 요소를 반환 함(★★원본이 바뀜)
• => splice경우 일반적으로 배열의 요소 삭제에 사용, 배열 중간에 새로운 요소 추가 시에도 사용함(ex) arr.splice(1, 0, 100 - arr[1]에 100을 추가) & arr.splice(1, 2, 20, 30) - 1번 인덱스 위치부터 2까지 제거 후 그자리에 20, 30을 넣는다!!
• = Array.prototype.splice.apply(arr, [1, 0].concat([2, 3]) : 인덱스 1번 자리에 2, 3요소를 추가 하겠다(concat은 배열로 줘도 요소만 추가 시킴)

 

=> 정규식은 정리만으로도 한 챕터가 나올 꺼 같아 정규식은 내일 정리해보려 한다.