함수 총정리

프로젝트,알고리즘 풀이 등을 진행하면서 사용한 함수들을 복습하고,
다시 꺼내볼 수 있도록 정리해두는 페이지입니다.

키의 값을 가져오는 함수 : Indexof()

//이번 프로젝트에서 쓰지는 않았지만..검색해본 김에 정리!(인용)

string.indexOf(searchvalue, position)

/*indexOf 함수는, 문자열(string)에서 특정 문자열(searchvalue)을 찾고, 
검색된 문자열이 '첫번째'로 나타나는 위치 index를 리턴합니다.
파라미터
searchvalue : 필수 입력값, 찾을 문자열
position : optional, 기본값은 0, string에서 searchvalue를 찾기 시작할 위치
찾는 문자열이 없으면 -1을 리턴합니다.
문자열을 찾을 때 대소문자를 구분합니다.

출처: https://hianna.tistory.com/379 [어제 오늘 내일]

새로운 배열에 원소 추가하기: push()

newarr.push('N');
//push()는 배열의 맨 뒤에 값을 추가한다.
newarr.unshift('N')
//unshift()는 배열의 맨 앞에 값을 추가한다.

문자열 합치기 : join()

var number = [1,2,3,4,5,6,7,8,9,0,'a','b','c','d','e','f']
var newarr = []

for (var i=0; i<5; i++) {
	newarr.push((number[Math.floor(Math.random()*15)]))

}
/*[9,6,3,"d",4]
우리가 원하는 #079de3 과 같은 연속된 숫자코드가 아닌, 쉼표로 구분되며 각 숫자와 문자형태로
나타나는 배열의 요소들이 출력된다*/

return "#" + newarr.join("");
/*join은 배열을 구성하는 각각의 요소들을, 하나의 문자열로 변환한다.
위 결과값이 #963d4로 출력된다.
""안에는 구분자가 들어간다. join(" ")(공백)을 입력할 경우 #9 6 3 d 4로 출력된다.

랜덤하게 숫자 생성하기: Math.random()

• 0~1사이의 소숫점을 포함한 난수를 무작위로 생성한다. 랜덤하게 숫자를 만들고 싶다면 Math.random()을 사용하면된다. 꼭 숫자가 아니더라도 잘 활용하면 랜덤한 결과를 출력할 때 활용할 수 있다.

• 랜덤하게 생성할 숫자의 범위를 정해주어야한다.

  최댓값 : Math.random()*최댓값
  
  //난수의 범위 시작이 0이므로 0*n=0 
  // 최대값인 1에만 원하는 최대 범위를 곱하면 된다. 1*n=n이므로, 범위는 0~n
  
  최솟값 : ( Math.random() * ( 최대값 - 최소값 )  ) + 최소값
  /*1<x<10의 범위를 만들어주기 위해서는 +1을 해주어야 한다.
  그러나 최댓값의 범위에도 +1이 되기 때문에, 최댓값에서 최솟값을 뺀 만큼만 더해준다.

• 다만, 이 함수는 랜덤한 '정수'를 출력하지는 않는다.
  여전히 해당 범위의 소수점을 포함한 난수를 무작위로 생성한다.
  따라서 정수의 결과를 얻고 싶다면 다른 함수를 사용해야 한다.

  Math.floor() : 소수점 이하를 버림
  Math.ceil() : 소수점 이하를 올림
  Math.round() : 소수점 이하를 반올림

        for (var i = 0; i < 5; i++) {
          newarr.push(number[Math.floor(Math.random() * 15)]);
        }
/*
Math.floor() : 소수점 이하를 버림
Math.ceil() : 소수점 이하를 올림
Math.round() : 소수점 이하를 반올림

/*Math.random()*15 : 0~15까지의 랜덤한 난수를 출력
Math.floor(Math.random()*15 : 소숫점 이하를 버림해, 0~15까지의 랜덤한 정수를 출력
number[Math.floor(Math.random()*15] : 랜덤한 정수에 해당하는 number배열의 인덱스의 값을 출력
	예) number[1] : 2
newarr.push(number[Math.floor(Math.random() * 15)]);:newarr 배열의 맨 뒤에 해당 값을 추가

- 문자열<->숫자변환 Number(),parseFloat(),string()

  Number() 
  parseFloat()
  문자열 혹은 문자열을 값으로 하는 변수를 숫자로 변환
    
  반대로 숫자를 문자열로 변환할 때
  string()
  ////
  function getno() {
  //   let getnolist = [];
  const getnolist = document.getElementById("writeno").value;
  if (getnolist.length != 3) {
    alert("3자리 숫자를 입력해주세요!");
  } else {
    // for (i = 0; i < 3; i++) {
    let slicenolist = [1, 2, 3];
    let sliceno0 = getnolist.substr(0, 1);
    slicenolist.splice(0, 1, sliceno0);
    let sliceno1 = getnolist.substr(1, 1);
    slicenolist.splice(1, 1, sliceno1);
    let sliceno2 = getnolist.substr(2, 1);
    slicenolist.splice(2, 1, sliceno2);
    let tonum0 = slicenolist.splice(0, 1, parseFloat(slicenolist[0]));
    let tonum1 = slicenolist.splice(1, 1, parseFloat(slicenolist[1]));
    let tonum2 = slicenolist.splice(2, 1, parseFloat(slicenolist[2]));
    console.log(slicenolist);

}

  }
}
//이전결과: ["4", "6", "4"]
//결과 : [4, 6, 4]

- 문자열 자르는 방법(split, substr,substring)

https://sesok808.tistory.com/600

  
  split("구분자")
  substr(시작인덱스,길이)
  substring(시작인덱스,종료인덱스)
  
  
  예)*/
  var a = "1,2,3"
  var b = "1234567"
  
  var array = a.split(",") //array = [1,2,3]
  var array = b.substr(2,3) //array = [345]
  var array = b.substring(2,5) //array = [3456]
  

