javaScript

//047, p105

* 배열.forEach(콜백함수) : 배열의 요소 데이터 콜백함수로 실행
	- 주어진 콜백함수를 사용해 배열의 요소를 순서대로 처리한다.
    - 콜백함수는 해당요소 데이터, 인덱스, 기존배열정보를 가져온다.
    - 콜백함수에서 인덱스와 기존배열정보는 생략가능
    
const array = ['a', 'd', 'v'];

array.forEach((value, index) => {
  // 인덱스와 값을 순서대로 출력
  console.log(index, value);
});

// 결과 : 0 'a', 1 'd', 2 'v'

* forEach()는 for, for...of의 루프와 달리 map(), filter() 등의 반환값을 그대로 루프처리 할 수 있다.

// 061, p128

* 배열.map(콜백함수) : 콜백함수로 새로운 배열생성
	- map()함수는 배열에서 요소를 추출하여 새로운 배열을 생성한다. 또한, 배열요소를 하나씩 처리하기 때문에 배열의 루프 처리 작업에도 활용되며 각 요소는 인수로 전달된 콜백함수에 의해 처리된다. map()은 forEach()와 비슷하지만 반환값이 존재한다.

const idList = [4, 10, 20];
const userIdList = idList.map((value) => `userid_${value}`);

console.log(userIdList);

// 결과 : ["userid_4", "userid_10", "userid_20"]


const apiResponseData = [
  {
    id: 10,
    name: 'aa'
  },
  {
    id: 21,
    name: 'dd'
  },
  {
    id: 31,
    name: 'gg'
  }
];
const idList = apiResponseData.map((value) => value.id);
// const idList = apiResponseData.map(value => {return (value.id)}); 이렇게도 작성가능
console.log(idList);
// 결과: [10,21,31]

// 062, p130

* 배열.filter(콜백함수) : 콜백함수 조건을 만족하는 데이터의 배열생성
	- filter()는 콜백함수 조건에 만족하는 요소들을 새로운 배열로 생성한다.

const newArray = [10,20,30,40].filter((value) => value >= 30);
console.log(newArray);

// [30,40]

// 161, p332

* 텍스트박스값 읽어오기 input, text
- input요소의 type 속성을 text로 설정하면 '텍스트입력폼이 표시'된다.
- 텍스트 입력 폼은 유저로부터 임의의 텍스트를 입력받는다, 자바스크립트는 value 속성으로 요소를 참조하여 데이터값을 확인할 수 있고 value 속성은 string


//HTML
<input
  id="myText"
  type="text"
  value="안녕하세요"
/>
    
//JavaScript
const element = document.querySelector('#myText');
const value = element.value;
console.log(value);