출처1 : http://linqjs.codeplex.com/

출처2 : http://blog.aliencube.org/ko/2013/07/23/linq-for-javascript-and-es5-shim/

번외로 아래와 비슷한 다른 것도 있다. 이름은 jslinq로 앞 뒤 이름만 다르다. 사용법은 거의 비슷하다.

https://jslinq.codeplex.com/

https://www.nuget.org/packages/jslinq

JSLINQ_v2.10_SourcePlusExamples.zip

대략 이런 느낌으로 사용할 수 있다.

linq.js_ver2.2.0.2.zip

<%--<script type="text/javascript" src="static/js/linq.min.js"></script>--%>

var persons = [{ name: 'foo', age: 1 }, { name: 'bar', age: 2 }];

var ret = $.Enumerable.From(persons).Where(function (i) { return i.age > 1; }).ToArray()

LINQ (Language Integrated Query)는 닷넷 개발시 가장 강력한 기능들 중의 하나이다. LINQ-to-SQL, LINQ-to-XML, LINQ-to-OBJECT 등 거의 모든 상황에서 LINQ를 사용할 수 있다. LINQ는 보통 아래와 같은 형태로 많이 쓰인다.

1
2
3
4
var products = (from p in context.Products
                where p.ProductName.Contains("ABC")
                select p).ToList();
 

또는

1
2
3
var products = context.Products
                      .SingleOrDefault(p => p.ProductId == 123);
 

하지만 이것의 가장 큰 단점(?)이라면, 프론트엔드에서 쓰이는 자바스크립트로는 이러한 기능을 사용할 수 없다는 데 있다. 그래서 나타난 것이 바로 linq.js이다.

`linq.js` 소개

이 자바스크립트 프레임웍을 사용하면, LINQ에서 제공하는 대부분의 기능들을 자바스크립트 상에서도 거의 동일한 문법으로 사용할 수 있다. 또한, 이 linq.js는 jQuery 플러그인도 제공하므로, 더더욱 편리하게 쓸 수 있다.

이 linq.js를 사용하기 위해서는 우선 라이브러리를 불러들여야 한다. 기왕이면 jQuery를 호출한 후에 이 linq.js를 호출하도록 하자.

1
2
3
<script src="/path/to/linq.js"></script>
<script src="/path/to/linq.jquery.js"></script>
 

이렇게 호출해 놓으면 그냥 사용이 가능하다. 대략의 사용 방법은 아래와 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var jsonArray = [
  { "user": { "id": 100, "screen_name": "d_linq" }, "text": "to objects" },
  { "user": { "id": 130, "screen_name": "c_bill" }, "text": "g" },
  { "user": { "id": 155, "screen_name": "b_mskk" }, "text": "kabushiki kaisha" },
  { "user": { "id": 301, "screen_name": "a_xbox" }, "text": "halo reach" }
];
 
// ["b_mskk:kabushiki kaisha", "c_bill:g", "d_linq:to objects"]
var queryResult = Enumerable.From(jsonArray)
                            .Where(function (x) { return x.user.id < 200 })
                            .OrderBy(function (x) { return x.user.screen_name })
                            .Select(function (x) { return x.user.screen_name + ':' + x.text })
                            .ToArray();
 

조금 더 편하게 람다 함수를 이용한다면 아래와 같이 사용할 수도 있다. 위와 아래는 동일한 결과를 가져온다.

1
2
3
4
5
6
7
// shortcut! string lambda selector
var queryResult2 = Enumerable.From(jsonArray)
                             .Where("$.user.id < 200")
                             .OrderBy("$.user.screen_name")
                             .Select("$.user.screen_name + ':' + $.text")
                             .ToArray();
 

마찬가지로 jQuery 플러그인을 사용한다면 더욱 간결한 표현을 쓸 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// $.Enumerable:
// 알럿 메시지로 짝수만 보여준다. 총 다섯번.
$.Enumerable.Range(1, 10).Where("$%2==0").ForEach("alert($)");
 
// TojQuery - Enumerable to jQuery
// #select1 이라고 하는 ID를 가진 드롭다운리스트에 옵션을 1부터 10까지 추가한다.
$.Enumerable.Range(1, 10)
            .Select(function (i) { return $("<option>").text(i)[0] })
            .TojQuery()
            .appendTo("#select1");
 
// toEnumerable - jQuery to Enumerable
// 1부터 10까지 추가한 값을 모두 더한다.
var sum = $("#select1").children()
                       .toEnumerable()
                       .Select("parseInt($.text())")
                       .Sum(); // 55
 

이렇게 쉽게 사용이 가능하다. 더 많은 레퍼런스는 이곳에서 확인할 수 있다.

IE6 – 8 에서 `linq.js` 사용하기 – `es5-shim`

문제는 역시나 IE6, IE7, IE8 에서 발생한다. 그 이유는 기본적인 자바스크립트 처리 엔진의 버전으로, EcmaScript 5 를 지원하지 않는 브라우저이기 때문이다. 즉, 배열 처리가 상당히 제한적이라서 이 linq.js가 제대로 동작하지 않는다.

하지만, 이럴 때 es5-shim 이라는 자바스크립트를 추가해 주면 IE6-8 에서도 이 linq.js를 사용할 수 있다.

만약 html5shiv를 사용한다면, 바로 밑에 이 es5-shim 라이브러리를 추가하도록 하자. 아니라면 modernizr 바로 밑에 추가해도 된다.

1
2
<script src="/path/to/es5-shim.min.js"></script>
 

단순히 이렇게 추가하는 것 만으로 linq.js의 기능들을 모두 사용할 수 있게 된다.

닷넷의 LINQ 기능을 자바스크립트로 이용하기