[포스코x코딩온] JavaScript - 문자열,배열 관련 메소드 / for, forOf, forEach문

JavaScript

문자열 관련 메소드

• length(): 문자열의 길이 확인
• toUpperCase(): 문자열을 모두 대문자로 변환
• toLocaleLowerCase(): 문자열을 모두 소문자로 변환
• indexOf(): 제일 처음에 나오는 인덱스를 불러옴
• lastIndexOf(): 제일 마지막에 나오는 인덱스 불러옴
• slice(startIndex [, endIndex]): start부터 end-1까지 불러온다. 매개변수로 음수값도 가능하다.
• replace(문자열1, 문자열2): 문자열1을 문자열2로 변경(제일 먼저 찾아지는 문자열1을 변경한다.)
• replaceAll(문자열1, 문자열2): 찾아지는 모든 문자열1을 변경한다.
• repeat(n): 문자열에 대해 n번 반복
• split(): 문자열을 내가 원하는 부분에서 자르고, 그걸 리스트로 만들어줌
• trim(): 좌우 공백 제거

    <script>
      //문자열 관련 메소드
      let str = "Happy day";

      //1. 문자열의 길이 확인
      console.log("length:", str.length); //,는 파라미터로 받고 + 는 문자열로 받는다.

      //2. 문자열을 모두 대문자, 소문자로 변환
      console.log("toUppserCase:", str.toUpperCase());
      console.log("toLowerCase:", str.toLocaleLowerCase());

      //3. Index를 가져오기
      console.log("index:", str.indexOf("y")); //제일 처음에 나오는 인덱스 가져옴.
      console.log("index:", str.lastIndexOf("y")); //제일 마지막에 나오는 인덱스 가져옴.

      //4. 문자열 자르기(첫번째 파라미터는 필수, 두번째는 선택)
      console.log("slice:", str.slice(0, 4)); //4번째 인덱스 바로 전까지 출력(Happ)

      //5. 바꾸기(replace)
      console.log("replace p -> a:", str.replace("p", "a")); //제일 먼저 찾아지는 문자만 변경된다.
      console.log("replace a -> k:", str.replaceAll("a", "k")); //찾아지는 모든 요소를 변경함.

      //6. 반복(repeat)
      console.log("repeat: ", str.repeat(10));

      //7. split: 문자열을 내가 원하는 부분에서 자르고, 그걸 리스트로 만들어줌
      console.log("split:", str.split(" "));
      console.log("split:", str.split("a")); //기준이 되는 값이 사라진다.
      console.log("split:", str.split()); //한글자씩 잘림.

      //8. trim(): 좌우 공백 제거
      console.log("trim 전:", str);
      console.log("trim 후:", str.trim());
    </script>

---

배열 관련 메소드

[] : 생략 가능

• push(): 마지막 요소 추가, 마지막 위치에 원하는 만큼 요소를 추가하고 추가된 이후의 리스트 길이를 반환해주는 함수
• pop(): 마지막 요소 삭제, 마지막 위치의 요소를 추출해 반환(추출하기 때문에 리스트에서는 삭제)
• unShift(): 맨 앞 요소 추가, 맨 앞 위치에 원하는 만큼 요소를 추가하고 추가된 이후의 리스트 길이를 반환
• shift(): 맨 앞 요소 삭제, 맨 앞 위치의 요소를 추출해 반환(추출하기 때문에 리스트에서 삭제)
• indexOf(찾을 요소, [검색을 시작할 인덱스]): 기본값 0 : 찾을 요소의 인덱스를 가져옴
• includes(찾을 요소, [검색을 시작할 인덱스]): 포함 유무(Boolean값), 요소를 찾고, 그에 대한 결과를 boolean타입으로 반환
• reverse(): 반전시키는 함수, 배열 순서를 뒤집어서 반환
• join([연결고리]):기본값 콤마 : 배열을 연결해서 문자열로 가져온다. 

메소드 체이닝

