[JavaScript] 데이터바인딩/ sort()/ filter()/ map()

/*코딩애플 유료강의를 듣고 기록하는 포스팅*/

 

 

데이터 바인딩

웹서비스 개발방식

• 서버가 html 파일을 완성해서 유저에게 보내는 방식
• 서버가 빈 html 파일에 데이터를 보냄 (채워넣는 작업은 브라우저한테 시킴=> 자바스크립트를 이용해서)

서버에서 데이터를 가져오는 방법은 Ajax를 배워야 한다.

데이터 바인딩이란 웹서비스 개발방식에 적은 두가지 방법 중 두번째에 해당한다.

즉, 서버가 보낸 사이트의 데이터를 html에 넣는 작업이다.

var example = [{
        price: 5000,
        title: 'Example1'
            },
    {
        price: 50000,
        title: 'Example2'
            },
        ]
$('.title').eq(0).html(example[0].title); //출력값: Example1
$('.price').eq(0).html('가격 : ' + products[0].price); //출력값:  가격 : 5000

마지막 두 코드가 데이터 바인딩

 

---

sort() 함수

array 정렬할 때 sort() 함수를 사용한다.

var array = [10,4,7,6,1];
array.sort(function(a,b){
    return a - b //오름차순
});

sort() 함수를 그냥 사용하게 되면 문자정렬로 인해 1, 10, 4, 6, 7 순으로 나오게 된다. 

그래서 함수 안에 return a - b를 넣어 오름차순을 만들어준다.

이는 자바스크립트를 만든 사람이 정해놓은 규칙이기 때문에 이해보단 암기하자. 

 

sort() 함수의 동작 원리

• 파라미터로 작성된 a, b는 array 안의 데이터들
• a - b를 했을 때 양수면 a는 오른쪽으로 b는 왼쪽으로 보냄
• a - b를 했을 째 음수면 a는 왼쪽으로 b는 오른쪽으로 보냄

이렇게 배열에서 오른쪽 왼쪽으로 보내다보면 오름차순으로 정렬이 가능하게 된다. 

 

내림차순

array.sort(function(a,b){
    return b - a //내림차순
});

 

abc순/ 가나다순 정렬: 그냥 array 써주면 됨

가나다순을 역순으로 출력하고 싶을 땐 아래의 코드를 사용하면 된다.

var array = ['나', '라', '가', '다', '마'];
array.sort(function (a, b) {
    if (a > b) return -1;
    if (b > a) return 1;
    return 0;
});

 

함수에서의 return의 역할을 2가지로

• 데이터를 반환하고 강제종료된다.
• 재귀함수에서 종료조건으로 쓴다. (재귀함수는 함수가 자신을 다시 호출하는 구조로 계속 반복됨)

여기서 return을 써주면서 가~마를 계속 a, b에 넣어 비교를 하는 듯하다.

 

 

products라는 변수가 있고 그 변수에는 여러 객체로 구성된 배열이 저장되어 있는데 그 중 price 값을 가져와 오름차순으로 정렬시키고 싶을 때, sort() 함수 안에는 어떤 코드를 짜야할까?

return a.price - b.price;

a, b는 배열 속 하나 하나의 데이터이고, 그 데이터 중 price값만을 가져와야 하니까 a.price를 쓰는 것이다.

만약 지금까지의 내용들로 코드를 짠 뛰 오름차순이라는 버튼을 만들어 그 버튼을 클릭하면 오름차순으로 변하게 만든다면 html상에서는 아무것도 변하지 않을 것이다.

하지만 개발자 도구의 콘솔창에서 배열을 확인해보면 배열은 오름차순으로 변경되어 있는 걸 볼 수 있다.

이는 우리가 배열만 정렬해놓고 데이터 바인딩을 안 해줬기 때문이다.

우리는 배열을 정렬해 놓은 뒤 꼭! 데이터를 보여주게 하는 코드도 작성해주어야 한다.

$('#sort').click(function () {
    products.sort(function (a,b) {
        return a.price - b.price;
    })
    $('.title').eq(0).html(products[0].title);
});

이렇게 click의 콜백함수 안에 코드를 작성해두면 된다.

(콜백함수는 간단하게 말하면 하나의 이벤트/함수가 실행한 뒤에 실행되는 함수를 뜻한다. call back)

 

---

filter, map 함수

filter: 말 그대로 조건식에 의해 필터링하는 함수

map: array 자료에 전부 적용하고 싶을 때 쓰는 함수

sort 함수와 쓰는 방식이 약간 다른데 sort 함수는 새로운 변수를 선언할 필요가 없지만 이 두 함수는 사용하기 전 새로운 변수 하나를 선언해주고 그 변수에 저장한다.

var array = [3,5,76,7,34,4]
var filterArray = array.filter(function(a){
    return a < 30;
}) //출력값: 3, 5, 7, 4

var mapArray = array.map(function(a){
    return a * 2;
}) //출력값: 6, 10, 152, 14, 68, 8

 

버튼 클릭으로 4만원 이하의 품목만 나타나게 하는 코드를 짜보자.

그리고 상품의 개수만큼 html을 자바스크립트로 작성해보자.

$('#filter').click(function(){
    var 새상품 = products.filter(function(a){
        return a.price <= 40000
    });

    var template = `<div>상품</div>`;
    $('.card-group').append(template);
    var template = `<div>상품</div>`;
    $('.card-group').append(template);
    var template = `<div>상품</div>`;
    $('.card-group').append(template);
})

아래의 template 변수는 계속 반복되고 있으니 이를 반복문을 바꿔보자. (구현하고 확장하는 단계)

$('#filter').click(function(){
    var 새상품 = products.filter(function(a){
        return a.price <= 40000
    });

    새상품.forEach(function(a){
        var template = `<div>${a.title} ${a.price}</div>`;
        $('.card-group').append(template); 
    })
});

코드를 짤 때 일단 구현 먼저 해놓고 if문, for문 등의 확장성을 생각해보자.