[Java Script] forEach 함수, map(), jquery 사용

forEach 함수

var ForEach_Arr = [3, 3, 9, 8];
var ForEach_newArr = [];
ForEach_Arr.forEach((result) => {
  ForEach_newArr.push(result);
})
console.log(`2. ForEach_newArr : ${ForEach_newArr}`);

: 순번과 배열의 크기 정보를 사용하지 않는다.
0부터 배열의 크기만큼 반복하며 순서대로 배열 값을 반환한다.
반복문이 실행될 때마다 콜백 함수로 결괏값(result)을 받아 새로운 배열(ForEach_newArr)에 넣는다.

-> 출력 : 2. ForEach_newArr : 3,3,9,8

 

map() 함수

: forEach()와 마찬가지로 for문에서 사용하던 순번과 배열의 크기 변수를 사용하지 않지만 forEach()와 달리 return을 사용해 반환 값을 받을 수 있다.

var MapArr = [3,2,8,8];
let MapNewArr = MapArr.map(x => x);
console.log(`1. MapNewArr : ${MapNewArr}`);

let MapMultiArr = MapArr.map(x => x * 2);
console.log(`2. MapMultiArr : ${MapMultiArr}`);

var ObjArr = [{key: 'react', value:'200'},
              {key: '리액트', value:'TwoHundred'}];
let MapObjArr = ObjArr.map((obj, index) => {
    console.log((index + 3)+ ". obj : "+JSON.stringify(obj));
    var Obj = {};
    Obj[obj.key] = obj.value;
    return Obj;
});
console.log(`5. MapObjArr : ${JSON.stringify(MapObjArr)}`);

출력
1. MapNewArr : 3,2,8,8
2. MapMultiArr : 6,4,16,16
3. obj : {"key":"react","value":"200"}
4. obj : {"key":"리액트","value":"TwoHundred"}
5. MapObjArr : [{"react":"200"},{"리액트":"TwoHundred"}]

 

-> 기존 배열 MapArr에서 map() 함수를 사용해 순서대로 하나씩 요소에 접근해 가져온다.
이때마다 콜백 함수가 실행된다.
가져온 값을 변수 x에 넣고 그대로 반환해(x => x) 순서대로 쌓아 놓는다.
다 반복했다면 한 번에 새로운 배열(MapNewArr)에 저장한다.

 

* 화살표 함수는 return 구문을 생략할 수 있다.

 

jquery 사용

npm i jquery
import $ from 'jquery';

npm i jquery를 사용해 install 해주고 js 파일 위에 import를 해준다.

input_alert = (e) => {
    var input_val = $('#inputId').val();
    console.log(input_val);
    alert(input_val);
}

render() {
    return (
        <div>
            <h2>Study</h2>
            <input id='inputId' name='inputName' />
            <button id='buttonId' onClick={e => this.input_alert(e)}>Jquery Button</button>
        </div>
    )
}

-> jquery는 사용할 때 $ 기호를 붙여 사용해야 한다.
input 태그에 값을 입력하고 버튼을 누르면 input_alert 함수가 실행이 된다.
함수는 jquery 문법 $('#inputId')로 id값이 inputId인 <input> 태그에 접근한다.
input 태그의 value값을 가져와 input_val 변수에 저장하고 팝업 창으로 출력한다.