많은 프로그래밍 언어에서 람다 표현식은 한번 사용하고 버릴 함수를 정의하기 위한 용도로 많이 사용됩니다. 물론 이 람다 표현식에 의해 만들어진 함수를 변수에 담아 두번 이상 사용할 수도 있지만… 어찌되었든, 람다는 빠르게 함수를 만들어 사용하고는, 버리는 용도로 사용합니다.
Java 8에서 람다 표현식을 지원하고 있는데요. 문자열 요소를 가지는 리스트를 정렬하는 예를 통해 람다 표현식을 살펴 보겠습니다. 정렬할 문자열 리스트로 사용할 names 객체 변수는 아래와 같습니다.
Collections.sort(names, new Comparator() {
@Override
public int compare(String a, String b) {
return -b.compareTo(a);
}
});
위의 Collections의 sort 함수의 두번째 인자에 1회용 목적으로 익명 객체를 생성해 던져주고 있습니다. 이 익명 객체를 생성하기 위한 인터페이스가 단 하나의 매서드에 대한 정의를 필요로 합니다. 이를 람다 표현식으로 바꾸면 아래와 같습니다.
Collections.sort(names, (String a, String b) -> {
return -b.compareTo(a);
});
람다식을 컴파일로가 해석할 때 어떤 타입의 어떤 매서드를 정의하는지를 자동으로 추론해 줍니다. (염병할, 나보다 더 똑똑해!) 위의 람다식을 보면 함수의 코드가 한줄이므로 아래처럼 더 줄일 수 있습니다.
Collections.sort(names, (String a, String b) -> -b.compareTo(a));
코드가 한줄이므로 {}을 제거할 수 있고, return 키워드를 제거해도 반환한다라는 개념을 이미 추론을 통해 파악하고 있습니다. (이제 니가 코딩해라, 난 뭐하냐?) 충분히 줄였다 싶을 람다 표현식을 더 줄일 수 있는데요. 어차피 어떤 함수를 람다식으로 정의하는지를 알고 있다면 해당 함수의 타입을 명시적으로 언급하지 않아도 추론이 가능할 것으므로 아래처럼 더 최적화할 수 있습니다.
Collections.sort(names, (a, b) -> -b.compareTo(a));
(이젠 나도 모르겠을 암호 코드.. ㅜ_ㅜ) 위의 내용은 람다식의 일부입니다. 람다에 좀더 깊이 들어가면.. 깜짝 놀라거임.. -O-;
$('p').eq(3).css('color', '#00ff00'); // 4번째 요소
$('p').first().css('color', '#ff0000'); // 첫번째 요소
$('p').last().css('color', '#0000ff'); // 마지막 요소
$('p'').eq(-1).css('color', '#ff00ff'); // 끝에서 첫번째 요소
늦깍이에 웹 개발의 험난한 파도 속에 허욱적 대고 있는 요즘.. jQuery에서 가장 많이 사용하는 선택자가 까마귀 고기로 보여 컨닝 페이퍼 만들어 봅니다.
전체 선택자
$('*').css('color', 'red');
Tag 선택자
$('h1').css('color', 'orange');
ID 선택자
$('#abc').css('color', 'orange');
여러 개의(OR 조건) 선택자
$('h1, p, #abc').css('color', 'orange');
class 선택자
$('.item').css('color', 'black');
AND 조건 선택자
$('.item.abc').css('color', 'black');
자식 선택자
$('div > p').css('color', 'black');
후손 선택자
$('div p').css('color', 'black');
속성 선택자
$('h1[tt').val('good'); // 속성을 가지는 것 선택
$('h1[tt=aa').val('good'); // 속성값 일치하는 것 선택
$('h1[tt~=aa').val('good'); // 속성값에 단어로써 포함하는 것 선택
$('h1[tt^=aa').val('good'); // 속성값의 시작에 일치하는 것 선택
$('h1[tt$=aa').val('good'); // 속성값의 끝에 일치하는 선택
$('h1[tt*=aa').val('good'); // 속성값에 포함하는 것 선택
$('.a:checked').val('good'); // checked된 input 요소
$('.a:disabled').val('good'); // 비활성화된 input 요소
$('.a:enabled').val('good'); // 활성화된 input 요소
$('.a:focus').val('good'); // 포커스 대상 input 요소
$('.a:input').val('good'); // input, textarea, button, select 요소
alert( $('.a > option:selected').val() ); // class 'a'를 가진 select 요소 자식 중 선택된 option 요소
var myArray = [1, 2, 3, 4, 5];
if ($.inArray(4, myArray) !== -1) {
alert('found.');
}
다음은 어떤 객체에 또 다른 객체의 키-값을 복사해 주는 플러그인입니다. $.extend의 첫번째 인자는 복사가 되어 값이 저장될 대상 객체입니다. 그리고 두번째 이후의 인자는 복사될 키-값을 담고 있는 객체들입니다. 아래의 코드는 secondObj의 키-값을 firstObj에 복사해 주는 코드인데요. 결국 firstObj.foo는 secondObj.foo의 값으로 변경됩니다. $.extend는 첫번째 인자를 반환하므로 newObject === firstObj는 true입니다.
var firstObj = { foo: 'bar', a: 'b' };
var secondObj = { foo: 'baz' };
var newObject = $.extend(firstObj, secondObj);
alert(firstObj.foo);
if (newObject === firstObj) {
alert('equal');
}
다음 코드는 함수 호출시 내부의 this를 개발자가 의도한 객체로 하여 함수를 호출하도록 하는 플러그인입니다. 아래의 코드에서 myFunction는 전역 객체인 Window의 소유로 이 함수를 그대로 호출하면 함수 내부에서 this는 Window 객체가 됩니다. 그러나 12번 코드를 통해 myFunction 함수에 대한 내부 this를 myObject로 변경해주는 함수로 myProxyFunction를 생성하고 있습니다. 실제로 이 myProxyFunction를 13번 코드처럼 그대로 호출하면 함수 내부의 this는 myObject가 됩니다. JavaScript의 이벤트 리스너 함수에서 this 객체가 다소 혼란스러울 때가 있습니다. 이 혼란의 시기에 이 플러그인이 해결점이 될 수 있겠습니다.
var myFunction = function () {
alert(this);
};
var myObject = {
foo: 'bar',
toString: function () { return 'myObject'; }
};
myFunction();
var myProxyFunction = $.proxy(myFunction, myObject);
myProxyFunction();
다음은 배열을 순회하면서 원하는 값들로 구성된 배열을 생성하는 플러그인입니다. 7번 코드의 실행을 통해 arr 배열의 요소 객체의 id 속성만으로 구성된 배열을 생성해 반환합니다. 11번 코드는 새롭게 생성된 배열의 값을 확인하는 코드입니다.
var arr = [
{ id: 'a', tagName: 'li' },
{ id: 'b', tagName: 'li' },
{ id: 'c', tagName: 'li' }
];
var result = $.map(arr, function (value, index) {
return value.id;
});
$.each(result, function (i, v) {
alert(i + ' : ' + v);
});
