JSP - 12 함수 (map(), prop())

$("#relCategory").on("change", function(){
    // 선택된 관련분류를 배열로 만들고 이를, (쉼표)로 구분하여 합침
    // item -> 람다식.아무이름 써도 괜찮다 item=option:selected
    let text = $('#relCategory option:selected').toArray().map(item=>item.text).join(",");
    // 선택된 관련분류 값을 확인
    console.log("text : " + text);

    // 선택된 관련분류 확인의 선택을 초기화 함
    $('relCategoryConfirm option:selected').prop('selected', false);
    // 선택된 관련분류 값(값1,값2,값3)을 ,(쉼표)로 나누어 반복처리
    $.each(text.split(","), function(i,e){
        // 값1, 값2, 값3에 해당하면 선택된 것으로 처리
        $("#relCategoryConfirm option[value='"+e+"']").prop('selected',true);
    });
});

$('#relCategory').on('change', function(){
    let text = $('#relCategory option:selected').toArray().map(item=>item)
})

1. Array.map() 은 배열을 꺼낼 때 for문을 사용하지 않고 꺼낼 때 용이하고 

각각의 요소를 호출하여 값을 변환할 수 있게 해준다.

 

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]

 

객체 배열에서는 배열을 합치는 것도 가능하다.

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})

 

2. prop() - 선택자의 첫번째 요소를 가져온다 .

속성을 가져오나 js에서의 속성(프로퍼티)을 가져오고 html의 attribute를 가져오는 건 아니다.

 

html의 속성은  name=value 쌍으로 가져오고, html의 페이지에서 제공되는 요소를 가져오는 것이다.

 

예를 들어 $('a').attr('href') 는 링크를 가져오지만, $('a').prop('href')는 링크의 주소를 가져오게 된다.