22.09.29.Thu - 배열의 메소드 유형

오늘의 요약 = 배열의 메소드 유형을 파악하자.

1. 배열의 데이터 추가,제거 메소드

• test

Array literation 에서 판가름

Array sort 복습

concat

• 배열끼리 묶어줄때
• ar1 = ar2.concat(ar3);
• ar1[ar2_data+ar3_data]

  const boys = [1,2,3];
  const girls = [4,5,6];
  const childerns = boys.concat(girls);
  //출력 값 = childerns = (6) [1, 2, 3, 4, 5, 6]

문자열 연결 연산

• 문자열 연결 연산시 컴퓨터는 자료값을 문자열로 처리하는 것을 이용

  let ar1 = [1,2,3] ; console.log(ar1); // 숫자 배열
  console.log(""+ ar1); // "1","2","3" 문자 string

Array splice

• index,select,add1,add2
• 배열주소,선택개수,변경 혹은 추가값

   ```js
   let fruits = ['apple','banana','orange','mango']; // 기본 배열
   // 변경 index를 선택,data 지울 개수 ,data 값
   // orange 를 kiwi 로 변경
   fruits.splice(2,1,'kiwi'); 
   // fruits.splice(2,1,'kiwi = (4) ['apple', 'banana', 'kiwi', 'mango']
   //오렌지 앞에 키위 파인애플 추가
   fruits.splice(2,0,'kiwi','PineApple');
   let senten =('fruits.splice(2,0,"kiwi","PineApple" 의 값은 =');
   console.log(senten + fruits);
   // fruits.splice(2,0,"kiwi","PineApple" 의 값은 =apple,banana,kiwi,PineApple,orange,mango
   ```

  ---

2.

• 배열의 메소드 중에서 매개 값을 함수로 줘야하는 경우
  • 종류가 무엇인지 안다.
  • 그 메소드의 기능을 알아두자.

스스로 학습하는 법

const numbers = [1,2,3,4,5];
let txt = '';

numbers.forEach(function(element,arrIndex,arrays){

     // 1단계 : arguments.length = 메소드가 매개값을 몇개 넘겨주는지 ,몇번 반복하는지.
     console.log(arguments.length);
     console.log('1_____________________________________________');
     // 1단계 : arguments.length = 메소드가 매개값을 몇개 넘겨주는지 ,몇번 반복하는지.

     // 2단계 : console.log(arguments[0]); == 각각의 매개 변수가 어떤 값이 넘어오는지 알 수있다.
     console.log(arguments[0]);
     console.log(arguments[1]);
     console.log(arguments[2]);
     console.log('2_____________________________________________');
     

     // 3단계 : 넘어오는 자료중 필요한 자료를 선택해서 용도에 맞게 작성한다.

     if (element % 2 == 1){
          console.log(element);
     }
     console.log('3_____________________________________________');

});
// 메소드 공부법 
// 1단계 : arguments.length = 메소드가 매개값을 몇개 넘겨주는지 알수 있다.
// 2단계 : console.log(arguments[0]); == 각각의 매개 변수가 어떤 값이 넘어오는지 알 수있다.
// 3단계 : 넘어오는 자료중 필요한 자료를 선택해서 용도에 맞게 작성한다.

---

3.

함수

• 함수는 정의와 호출의 과정을 갖는다.
  1. 함수를 만들고 (함수의 정의)
     • 함수의 이름은 함수를 담고 있는 변수 역할이다.
     • 변수는 재사용을 목적으로 사용.
  2. 만든 함수를 호출 해야만 한다. (이름 과 호출 연산자'()')
• js의 함수는 오버로딩을 지원하지 않는다.
  • 오버로딩이란(overloading)
    • 함수의 이름은 같으면서 매개변수의 개수가 다르거나,
      매개 변수의 타입이 다른 경우를 말한다.
    • function aaa(){},function aaa (변수1,변수2){}
    • 함수의 규칙이 엄격한것이 오버로딩이다.
  • js는 자유로워(?)서 함수을 호출 방식을 일정 선에서 작동한다. (좋게 말하면 자유,반대는 체계가 느슨)
  • ex)1
• 익명 함수라면 정의 되자 마자 호출이 되어야 한다.
  • function(){명령}();
  • 호출 연산자
    • ()
    • 콜백
• 매개 변수에 함수를 넣을수 있다.

매개 변수와 인수와의 관계 (arguments)

• 인수는 하나의 배열이다.

---

4. 함수 매개변수 와 메소드의 활용

JS 최고 기술 이력

• 라이브러리 사용 않고 싱글페이지 어플리케이션(SPA) 만들기.
• 라이브러리 (편의 프로그램)
  • react : 무겁다
  • vue : 가볍다 (썩시딩유)
• 순수 JS (Vanilla JS)

Array forEach

사용하는 쪽에서 함수를 넘겨주면 그 함수에게 배열의 개수만큼 반복해서
3개의 자료를 넘겨주겠다. (data,dataAdress,arrays)

넘겨주는 함수를 용도에 맞게 작성해서 넘겨주세요.

함수의 매개변수에 함수를 넣으면

• 사용자가 원하는 동작을 선택을 할 수있다. ex) 사칙연산 프로그램의 연산 기호를 선택

메소드를 강력하게 사용하는법

만들어진 메소드에 내가 원하는 방법을 함수로 만들어 메소드에 적용 하면 된다.

기존 메소드를 잘 사용하는 것은 도구를 잘 사용하는 사람이고,
메소드에 함수를 사용하여 원하는 값을 얻는 사람은 도구를 자신의 필요에 맞게 Custom하는 사람이다.

함수에 반환하는 값을 잘 선택해야한다. return 값을.
그것이 핵심.

params (매개변수)

순서가 제일 중요하다.
()안의 무엇을 적는지는 인간이 이해하기 위한 규칙으로 명명하는 것일뿐,
컴퓨터는 ()안의 쉼표를 기준으로 순서의 값만을 보면서 처리한다.

집중해야할 것은 매개변수 이름을 무엇으로 할지 보다는, 규칙을 만들고,
적절하게 사용하는 것이다

매개변수에는 함수도 들어올 수 있다. 함수를 부르는 매개변수 (계산기 프로그램의 연산 기호)

---

5.

실습

---

7.많은 메소드의 종류들을 개괄(대개 개,묶음 괄)적으로 알고. 조지자.

서버에서 가변적으로 생성할 html태그의 정보를 JSON의 형태로 제공을 해준다.
제공된 정보를 임의의 상자에 보관을 한다.

Set

• set이란 중복된 자료는 보관하지 않는 자료 구조이다.(중복불가 배열)
  • 중복 data 찾기 가능

---