ZeroCho Blog

안녕하세요. 이번 시간에는 제이쿼리 유틸들에 대해 알아보겠습니다. 유틸이란 유틸리티를 뜻하죠. 유틸리티는 무언가를 관리하는 데 도움을 주는 프로그램을 뜻합니다.

제이쿼리에는 코드를 관리하는 데 도움을 주는 유틸들이 내장되어 있습니다. 굳이 선택자를 통해 태그를 선택하지 않고도 바로 쓸 수 있습니다.

$.each

배열이나 객체를 반복하는 메소드입니다. ES5의 forEach이나 for ~ in문과 비슷합니다. 함수의 첫 번째 인자는 키, 두 번째 인자는 값입니다.

$.each(['zero', 'hero', 'nero'], function(key, val) {
  console.log(key, val);
}); // 0, zero, 1, hero, 2, nero
$.each({ zero: 'me', hero: 'friend', nero: 'enemy' }, function(key, val) {
  console.log(key, val);
}); // zero, me, hero, friend, nero, enemy
['zero', 'hero', 'nero'].forEach(function(val, key) {
  console.log(val, key);
}); // zero, 0, hero, 1, nero, 2

$.extend

첫 번째 객체에 다른 객체들의 속성을 복사하는 메소드입니다. ES2015의 Object.assign과 비슷합니다.

$.extend({ zero: 'genious' }, { zero: 'babo', hero: 'friend' }); // { zero: 'babo', hero: 'friend' });
Object.assign({ }, { zero: 'babo' }); // { zero: 'babo' }

$.trim

문자열의 좌우 공백을 제거하는 유틸입니다. 문자열.trim() 메소드와의 차이점은 거의 없어 보입니다.

$.trim('   zero   '); // zero
'   zero   '.trim(); // zero

$.inArray

배열 안에 해당 요소가 몇 번째에 있는지 검사하는 메소드입니다. 없으면 -1을 반환합니다. 배열.indexOf 메소드와 비슷합니다.

var arr = ['zero', 'hero', 'nero'];
$.inArray('hero', arr); // 1
$.inArray('jero', arr); // -1
arr.indexOf('zero'); // 0

$.proxy

this를 바꾸는 메소드입니다. ES5에서의 bind 메소드와 비슷합니다.

var func = function() {
  console.log(this);
};
var obj = { zero: 'babo' };
func(); // window
var newFunc = $.proxy(func, obj);
newFunc(); // obj
var bindFunc = func.bind(obj);
bindFunc; // obj

$.type

기존에 있던 typeof 연산자를 조금 보완한 것입니다. typeof 연산자는 배열과 null, Date 등을 모두 object라고 표시합니다. 또한 new를 통해서 만든 문자열, 숫자, 불린도 모두 object라고 표시하고요. 정규표현식도 브라우저마다 다르게 처리합니다. 제이쿼리의 $.type은 위의 것들을 구분해줍니다.

$.type(new Date); // date
$.type([1, 2, 3]); // array
$.type(null); // null
$.type(/s/); // regexp

다음 시간에는 제이쿼리 태그를 생성, 복사, 이동, 제거하는 방법에 대해 알아보겠습니다!