• 각각의 메소드를 연결해서 사용하는 개념
• 단, 사용한 메소드가 반환(return) 값을 가지고 있는 경우에만 사용이 가능하다.

    <script>
      //배열 관련 메소드
      //push(), pop()
      let days = ["M", "T", "W", "T", "F", "S", "S"];

      console.log("days:", days);
      //0. 길이
      console.log("length:", days.length);

      //1.마지막 요소 추가/삭제
      //push(): 마지막 요소 추가, 마지막 위치에 원하는 만큼 요소를 추가하고 추가된 이후의 리스트 길이를 반환해주는 함수
      let pushResult = days.push("z", "a");
      console.log("push:", days);
      console.log("pushResult:", pushResult);

      //pop(): 마지막 요소 삭제, 마지막 위치의 요소를 추출해 반환해준다.(추출하기 때문에 리스트에서는 삭제)
      let popResult = days.pop(); //: string | undefined -> 문자열 혹은 undefined를 반환하겠다.
      console.log("pop:", days);
      console.log("popResult: ", popResult);

      //2. 맨 앞 요소 추가/삭제
      //unshift(): 맨 앞 요소 추가, 맨 앞 위치에 원하는 만큼 요소를 추가하고 추가된 이후의 리스트 길이를 반환해주는 함수
      let unshiftResult = days.unshift("r", "e");
      console.log("unshift: ", days);
      console.log("unshiftResult: ", unshiftResult);

      //shift(): 맨 앞 요소 삭제, 맨 앞 위치의 요소를 추출해 반환해준다.(추출하기 때문에 리스트에서는 삭제)
      let shiftResult = days.shift();
      console.log("shift:", days);
      console.log("shiftResult:", shiftResult);

      //3. 인덱스 가져오기
      //indexOf(찾을 요소, [검색을 시작할 인덱스])  / [검색을 시작할 인덱스] <- 안써도 무방(기본값: 0)
      console.log("indexOf T: ", days.indexOf("T"));
      console.log("indexOf T2: ", days.indexOf("T", 3)); // 3번째 인덱스부터 찾기 시작

      //4. includes(): 포함 유무(Boolean값)
      //includes(찾을 요소, [검색을 시작할 인덱스])
      //includes(): 요소를 찾고, 그에 대한 결과를 boolean타입으로 반환.
      console.log("includes S:", days.includes("S"));
      console.log("includes B:", days.includes("B"));

      //5. reverse() : 반전시키는 함수
      console.log("reverse: ", days.reverse());

      //6. join(): 배열을 연결해서 문자열로 가져온다.
      //join([연결고리])  /[연결고리] <- 기본값:콤마
      console.log("join:", days.join());
      console.log("join &: ", days.join("&"));
      console.log("join:''", days.join(""));

      console.log("------------------------------------------");

      let str = "Holiday";
      //문자열 뒤집기: split으로 분할하고 -> reverse로 뒤집고 -> join으로 연결.
      let a = str.split("");
      console.log("a: ", a);
      let b = a.reverse();
      console.log("b: ", b);
      let c = b.join("");
      console.log("c: ", c);

      //너무 귀찮으니 한번에 하는 방법(간단히 코드 쓰기)(한번에 쓸 수 있다.)
      //메소드 체이닝
      console.log("total: ", str.split("").reverse().join(""));

      //shallow copy, deep copy
      let d = 1;
      let e = a;
    </script>

---

배열에서의 for

