[JavaScript] 메서드 체이닝(Method Chaining)와 filter(), end()

메서드 체이닝(Method Chaining)

---

메서드 체이닝

메서드가 객체를 반환하게 되면, 메서드의 반환 값인 객체를 통해 또 다른 함수를 호출할 수 있다.

이러한 프로그래밍 패턴을 메서드 체이닝이라 한다.

메서드 체이닝의 형태

Object.function().function().function()

위와 같이 메서드 체이닝을 통해 하나의 Object 메서드가 순차적으로 메서드 function() 을 Call 하는 형태를 가질 수 있다.

실제 코드를 보자

1 2 3 4 5 6

<script>     $(document).ready(function() {         $('h1').css('background', 'orange');         $('h1:even').css('color', 'white');         $('h1:odd').css('color', 'red'); </script>

이 코드를 체이닝을 사용하는 형태로 바꾸려면 filter(), end() 메서드를 사용해야 한다.

filter() : 문서 객체를 필터링한다.

end() : 문서 객체 선택을 한 단계 뒤로 돌린다.

<script>
    $(document).ready(function() {
        $('h1').css('background', 'orange').filter(':even').css('color', 'white').end().
        filter(':odd').css('color', 'red');
</script>

css를 적용한 결과는 다음과 같다.

• 태그선택자를 통해 h1태그 전체의 배경은 orange 색상으로 변경

• 필터링하여 h1태그 짝수줄 폰트색상 white, h1태그 홀수줄 폰트색상 red.