getAttribute(),setAttribute()메서드/배열의고차원함수-forEach(),map(),filter(),find(),reduce(),isArray()

getAttribute(),setAttribute()메서드

웹 요소를 문서에 삽입할 때 태그 속성을 함께 사용하면 DOM트리에 속성노드가 추가되면서 

속성값이 저장된다. 이 때 속성에 접근하려면 getAttribute()메서드를 사용하고 

속성값을 수정하려면 setAttribute()메서드를 사용한다.

 

[기본형]

요소.getAttribute("속성명")

요소.setAttribute("속성명","바꿀 값") 

 

   <div id="pic">

      <img

        src="./img/image01.jpg"

        alt="풍경"

        id="girl"

        width="200"

        height="200"

      />

    </div>

    <script>

      function displaySrc() {

        //속성노드에 접근하려면 querySelector로 접근해야한다.

        let girl = document.querySelector('#girl'); //id="girl"인 요소 가져오기

        alert('이미지경로 : ' + girl.getAttribute('src')); //요소의 src속성에 접근

      }

      //id가 pic인 요소를 가져와서 클릭하면 displaySrc이벤트 핸들러 실행

      document.getElementById('pic').onclick = displaySrc;

      //id가 pic인 요소를 가져와서 마우스를 오버하면 옆에있는 이벤트 핸들러 실행

      //이때 src속성값을 다른 이미지로 바꿈

      document.getElementById('pic').onmouseover = () => {

        const girl = document.querySelector('#girl');

        girl.setAttribute('src', './img/image02.jpg');

      };

      //id가 pic인 요소에서 마우스가 벗어나면 원래 이미지로 바꾸기

      document.getElementById('pic').onmouseout = function () {

        const girl = document.querySelector('#girl');

        girl.setAttribute('src', './img/image01.jpg');

      };

    </script>

배열의 고차원함수

배열 안을 첫번째 요소부터 순환하면서 반복문처럼 접근하여 원하는 요소만 걸러내거나 

모든 요소에 동일한 이벤트 등을 등록하고 싶을 때 사용하는 함수이다.

배열의 고차원 함수는 배열의 메서드이며, 인수로 함수를 받는다는 특징이 있다.

이렇게 인수로 전달되는 함수를 '콜백함수'라고 부르며 익명함수 형태로 사용한다. 

 

1. forEach()★ ★ ★ ★ ★

forEach()메서드는 배열을 순회하여 각 요소를 처리할 때 사용한다.

배열에 반복문을 적용한 것처럼 첫번째 인덱스의 요소부터 차례로 접근하여 특정 코드를 실행하도록 만든다.

forEach()메서드의 첫 번째 매개변수에는 배열의 요소가 순차적으로 대입된다.

두 번째 매개변수에는 인덱스번호가 담기며 두 번째 매개변수부터는 생략이 가능하다.

세 번째 매개변수인 array 자리에는 forEach 함수를 호출한 배열이 들어갈 수 있다. 

이 매개변수를 이용해서 원본 배열에 접근할 수 있다. 

 

 

[기본형]

배열.forEach(function(element, index, array){코드;});   ---->익명함수 형태

배열.forEach((element, index)=>{코드;});   ----> 화살표함수 형태 

 

Tip. forEach는 기존 배열을 바꾸는 메서드이다. 

forEach메서드는 배열의 각 요소를 순회하며 해당 요소에 대해 어떤 동작을 수행시키고자 할 때 

굉장히 유용한 메서드이다. 이 함수는 반환값이 없으므로 각 요소를 처리하거나 어떤 작업을 수행하는 용도로 주로 활용된다.

 

1. 배열 요소를 출력하기 

2. 배열의 요소들을 합산하기 

3. 특정 조건을 만족하는 배열 요소 찾기

4. 배열 요소들을 문자열로 변환하여 새로운 배열 생성하기 

5. 배열 요소들의 특정 속성 변경하기 

    <h3 class="title">제목1</h3>

    <h3 class="title">제목2</h3>

    <h3 class="title">제목3</h3>

    <script>

      const arr1 = ['가', '나', '다'];

      arr1.forEach(function (element) {

        console.log(element);

      });

      const arr2 = document.getElementsByClassName('title');

      //forEach는 배열에만 사용할 수 있다. 하지만 getElementsBy~로 데려오는

      //태그요소는 HTMLCollection이라는 유사배열안에 저장된다.

      //이 안에는 태그의 모양만 들어있기때문에 노드로 접근이 불가능하다.

      //그래서 forEach문을 올바르게 실행시키려면 Array.from(배열)을 붙여줘야한다.

      //Array.from(배열)은 유사 배열을 배열로 바꾸겠다는 뜻이다.

      Array.from(arr2).forEach((element) => console.log(element));

      const arr3 = document.querySelectorAll('.title');

      //nodeList에 저장된 요소들은 Array.from(배열)이 없어도 forEach메서드를 사용가능

      arr3.forEach((ele, index) => {

        console.log('요소 : ', ele, ', 인덱스 번호 : ', index);

        ele.style.color = 'blue';

      });

    </script>

2. map()★ ★ ★ ★ ★

배열의 각 요소를 순회하여 콜백함수를 적용한 결과를 모아 새로운 배열로 반환하는 함수. 이 때 원본 배열은 변경되지 않는다.  map은 mapping의 약자로, 어떤 값을 다른 값에 대응시키는 과정을 의미하며, 여러 분야에서 사용되는 단어이다. 

 

