i can do ik!

Math.pow()

Math.pow()는 제곱을 구할 때 사용.

Math.pow(base, exponent)

parameter

base - 밑 값.

exponent - 밑을 제곱하기 위해 사용하는 지수.

return

밑 값을 지수 값으로 거듭제곱한 값.

Math.pow() 예제

// 밑이 양수 지수가 양수
Math.pow(7, 2);    // 49
Math.pow(2, 10);   // 1024
// 밑이 양수 지수가 소수 또는 분수
Math.pow(2, 0.5);  // 1.4142135623730951 (2의 제곱근)
Math.pow(2, 1/3);  // 1.2599210498948732 (2의 세제곱근)
// 밑이 양수 지수가 음수
Math.pow(7, -2);   // 0.02040816326530612 (1/49)
Math.pow(8, -1/3); // 0.5
// 밑이 음수 지수가 양수
Math.pow(-7, 2);   // 49 (제곱의 결과값은 양수.)
Math.pow(-7, 3);   // -343 (세제곱은 음수가 될 수 있다.)
// 밑이 음수 지수가 소수 또는 분수
Math.pow(-7, 0.5); // NaN (음수는 실제 제곱근을 가지지 않는다.)
Math.pow(-7, 1/3); // NaN

pop()

pop()은 배열의 마지막 요소를 제거.

제거한 요소를 리턴.

arr.pop()

return

배열에서 제거한 요소를 리턴.

pop()예제

const arr = ['apple', 'peach', 'grape']; 
const popArr = arr.pop(); 

console.log(popArr); // 'grape';
console.log(arr); // ['apple', 'peach'];

push()

push()는 배열의 끝에 하나 이상의 요소를 추가.

배열의 새로운 length를 리턴.

arr.push(element1[, ...[, elementN]])

parameter

elementN : 배열의 끝에 추가할 요소.

return

호출한 배열의 새로운 length 속성.

push() 예제

const arr = ['apple', 'peach', 'grape'];
 
arr.push('watermelon', 'lemon');

console.log(arr); // ['apple', 'peach', 'grape', 'watermelon', 'lemon'];

find()

find()는 특정 조건에 맞는 값이 나오는 첫번째 값을 리턴한다.

만족하는 값이 없으면 undefined 리턴.

arr.find(callback[, thisArg])

callback

element - 콜백함수에서 처리할 현재 요소.

index(Optional) - 콜백함수에서 처리할 현재 요소의 인덱스.

array(Optional) - find 함수를 호출한 배열.

thisArg

선택 항목. 콜백이 호출될 때 this로 사용할 객체.

find() 예제

const arr = [10, 20, 30, 40, 50];

// 30 이상인 값
const result = arr.find(item => item>30);
// find()는 첫번째 값만 리턴
console.log(result); // 40

filter()

filter()는 특정 조건에 부합하는 배열의 모든 값을 배열로 리턴.

arr.filter(callback(element[, index[, array]])[, thisArg])

callback

true를 반환하면 요소를 유지, false를 반환하면 버린다.

element - 처리할 연재 요소.

index(Optional) - 처리할 현재 요소의 인덱스.

array(Optional) - filter를 호출한 배열.

thisArg

선택 항목. 콜백이 호출될 때 this로 사용할 객체.

filter() 예제

const arr = [10, 20, 30, 40, 50];

// 30 이상인 값 
const result = arr.filter(item => item>30);
// filter()는 일치하는 모든 값을 배열로 리턴
console.log(result); // [40, 50]

sort()

sort()는 배열 요소를 정렬 후, 그 배열을 반환한다.

새로운 배열이 아닌 원본 배열을 수정한다.

arr.sort([compareFunction]);

sort() 예제

let months = ['January', 'February', 'March', 'April'];
months.sort();
console.log(months); //	['April', 'February', 'January', 'March']

let num = [1, 2, 10, 15];
num.sort();
// 인자를 문자열로 변환 후 "유니코드"로 비교하기 때문에 아래 결과가 나옴
console.log(num); // [1, 10, 15, 2]

compareFunction

위 예제와 같이 숫자 정렬을 하기 위해 사용한다.

sort() 내부에 비교 함수를 작성하여 원하는 조건으로 정렬할 수 있음.

let num = [1, 2, 10, 15];

