jQuery 기타 유틸리티 메소드 정리
jQuery에서 자주 사용되는 $.each(), $.extend(), $.trim() 등 다양한 유틸리티 메소드를 정리했습니다. 배열 처리, 객체 병합, DOM 조작 등을 간편하게 구현하세요.
1. 반복 처리: $.each()
배열 또는 객체의 각 항목을 순회하며 작업을 수행할 수 있는 메소드입니다.
배열 반복
const data = [1, true, "jQuery"];
$.each(data, function(index, value) {
console.log(`${index}번째: ${value}`);
});
객체 반복
const cat = { name: "나비", age: 2 };
$.each(cat, function(key, value) {
console.log(`${key}: ${value}`);
});
2. 객체 병합: $.extend()
두 개 이상의 객체를 하나로 병합합니다.
const a = { name: "나비" };
const b = { age: 2 };
const result = $.extend({}, a, b); // 원본 변경 없이 병합
3. 문자열 공백 제거: $.trim()
앞뒤 공백을 제거합니다.
const str = " Hello jQuery! ";
console.log($.trim(str)); // "Hello jQuery!"
4. 배열 관련 메소드
4.1. 특정 값의 인덱스 찾기: $.inArray()
const arr = ["a", "b", "c"];
console.log($.inArray("b", arr)); // 1
4.2. 배열 병합: $.merge()
const merged = $.merge([1, 2], [3, 4]);
console.log(merged); // [1, 2, 3, 4]
4.3. 조건 필터링: $.grep()
const even = $.grep([1, 2, 3, 4], function(n) {
return n % 2 === 0;
});
console.log(even); // [2, 4]
5. 데이터 저장 및 제거: $.data(), $.removeData()
jQuery 객체에 사용자 데이터를 저장하고 관리할 수 있습니다.
const el = $("#box");
// 데이터 저장
el.data("info", { version: "3.6.0" });
// 데이터 읽기
console.log(el.data("info"));
// 데이터 제거
el.removeData("info");
6. DOM 관련 메소드
6.1. 포함 관계 확인: $.contains()
const result = $.contains(document.body, $("#child")[0]);
console.log(result); // true 또는 false
6.2. 중복 제거: $.unique()
const unique = $.unique([el1, el2, el1]);
7. 현재 시간 확인: $.now()
console.log($.now()); // 현재 시각 (밀리초 단위)
8. 기타 유틸리티 메소드
| 메소드 | 설명 |
|---|---|
$.noop() |
아무 동작도 하지 않는 빈 함수 반환 |
$.proxy() |
this 컨텍스트를 고정한 함수 반환 |
$.makeArray() |
유사 배열을 진짜 배열로 변환 |
$.map() |
배열/객체의 각 항목을 가공해 새 배열 반환 |
$.parseHTML() |
HTML 문자열을 DOM 객체 배열로 변환 |
$.parseJSON() |
JSON 문자열을 JS 객체로 변환 |
$.parseXML() |
XML 문자열을 XML DOM 객체로 변환 |
질문 정리
$.each()와 forEach()의 차이는?
→ $.each()는 배열과 객체 모두에 사용 가능하며, return false로 반복을 중단할 수 있습니다.
$.extend()은 깊은 복사도 가능한가요?
→ $.extend(true, target, source)와 같이 첫 인자를 true로 하면 깊은 복사됩니다.
$.trim()은 ES6 이후 필요 없나요?
→ String.prototype.trim()이 표준이지만, 구형 브라우저 지원이 필요하면 $.trim() 사용이 유리합니다.
마무리
jQuery의 유틸리티 메소드는 타입 체크, 반복 처리, 배열 조작, DOM 검증 등 다양한 상황에서 간결한 코드를 작성할 수 있게 도와줍니다. 상황에 맞는 메소드를 골라 사용하면 코드가 더욱 효율적이고 가독성도 좋아집니다.
댓글남기기