• for(초기식; 조건식; 증감식){명령} : 초기식 -> 조건식 확인 -> 명령 -> 증감 -> 조건 확인 -> 명령 -> 증감...
• for( 변수 of 배열) : 배열에 있는 요소를 하나씩 변수로 가져온다.
• 배열.forEach((변수, 인덱스, 배열)=>{}); : 변수에는 배열에 들어오는 요소가 하나씩 들어온다. / 인덱스에는 변수가 하나씩 들어올 때 그 변수의 인덱스 / 배열에는 현재 내가 돌고 있는 배열

    <script>
      //array를 반복문 돌린다.
      //for(초기식; 조건식; 증감식) {명령}
      //초기식 -> 조건식 확인 -> 명령 -> 증감 -> 조건확인 -> 명령 -> 증감...
      let fruits = ["apple", "banana", "melon", "cherry", "grape"];
      console.log("fruits: ", fruits);
      console.log("apple: ", fruits[0]); //특정한 값을 가져올 때

      //기본 for문
      for (let i = 0; i < fruits.length; i++) {
        console.log("i:", i);
        console.log("fruits[i]:", fruits[i]);
      }

      //for of
      //for (변수 of 배열): 배열에 있는 요소를 하나씩 변수로 가져온다.
      for (let f of fruits) {
        console.log("for-of:", f);
      }

      //forEach(함수)
      //배열.forEach((변수, 인덱스, 배열)=>{});
      //변수에는 배열에 들어오는 요소가 하나씩 들어온다.
      //인덱스에는 변수가 하나씩 들어올 때 그 변수의 인덱스
      //배열에는 현재 내가 돌고 있는 배열
      fruits.forEach((f, index, arr) => {
        console.log("------------------");
        console.log("f: ", f);
        console.log("index: ", index);
        console.log("arr: ", arr);
        console.log("------------------");
      });

      //콜백함수: 다른 함수에 parameter로 보내지는 함수
      //그 함수한데 원하는 작업하고, 콜백함수를 실행시켜라
      console.log("-----------");
      //callbackFn : (value: string, index: number, array: string[])
      //forEach에서 callback함수를 받는데, 그 때 받는 함수는 3개의 parameter를 가질 수 있다.
      //3개의 parameter는 각각 value, index, array
      //value: 반복을 돌 때 그 값
      //index: 배열에서 value의 index
      //array: 현재 돌고 있는 그 배열의 원본

      let function2 = (a,b,c) => {
        console.log("a: ",a);
        console.log("function2가 실행되었다.");
      };
      fruits.forEach(function2);
      //function1이 함수라고 할때, 콜백함수를 보낸다.
      //forEach 함수가 반복을 돌고, function1을 실행시켜라.
   
    </script>

---

1~100까지의 배열을 for문을 사용하여 만들고 해당 배열의 합을 for, for of, forEach문을 사용해서 구하기

    <script>
      //1~100까지의 배열을 for문을 사용해서 만들기
      let arr = [];
      for (let i = 0; i <= 100; i++) {
        arr.push(i);
      }

      //for문으로 합 구하기
      let sum = 0;
      for (let a = 0; a < arr.length; a++) {
        sum = sum + Number(arr[a]);
      }
      console.log("for문으로 구한 답:", sum);

      //forOf문으로 합 구하기
      let sum1 = 0;
      for (let b of arr) {
        sum1 = sum1 + Number(arr[b]);
      }
      console.log("forOf문으로 구한 답:", sum1);

      //forEach문으로 합 구하기
      let sum2 = 0;
      arr.forEach((c, index, arr) => {
        sum2 = sum2 + c;
      });
      console.log("forEach문으로 구한 답:", sum2);
    </script>

---

두 배열을 만들고 동일한 요소만을 가지는 배열 same과 서로 다른 요소만 가지는 배열 diff 만들기

    <script>
      let fruits1 = [
        "사과",
        "딸기",
        "파인애플",
        "수박",
        "참외",
        "오렌지",
        "자두",
        "망고",
      ];
      let fruits2 = ["수박", "사과", "참외", "오렌지", "파인애플", "망고"];

      let same = [];
      if (fruits1.indexOf(fruits2)) {
        same.push(fruits2);
      }
      console.log(same);

      //fruits1의 요소를 fruit로 받았을 때 fruits2가 아닌 fruit인 경우 diff배열에 추가한다.
      let diff = fruits1.filter((fruit) => !fruits2.includes(fruit));
      console.log(diff);
    </script>

---

Github코드(230712 폴더): https://github.com/DongHo-Kang/KDT-8-web.git

GitHub - DongHo-Kang/KDT-8-web