[기본형]

배열.map(function(element,index,array){ element; })

 

-element : 배열의 요소들이 순차적으로 대입된다. 현재 처리할 요소가 들어있다.

-index(생략가능) : 처리할 현재 요소의 index번호. 이 매개변수를 이용하면 현재 요소의 index에 접근할 수 있다. 

-array(생략가능) : .map()함수를 호출한 배열. 원본 배열에 접근할 때 사용한다.

<script>

      const number = [1, 2, 3, 4, 5];

      // doubleNum : 매핑된 새로운 배열을 반환받는 변수

      const doubleNum = number.map(function (num) {

        return num * 2; //num : 현재 배열에 접근한 요소

      });

      console.log(doubleNum); //[2, 4, 6, 8, 10]

      const fruits = ['Banana', 'Orange', 'Apple'];

      const uppercase = fruits.map((과일) => 과일.toUpperCase());

      console.log(uppercase);

    </script>

3. filter()

배열의 요소를 순회하면서 콜백함수를 이용하여 원하는 조건에 따라 필터링하는 함수이다.

필터링된 배열을 반환한다.

원하는 조건에 맞는 요소들만으로 필터링된 배열을 생성하기 위해 사용한다.

filter()메서드의 콜백함수는 각 요소에 대해 조건을 평가한다. 

요소를 필터링하려면 true를, 필터링하지 않으려면 false값을 return으로 반환해야 한다. 

filter()함수는 true를 반환한 요소들을 모아서 새로운 배열로 반환을 해준다. 

 

[기본형]

배열.filter(function(element,index,array){ 코드 });

배열.filter(function(element,index,array) => { 코드 });

 

-element : 배열에서 현재 처리중인 요소. 첫번째 요소부터 순차적으로 대입

-index(생략 가능) : 현재 처리 중인 요소의 인덱스 번호

-array(생략 가능) : filter()함수를 호출한 배열자체 

 

4. find()

배열에서 특정 조건을 만족하는 요소를 찾아 첫 번째 요소를 반환하는 함수이다. 

배열의 각 요소에 대해 콜백 함수를 사용하여 원하는 조건의 요소를 찾는다. 

배열에서 특정 요소를 찾을 때 유용한 함수이다.

 

배열의 요소를 순환하면서 매개변수 element에 각 요소가 대입된다.

콜백함수가 실행될 때 콜백함수 내에서 정의한 조건을 확인한 후에 조건이 true로 평가되면

해당 요소를 찾은 것으로 간주한다.

find()함수는 조건을 만족하는 첫번째 요소를 찾으면 배열 순회를 중단하고 해당 요소를 반환 후 종료한다. 

 

[기본형]

배열.find(function(element, index, array){코드});

배열.find(element,index,array) => {코드});

<script>

      /* filter() 함수 */

      //필터링할 배열

      const num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

      //여러 번 사용할 콜백 함수 (일반 함수로 미리 정의)

      function isEven(value) {

        return value % 2 === 0; //짝수면 true를 반환

      }

      //filter의 인수로 미리 정의해둔 isEven함수 전달

      const result = num.filter(isEven);

      console.log(result);

      const num2 = [1, 2, 2, 3, 4, 4, 5];

      const filterNumber = num2.filter((element, index, arr) => {

        //현재 요소가 이전에 등장하지 않은 경우 true를 반환

        return arr.indexOf(element) === index;

      });

      console.log(filterNumber);

      /* find()함수 */

      const color = ['tomato', 'skyblue', 'orange'];

      //배열의 요소가 skyblue와 같은 요소를 찾아 colorValue에 반환

      let colorValue = color.find((color) => color === 'skyblue');

      console.log(colorValue);

    </script>

 

5. reduce()

='누산기'라고 부르며 배열의 모든 요소에 콜백함수를 적용하여 하나의 결과값을 생성하는 함수이다.

 

[기본형]

배열.reduce(function(accumulator, currentValue, currentIndex, array){ 코드 })

 

-accumulator : 이전 반복의 반환값을 저장한 매개변수. 첫번째 반복에서는 initialValue(초기값)을 가진다.

-currentValue : 현재 반복에서 처리 중인 배열의 요소값을 갖는다.

-currentIndex(생략가능) : 현재 처리 중인 배열요소의 인덱스값

-array(생략가능) : reduce함수를 호출한 배열 자체 

 

6. isArray()

전달된 인수가 배열이면 true를, 아니면 false를 반환하는 함수이다.

 

[기본형]

Array.isArray(객체 또는 배열);

 

<script>

      const num = [0, 1, 2, 3, 4, 5];

      const result = num.reduce((total, current) => {

        //이전의 결괏값 + 배열의 현재 요소값

        console.log('초깃값:', total); //total의 초깃값은 배열의 첫 번째 요소에 해당하는 값이 들어간다.

        return total + current;

      });

      console.log(result);

      /* isArray() */

      const arr = [1, 2, 3];

      const obj = { name: '김땡땡' };

      console.log(Array.isArray(arr)); //arr는 배열이므로 true반환

      console.log(Array.isArray(obj)); //obj는 배열이 아니므로 false를 반환

    </script>