// 오름차순 정렬 (ASC)
num.sort((a, b) => {
  return a - b;
});
console.log(num); // [ 1, 2, 10, 15 ]

// 내림차순 정렬 (DESC)
num.sort((a, b) => {
  return b - a;
});
console.log(num); // [10, 5, 3, 2, 1]

타이머함수

javascript에서 다루는 내장 함수.

setTimeout()과 setInterval() 두종류가 있다.

setTimeout()

setTimeout()은 일정 시간 지연 후 특정 코드, 함수를 실행 하고 싶을 때 사용.

setTimeout(function(), delay);

delay는 미리세컨드(ms). ex) 1000 -> 1초

setInterval()

setInterval()은 일정 시간 마다 특정 코드, 함수를 실행 하고 싶을 때 사용.

setInterval(function(), delay);

예제

function hello() {
  alert('안녕하세요.');
}

// 3초 후에 hello()를 실행한다.
setTimeout(hello, 3000); 
//setTimeoust을 사용할때 함수뒤 ()를 붙이지 말것.

// 3초 마다 hello()를 실행한다.
setInterval(hello, 3000); 
//setInterval 역시 사용할때 함수뒤 ()를 붙이지 말것.

로딩 창 키는 함수

jQuery를 이용해 마스크와 로딩 이미지 삽입.

// 로딩창 키는 함수
function openLoading() {
    //화면 높이와 너비를 구합니다.
    let maskHeight = $(document).height();
    let maskWidth = window.document.body.clientWidth;
    //출력할 마스크를 설정해준다.
    let mask ="<div id='mask' style='position:absolute; z-index:9000; background-color:#000000; display:none; left:0; top:0;'></div>";
    // 로딩 이미지 주소 및 옵션
    let loadingImg ='';
    loadingImg += "<div id='loadingImg' style='position:absolute; top: calc(50% - (200px / 2)); width:100%; z-index:99999999;'>";
    loadingImg += " <img src='https://loadingapng.com/animation.php?image=4&fore_color=000000&back_color=FFFFFF&size=128x128&transparency=1&image_type=0&uncacher=75.5975991029623' style='position: relative; display: block; margin: 0px auto;'/>";
    loadingImg += "</div>"; 
    //레이어 추가
    $('body')
    		.append(mask)
    		.append(loadingImg)
    //마스크의 높이와 너비로 전체 화면을 채운다.
    $('#mask').css({
            'width' : maskWidth,
            'height': maskHeight,
            'opacity' :'0.3'
    });
    //마스크 표시
    $('#mask').show();  
    //로딩 이미지 표시
    $('#loadingImg').show();
}

로딩 창 끄는 함수

jQuery를 이용해 마스크, 로딩 이미지 제거.

// 로딩창 끄는 함수
function closeLoading() {
    $('#mask, #loadingImg').hide();
    $('#mask, #loadingImg').empty(); 
}

예제

실제 사용은 로딩 창 열기 - 작업 할 프로세스 실행 - 완료 - 로딩 창 닫기.

예제는 간단히 하기 위해 setTimeout 사용.

See the Pen loading process by Kim Jae Ik (@doitdoik) on CodePen.

splice()

splice()는 배열에 값 추가/제거/교체/추출이 가능.

arr.splice(start, deleteCount, [value1], [value2],..)

start

배열을 변경할 시작 index

배열 길이보다 큰 값일 경우 배열 길이로 설정.

음수의 경우 배열 끈에서부터

deleteCount

배열에서 제거할 요소의 수

0이하의 값은 아무 요소도 제거하지 않음.

단 최소 하나의 새로운 요소를 추가 해야한다.

value

배열에 추가할 요소

생략시 요소를 제거하기만 한다.

예제

let mine = [0, 1, 2, 3, 4]; 

// 배열 2번째 위치한곳에 숫자 5,7을 추가. 
mine.splice(2,0,5,7); //[0, 1, 5, 7, 2, 3, 4]

// 배열 1번째 부터 2개를 제거. 
mine.splice(1,2); //[0, 3, 4]

// 배열 1번째부터 2개를 제거하고 숫자 5로 추가. 
mine.splice(1,2,5); //[0, 5, 3, 4]

// 배열 1번째 부터 2개를 제거한 값 추출. 
let remove = mine.splice(1,2); //[1, 2]