array

//배열추가 Array.push() //배열의 끝에 요소추가
const a = ['b','c','d'];
const ab = a.push('p')

console.log(ab) //배열의 새로운 lenght
console.log(a) //배열 전체 반환

a.push('o', 't')
console.log(a)

// 두개의 배열합치기
//첫번째 배열에 두번째배열 합치기 // = c.push('o','p','t)
const c = ['b','c','d'];
const d = ['o','p','t'];

Array.prototype.push.apply(c,d)
console.log(c)

//배열추가 Array.unshift() //배열의 첫번째에 요소추가
const u = ['b','c','d'];

u.unshift('t','o')
console.log(u)

// u.unshift([l,w]); //오류
// console.log(u)

u.unshift([a]);  //a배열을 맨앞에 추가
console.log(u)

u.unshift([0,2]); //[0,2]배열 맨앞에 추가
console.log(u)

배열추가삭제 Array.splice() //기존 요소 삭제or수정 새 요소 추가
const s = ['b','c','d'];
s.splice(1,0,'a') //index 1에, 0개의 요소 삭제, 'a'요소추가
console.log(s)

const b = ['b','c','d','u','p'];
b.splice(2,2,'m','n') //index 2에, 2개의 요소 삭제, m','n'요소추가
console.log(b)

//배열삭제 Array.pop() //배열의 맨끝값 제거
const poplist = ['a','b','c','d']
poplist.pop() //제거된 값 반환 //const a = poplist.pop()
console.log(poplist) //제거되고 난 후의 값 반환

//배열삭제 Array.shift() //배열의 맨앞값 제거
const shiftlist = ['a','b','c','d']
shiftlist.shift() //제거된 값 반환
console.log(shiftlist) //제거되고 난 후의 값 반환

//새배열 만들기 Array.split() //기준이되는 텍스트로 잘라서 새배열 반환
const num = "apple banana orange";

const arr = num.split();
console.log(arr)
console.log(arr.length)

const strr = num.split(" "); //(스페이스)문자열을 각 단어별로 잘라서 반환
console.log(strr) //전체 반환
console.log(strr[0]) //인덱스0번만 반환

const app = num.split(""); //문자열을 글자로 잘라서 반환
console.log(app) //전체 반환
console.log(app[5]) //인덱스5는 space여서 빈배열

const ppnum = "apple,banana,orange";

const pp = ppnum.split(","); //문자열을 text ','로 잘라서 반환
console.log(pp) //전체 반환

const li = ppnum.split(",",2);
//문자열을 text ','로 자르고 limit값인 2개의 배열만 반환
console.log(li) //전체 반환
console.log(li[2]) //반환된 배열의 index 2는 없기 때문에 undefined

//새배열 만들기 Array.concat() //기존배열에 얕은복사 후 뒤에 새요소 추가 -> 새배열 반환
const con =['a','t','u']
const cat = con.concat(['b','n'])
console.log(cat)

const aa = con.concat('b','n')
console.log(aa)

const bb = con.concat('b','n',['f','m'])
console.log(bb)

//새 문자열 만들기 Array.join()
//배열의 요소를 문자열로 바꾸고, 인자로 받은 text로 연결하여 하나의 문자열로 반환
const jointest = ["c", "b", "nn", "io"];

console.log(jointest.join())

console.log(jointest.join(''))

console.log(jointest.join('/'))

//새 문자열 만들기 Array.slice()
//배열의 인덱스 값을 이용해 배열의 요소 빼내기
const slicetest = ["aa","cd","rf","dd"];

const result = slicetest.slice(1) //인덱스는 1부터 끝까지 반환(2인자는 정해주지 않음)
console.log(result)

const result1 = slicetest.slice(1, 2)//인덱스는 1부터 시작 2이전까지의 데이터반환
console.log(result1)

const result2 = slicetest.slice(1, 3) //인덱스는 1부터 시작 3이전까지의 데이터반환
console.log(result2)

const result3 = slicetest.slice(-2)//-는 뒤에서 부터 시작//인덱스-2부터 그뒤로 끝까지
console.log(result3)

