i can do ik!

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]

window.open()

window.open()은 팝업을 띄우는데 사용한다.

window.open(url, name, option);
window.open('팝업 주소', '팝업창 이름', '팝업창 설정');

팝업창 이름

- target="_blank" : 팝업을 새창에서 연다. target을 입력하지 않으면 default.

- target="_parent" : 부모창에서 팝업이 열린다.

- target="_self" : 현재 페이지에서 팝업이 열린다.

- target="_top" : 현재 페이지에서 최상의 페이지에서 팝업이 열린다.

팝업창 설정

예제

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

slice()

slice()는 배열의 일부분을 선택하여 새로운 배열을 만든다.

arr.slice([begin[, end]])

begin

잘라낼 배열의 시작 index

end

잘라낼 배열의 종료 index

end index의 값은 잘라낼 배열에 포함되지 않는다.

end index가 생략되면, begin index부터 배열의 끝까지를 잘라낸다.

begin index나 end index가 음수면 배열 끝에서부터의 길이를 나타낸다.

예제

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