동일한 단어를 문자열에서 찾기, match() 함수

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/match
match() 메서드는 문자열이 정규식과 매치되는 부분을 검색한다.

기본 작동

• 문자열이 정규식과 일치하면, 일치하는 전체 문자열을 첫 번째 요소로 포함하는 Array 리턴
• 일치하는 것이 없으면 null 리턴

[g플래그] 특정문자를 포함하는 모든 갯수를 세고 싶을 때

• 정규식에 g 플래그가 포함
  : 일치하는 객체가 아닌 일치하는 하위 문자열을 모두 포함하는 Array를 리턴

정규 표현식

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions
: 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴.
match 메소드와 함께 쓰인다.

정규식을 만드는 방법

1. 정규식 리터럴 사용

var re = /ab+c/;

2.RegExp 객체의 생성자 함수 호출

var re = new RegExp("ab+c");

x 또는 y에 대응하는 정규 표현식에서의 특수문자

대소문자 무시하기

- from

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Array.from(arrayLike[, mapFn[, thisArg]])

매개변수
arrayLike :배열로 변환하고자 하는유사 배열 객체나 반복 가능한 객체.
mapFn (Optional) :배열의 모든 요소에 대해 호출할 맵핑 함수.
thisArg (Optional) :mapFn 실행 시에 this로 사용할 값.

Array.from('foo');
// ["f", "o", "o"]

- reduce

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

배열의 모든 값 합산

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// sum is 6

arrow function으로 작성

var total = [ 0, 1, 2, 3 ].reduce(
  ( accumulator, currentValue ) => accumulator + currentValue,
  0
);

4개의 인자를 가진다.

accumulator : 콜백의 반환값을 누적
currentValue : 처리할 현재 요소
currentIndex (Optional) :처리할 현재 요소의 인덱스
array (Optional) : reduce()를 호출한 배열

예시

- 새로고침 함수 location.reload()

https://yyman.tistory.com/400

location.reload(true);
location.href = location.href;

history.go(0);

- 시간 지연함수 setTimeout(),setInterval()

[JavaScript] 시간 지연 함수, 일정 시간 뒤 실행시키기, setTimeout() {}

setTimeout(function() { // Code here }, delay);
  //예시)
  setTimeout(function() {
  console.log('3초후 실행');
}, 3000);

// 3초 후 함수 실행- '3초후 실행' 출력

setInterval은 실행 간격을 설정하는 함수이다.

- 배열 추가/삭제

https://gent.tistory.com/295

//push(), unshift()는 web project1에서 정리했었다.
//또다른 배열 추가 방법은 splice()이다.
  
arr.splice("위치",0,["요소1","요소2"....])
  
/*index "위치"에 "요소1","요소2"...를 추가
  원하는 위치에 하나 이상의 요소를 추가할 수 있는 것이 특징이다.*/

  //배열 삭제 방법
  array.pop : 마지막 요소 제거
  array.shift : 첫번째 요소 제거
  array.splice(index,갯수) :특정 index부터 특정 갯수의 요소를 제거
  arr.splice(1,2):index1 부터 2개의 요소를 제거/*
  배열 추가방법과도 동일한데, 추가시에는 제거할 요소의 갯수를 0으로 넣었다. 
  제거 시에는 대체할 요소를 지정하지 않았기 때문에 삭제된 상태로 결과가 출력되는 것이다.

HTML요소 변경하기: innerHTML

• 화면상의 글자 등 HTML요소를 변경하고자 할 때 사용한다.
• document.getElementbyId로 원하는 Id를 가진 태그의 정보를 가져온 뒤, 이 정보를 innerHTML을 사용해 변경할 수 있다.

      <h1 id="code">dd</h1>                   
//id가 code인 텍스트 dd가 화면상에 출력된다.

        var newarr = [];

        for (var i = 0; i < 6; i++) {
          newarr.push(number[Math.floor(Math.random() * 15)]);
        }
        var hex = "#" + newarr.join("");
//랜덤으로 생성한 숫자코드를 hex라는 변수에 저장한다.

        var x = document.getElementById("backgr");
//document.getElementById를 통해 backgr라는 태그의 정보를 가져와 변수x로 정의한다.

        x.style.backgroundColor = hex;
//x의 스타일 중, 배경색상을 새로운 hex라는 변수에 들어있는 정보로 변경해준다.

        document.getElementById("code").innerHTML = hex;  
//id가 code인 태그에 접근해, HTML을 hex로 변경한다.
//화면상에 출력된 dd라는 텍스트가 랜덤으로 생성된 숫자코드로 변경된다.

참고사이트

https://poiemaweb.com/js-math
https://poiemaweb.com/js-array
[자바스크립트] 배열에 값 앞 또는 뒤에 추가하기, unshift(), push()
https://poiemaweb.com/js-function

https://poiemaweb.com/js-array
[자바스크립트] 배열을 문자열로 변환, 요소 합치기; Join Array JavaScript](http://mwultong.blogspot.com/2007/02/join-array-javascript.html)
[JS] 자바스크립트의 화면 출력 방법 정리