const result4 = slicetest.slice(2, -1) //두번째 인자의 앞 인덱스 요소까지
console.log(result4)

//요소 뽑아내기 indexOf, lastIndexOf//배열에서 인수로 전달된 요소를 검색하여 인덱스번호 반환
const test = ["a","c","v","d","g"]

const re = test.indexOf("v")
const re2 = test.lastIndexOf("d")

console.log(re);
console.log(re2);

반복메서드
map

forEach //for문대체 반복문

reduce

filter
var testArray = [1,2,3,4,5];
const array = testArray.filter((element,index,array)=>{
  console.log(element)
  console.log(index)
  console.log(array)
})

![https://velog.velcdn.com/images%2Fjaewon97%2Fpost%2Faf3b50d4-86f2-4e4c-8748-7be1ab6a16be%2Fimage.png%5D(https%3A%2F%2Fimages.velog.io%2Fimages%2Fjaewon97%2Fpost%2Faf3b50d4-86f2-4e4c-8748-7be1ab6a16be%2Fimage.png)

1. 값을 받아서 활용해줄 checkedList는 빈 배열이기 때문에 if/else문을 이용해여 배열의 값을 넣어줘야함
2. 첫 onChangeListColor함수가 실행될때 클릭된 해당 value값이 빈배열인 checkedList로 들어감(if조건에 해당하지 않기 때문에 else조건부터 돌게된다)
3. checkbox로 들어온 데이터를 checkedList에 바로 push하고 싶으나 불가능하기 때문에 slice(얕은복사)를 이용하여 새 변수(addedList)에 할당해 준다
4. 할당된 데이터(addedList)가 setCheckedList 됨
5. 이런식으로 담긴 데이터 값과 또다시 클릭된 값이 같을 때 버튼을 꺼주는 로직 => IF문
6. (map과 사용이 비슷한)find메서드를 이용해 setCheckedList에 있는 값과 다시 새롭게 클릭된 값을 비교한다
7. 값이 같다면 filter메서드를 이용해 해당 값을 제외한 나머지 값만 리턴해준다

  else {
      const addedList = checkedList.slice(); //slice = 얕은복사
      addedList.push(checkbox);
      setCheckedList(addedList);

   // 스프레드 연산자로 바꿔보기
  //setCheckedList([checkbox, ...checkedList]);
    }

이중배열 -> 1차원배열로 만들기

1. 큰데이터 이중 map돌리기 = 결과값 allMember
2. 빈배열 users 만들기 (1차원으로 만들어줄 배열)
3. 결과값 allMember를 concat을 이용해 빈배열 users로 넣기

const allMember = this.data.teamData.map((data) => {
                    if (data.teamMembers) {
                        return data.teamMembers?.map((user) => {
                            return user.user;
                        });
                    } else {
                        return [];
                    }
                });

                const users: Entity.User[] = [];
                const newArr = users.concat(...allMember);

Array Method 배열 메서드

배열(Array)은 타입 객체로 프로퍼티(Array.prototype)를 상속받는다.

01. 수정 메서드

• 프로퍼티 원본 배열을 바로 수정, 반환한다.

01-1 push 메서드

• 배열의 마지막 부분, 즉 꼬리에 요소들을 추가한 다음 그 배열의 길이를 반환한다.

const city = ["서울","인천","부산","울산"];

#요소 한 개 추가
city.push("충주");
console.log(city); //["서울","인천","부산","울산","충주"]

#요소를 두 개 이상 추가
const city = ["서울","인천","부산","울산"];

city.push("충주","광주");
console.log(city); //["서울","인천","부산","울산","충주","광주"]

01-2 pop 메서드

• 배열의 마지막 요소가 제거되고, 마지막 요소의 값을 반환한다.

const city = ["서울","인천","부산","울산"];

city.pop();
console.log(city);//["엄마","아빠","할머니"]

01-3 shift 메서드

• 배열의 첫번째 요소가 제거되고, 나머지 요소의 값을 반환한다.

const city = ["서울","인천","부산","울산"];

city.shift();
console.log(city);//["인천","부산","울산"]

01-4 unshift 메서드

• 배열의 첫번째 요소 추가 후 요소의 끝까지 반환한다.

const city = ["서울","인천","부산","울산"];

city.unshift();
console.log(city);//["제주","서울","인천","부산","울산"]

01-5 splice 메서드

• 기존 배열의 요소를 삭제 또는 교체하고 새 요소를 추가하여 배열의 내용을 변경하여 반환한다.splice(수정을 시작할 위치 인덱스 값,삭제 할 요소의 개수,삽입 할 요소)배열 👉 배열

const city = ["서울","인천","부산","울산"];
city.splice(1, 0, "제주");
// inserts at index 1
console.log(city );
// expected output: Array ["서울", "제주", "인천","부산","울산"]

city.splice(4, 1, "광주");
// replaces 1 element at index 4
console.log(city);
// expected output: Array ["서울", "제주", "인천","부산","광주"]

01-6 split 메서드

• 기준이 되는 텍스트로 분리하여 여러개의 값을 가진 배열로 변환 후 반환한다.string.split(separator, limit)👉 문자열을 'separator'로 잘라서,'limit' 크기 이하의 배열에 잘라진 문자열을 저장하여 리턴한다.문자열 👉 배열

//#파라미터를 입력하지 않은 경우
const str = "apple banana orange";
const arr = str.split();

document.writeln(arr); // apple banana orange
document.writeln(arr.length); // 1
//파라미터로 아무것도 전달하지 않으면 문자열 전체를 length 1인 배열에 담아서 리턴한다.

//#단어별로 잘라서 배열에 담기
const str = "apple banana orange";
const arr = str.split(" ");

document.writeln(arr.length); // 3
document.writeln(arr[0]); // apple
document.writeln(arr[1]); // banana
document.writeln(arr[2]); // orange
//separator로 " "(스페이스)를 지정하면, 문자열을 구분자로 잘라서 각각의 잘라진 조각들을 배열에 저장하여 리턴한다.

//#글자별로 잘라서 배열에 담기
const str = "a b c";
const arr = str.split("");

document.writeln(arr.length); // 5
document.writeln(arr[0]); // a
document.writeln(arr[1]); // ' '(space)
document.writeln(arr[2]); // b
document.writeln(arr[3]); // ' '(space)
document.writeln(arr[4]); // c
//separator로 ""(length가 0인 문자열)을 전달하면, 문자열을 각각의 문자별로 잘라서, 한 글자씩(공백 포함) 배열에 저장하여 리턴합니다.

//#특정 구분자로 잘라서 배열에 담기
const str = "apple,banana,orange";
const arr = str.split(",");

document.writeln(arr.length); // 3
document.writeln(arr[0]); // apple
document.writeln(arr[1]); // banana
document.writeln(arr[2]); // orange
//separator(여기서는 ',')를 지정하여, 문자열을 separator로 잘라서 만들어진 조각들을 배열에 담아서 리턴하였습니다.

//#limit값 지정하기
const str = "apple,banana,orange";
const arr = str.split(",", 2);

document.writeln(arr.length); // 2
document.writeln(arr[0]); // apple
document.writeln(arr[1]); // banana
document.writeln(arr[2]); // undefined
//두번째 파라미터인 limit 값을 지정하였다.
//위의 예제에서 문자열을 ','로 자르면 총 3개의 배열이 만들어지지만, limit 값을 2로 지정하였기 때문에 2개의 배열만 생성되었습니다.

02.접근자 메서드

• 배열을 다른 모습으로 바꿔 새로운 배열을 반환하고 원래 배열은 수정하지 않는다.

02-1 join 메서드

• 배열의 모든 요소 값을 문자열로 바꾼 후에 인수로 받은 문자로 연결해 하나의 문자열로 반환한다.배열 👉 문자열

const ciry = ["서울", "인천", "부산", "울산"];

console.log(ciry.join());
// expected output: "서울,인천,부산,울산"

console.log(ciry.join(''));
// expected output: "서울인천부산울산"

console.log(ciry.join('-'));
// expected output: "서울-인천-부산-울산"

02-2 concat 메서드

• 인수로 받은 값을 그 배열의 요소로 추가해서 새로운 배열을 생성하여 반환한다.배열 👉 배열

const city = ["서울","인천","부산","울산"];

const result = city.concat(["제주", "광주"]);
console.log(result);
// ["서울","인천","부산","울산","제주","광주"]

//값을 여러개 추가할때
const city = ["서울","인천","부산","울산"];

const result = city.concat(["제주", "광주"],["충주","대전"]);
console.log(result);
// ["서울","인천","부산","울산","제주","광주","충주","대전"]

02-3 slice 메서드

• 배열의 일부 요소를 제거한 새로운 배열을 반환한다.

slice(요소를 꺼낼 시작 위치 인덱스 값,요소를 꺼낼 마지막 위치 인덱스 바로 이전 값)

💡 두번째 인수값은 해당 값 위치 인덱스의 바로 이전 값이다배열 👉 배열

const city = ["서울","인천","부산","울산"]; //인덱스는 0부터 시작

const result = city.slice(1, 3);
console.log(result); //["인천","부산"]

🧐 Assignment 문제

그 후 sliceCityFromAddress 함수를 구현해 주세요.

• sliceCityFromAddress 함수는 address 를 인자로 받습니다.
• address 는 주소를 나타내는 string 입니다.
• 주어진 주소가 어느 도시 인지를 찾아 해당 주소에서 도시 부분만 삭제한 새로운 주소를 리턴해 주세요.
• 도시는 무조건 "시" 로 끝납니다. 예를 들어, "서울시".
• "도" 와 "시" 는 주소에 한번 밖에 포함되어 있지 않습니다.
• 예를 들어, 다음과 같은 주소가 주어졌다면;

    "경기도 성남시 분당구 중앙공원로 53"

다음과 같은 값이 리턴되어야 합니다:

    "경기도 분당구 중앙공원로 53"

✍️ 풀이

function sliceCityFromAddress(address) {
  let firstChar = address.indexOf("도");
  let lastCity = address.indexOf("시");
  console.log(firstChar)
  console.log(lastCity)
  if (firstChar == -1 ) { //객체속에 'firstChar'가 없을때에,
    return address.slice(lastCity+2, address.length);
  } else {
    return address.slice(0, firstChar+2) + address.slice(lastCity+2, address.length);
  }
}
sliceCityFromAddress("경기도 성남시 분당구 중앙공원로 53")
//'경기도 분당구 중앙공원로 53'

02-4 indexOf와 lastIndexOf

• 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다.

중복되는 요소가 있는 경우, 첫번째 인덱스를 반환한다.해당하는 요소가 없는 경우, -1을 반환한다.indexOf는 인덱스가 작은 쪽부터 순서대로 검색한다.lastIndexOf는 인덱스가 큰 쪽부터 역순으로 검색한다.

const city = ["서울","인천","부산","제주","울산"];

const result = city.indexOf("인천");
const result2 = city.lastIndexOf("제주");

console.log(result); // 1
console.log(result2); // 3

03.반복 메서드

• 배열의 모든 요소를 순회하며 특정한 작업을 수행하거나,특정 조건을 만족하는 요소를 가져올 때, 사용하는 메서드이다.

03-1 forEach 메서드

• 배열의 각요소에 대한 callback실행인수로 받은 함수의 배열의 요소별로 한 번씩 실행한다.콜백함수를 인자로 받아 배열의 각 요소에 콜백 함수로 실행한다 => 아무값도 반환하지 않음구문값으로 받는 리턴값 없음콜백함수로 현재 다루고 있는 array를 변환할 수 있다 => 새 배열 xxxx

///3개의 인자를 받음 (하나씩 쓰는 요소1, 인덱스번호, 사용중인 배열)
const arr = [2, 3, 4, 5, 6];

count.forEach(function (v, i, a) {
  a[i] = v * v;   //ex) a[i] = 3 * 3
});
//function (vaule(요소의 값), index(1부터 배열 갯수), array(0부터 배열 순서))

console.log(count); // [4,9,16,25,36]

=================================================================

 data.forEach((team) => {
      if (team.Userdetail.id === userDetailData.id) {
      team.Userdetail.profileImage = userDetailData.profileImage;}
                        });

forEach기법은 for문 대신 사용하는 반복 메서드이다.return하는 것도 아무것도 없이 forEach함수를 탈출하고 싶을때 return을 사용한다.

03-2 map 메서드

• 배열의 각 요소에 대한 callback 실행결과를 모아 새 배열 리턴배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백 함수의 반환값(결과값)으로새로운 배열을 생성하여 반환한다.사용중인 array의 요소들을 호출해 사용 => 사용한 array와 동일한 사이드의 새로운 배열 생성메모리를 할당하고 리턴값 저장한다 => return값 자체를 반환함

배열을 순회하며 요소 값을 다른 값으로 맵핑하기 위한 함수이다.

👉 *(곱셈) 값 구하기

///3개의 인자를 받음 (하나씩 쓰는 요소1, 인덱스번호, 사용중인 배열)
const arr = [2, 3, 4, 5, 6];
const result = arr.map(function (x) {
  return 2 * x;
});

console.log(arr);

👉 객체 배열요소의 특정 프로퍼티값을 꺼내서 배열로 만들기

const city = [
  { name: "서울", count: 30 },
  { name: "대구", count: 12 },
  { name: "부산", count: 16 },
  { name: "광주", count: 6 }
];

const names = city.map((city) => city.name);
const counts = city.map((city) => city.count);
console.log(names); // ["서울","대구","부산","광주"]
console.log(counts);// [30,12,16,6]

🧐 Assignment 문제

1. moreThan100 함수를 구현해 주세요.

• 숫자로 구성된 배열을 인자로 받습니다.
• 100 보다 크거나 같으면, true 를
• 100 보다 작으면 false 로 요소를 변경하여, 새로운 배열을 return 해주세요.
• 예를 들어,

nums(input)가
[100, 9, 30, 7]
이라면
return은
[true, false, false, false]

✍️ 풀이

const moreThan100 = nums => {
  const numBer = nums.map(
    i => {if (i < 100) {
      return false;
    }
      return true;
    }
  )
   return numBer;
}
moreThan100([100, 9, 30, 7]);

2. formatDate 함수를 구현해 주세요.

• 날짜가 담긴 배열을 인자로 받습니다.
• 날짜의 data type은 string이며, 보내는 날짜 타입은 'YYYY-MM-DD' 입니다.
• 해당 날짜의 형식을 'YYYY년 MM월 DD일' 로 바꿔서, 새로운 배열을 return 해주세요.
• 예를 들어,

dates(input)가
['2019-03-21', '2019-04-21', '2019-05-21']
이라면
return은
['2019년 03월 21일', '2019년 04월 21일', '2019년 05월 21일']

✍️ 풀이

const formatDate = dates => {
  let str = dates.map(function(arr){
    let dates = arr.split('-');
    return dates[0] + "년 " + dates[1] + "월 " + dates[2] + "일";
  }
  )
  return str;
}
formatDate(['2019-03-21', '2019-04-21', '2019-05-21']);

03-3 reduce 메서드

• 배열의 값을 한개로 감소시키는 특징이 있다.두개의 매개변수인 initialValue를 통해서 반환 값을 자유롭게 지정하여 유연하게 사용가능하다.map, filter, find함수로 구현할 수 있는 기능은 모두 reduce 함수로 구현 가능하다.

👉 arr.reduce(callback[, initialValue])

*reduce 메서드의 인수

• callback : 합성 곱을 하는 함수
• initial : callback이 처음 호출되었을 때의 첫 번째 인수prev의 값(생략가능)

*callback 함수는 다음과 같은 인수를 받는다.

• previousValue : 이전 요소를 처리한 함수의 반환값 또는 initaial 첫번째 요소의 값.
• currentValue : 현재 처리하는 배열 요소의 값
• currentIndex : 현재 처리하는 배열 요소의 인덱스
• array : 메서드를 적용 중인 배열의 참조

var sum = arr.reduce( (pre, value, ide, arr) => {
  return pre + value;
});
consol.log(sum);```