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.

forEach()

Array 요소를 제공된 함수로 한 번 실행.

값을 반환하지 않는다.(return값이 없다.)

기존 배열은 변경 가능.

// 함수를 선언해서 사용
array.forEach(function(item){
	console.log(item);
});

// es6 화살표 함수
array.forEach((item) => {
	console.log(item);
});

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

map()

모든 Array 요소가 제공된 함수로 호출될 때 새로운 array를 생성

기존의 배열을 가공하여 새로운 배열을 생성할 때 사용

기존 배열 값은 바뀌지 않고 유지

// 함수를 선언해서 사용
array.map(function(item){
	return item;
});

// es6 화살표 함수
array.map((item) => {
	return item;
});

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