[KDT 포스코x코딩온 10] 웹 풀스택 과정 회고록 (7) | Javascript

KDT 포스코X코딩온 웹 풀스택 과정 10기

 

 

---

 

문자열 관리 메서드

 

메서드와 속성 차이?

 

속성은 괄호가 없음 메서드는 괄호가 있음

 

 

length : 문자열의 길이를 반환해 주는 속성

        let str = " happy day~! "
        // 문자열 길이를 확인하는 속성
        console.log(str.length) // 13

---

      let str = " happy day~! ";
      console.log(str.toUpperCase()); // HAPPY DAY~! 
      console.log(str.toLowerCase()) // happy day~!

 

toUpperCase() : 문자를 대문자로 변경한다.

toLowerCase() : 문자를 소문자로 변경한다.

 

---

      function upper(n) {
        console.log(n.toUpperCase(n));
        return;
      }
      console.log(upper(" happy day~! "));

 

 

indexOf('') : 매개변수로 문자열을 받아서 몇 번째 인덱스인지 숫자 반환

      let str = " happy day!~ ";

      console.log(str.indexOf("p")); // 3

 

slice(startldx [, endldx]) start부터 end-1까지 슬라이싱(잘라냄), 매개변수로 음수값도 가능

 

      console.log(str.slice(2)); // 2번째 포함하고 끝까지 // appy day!~
      console.log(str.slice(-3)); // 끝에서 3번째부터 !~
      console.log(str.slice(2, 5)); // app 2번째에서 4번째까지

 

 

replace(문자열 1, 문자열 2) : 문자열 1을 문자열 2로 변경 [ 한 가지만 ]

        // 5. 바꾸기
        // replace : 제일 먼저 찾아지는 한 친구만 바뀜.
        console.log("replace p ->a:", str.replace('p','a')); // Haapy day~!
        console.log("replaceAll a->k:", str.replaceAll('a','k')); // Hkppy dky~!

 

 

replace(문자열 1, 문자열 2) : 문자열 1을 전부 찾아서 문자열 2로 변경

        // 5. 바꾸기
        // replace : 제일 먼저 찾아지는 한 친구만 바뀜.
        console.log("replace p ->a:", str.replace('p','a')); // Haapy day~!
        console.log("replaceAll a->k:", str.replaceAll('a','k')); // Hkppy dky~!

 

repeat(n) : 문자열에 대해 n번 반복

        // 6. 반복
        console.log("repeat", str.repeat(5)); // 5번반복

 

split() : 매개변수로 들어온 문자열을 기준으로 str을 쪼개서 배열로 저장

str.split('') : 한 글자씩 저장

str.split(' ') :배열로저장

        // 7. split: 문자열을 내가 원하는 부분에서 자르고, 그걸 배열로 만들어줌 
        console.log("split:", str.split('')); //[' ', 'H', 'a', 'p', 'p', 'y', ' ', 'd', 'a', 'y', '~', '!', ' ']
        console.log("split:", str.split(' ')); // ['', 'Happy', 'day~!', '']
        console.log("split:", str.split('a')); // [' H', 'ppy d', 'y~

 

trim() : 문자열의 양끝 공백 없애기

        // 8. trim: 좌우 공백 제거
        console.log('trim: ', str.trim()); //Happy day~!
        console.log('trim 후', str.length); //trim 후 13

---

 

배열  메서드

 

push()

      let days =['월', '화', '수'];
      days.push('목');
      console.log(days)// ['월', '화', '수', '목']

 

pop()

      let days = ["월", "화", "수"];
      days.pop();
      console.log(days); // ['월', '화']

 

 

shift : 배열 앞 제거

unshift : 배열 앞 추가

      let days = ["월", "화", "수"];
      days.unshift("일");
      console.log(days); // ['일' '월', '화', '수']

 

 

includes: 해당 배열에 지정한 요소가 있는지 확인 메서드 true /false

      let numbers = [1, 2, 3, 4, 5, 6];
      console.log(numbers.includes(3)); // true
      console.log(numbers.includes(7)); // false

      let words = [
        "spray",
        "limit",
        "elite",
        "exuberant",
        "destruction",
        "present",
      ];
      console.log(words.includes("elite")); //true
      console.log(words.includes("prororo")); //false

 

---

 

 

메서드 체이닝을 사용하여 (~olleH) 출력

 

-  각각의 메서드를 연결해서 사용

- 단, 메서드가 반환(return) 값을 가지고 있는 경우에만 가능

 

      let str = "hello~";
      console.log(str); 
      console.log(str.split("").reverse().join("")); // ~olleH

 

---

배열에서의 for 사용하기 [for, for of, for Each]

 

1. 기본 for문 

일반적인 반복 문으로, 배열의 각 요소에 대해 인덱스를 사용하여 반복한다.

배열의 길이를 직접 지정해야 하며, 인덱스를 사용하기 때문에 코드가 더 복잡할 수 있다.

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

      for (let i = 0; i < num.length; i++) {
        console.log(i); // 1~9 까지 출력
      }

 

2.for of문

ES6에서 도입된 새로운 반복문으로, 배열의 각 요소에 직접 접근할 수 있다.

인덱스를 다룰 필요가 없어 코드가 간결해지며, 더 읽기 쉽다는 장점이 있다.

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

      for (const numbers of num) {
        console.log(numbers); // 1~10출력
      }

 

3.for Each문

배열의 각 요소에 대해 특정 작업을 수행할 때 사용하는 배열 메서드이다.

콜백 함수를 전달하여 각 요소에 대한 작업을 정의한다.

인덱스를 직접 다룰 필요가 없고, 코드가 더 간결하며 함수형 프로그래밍의 스타일을 적용할 수 있다.

 

array.forEach(function(element) {
    console.log(element);
});

 

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

      num.forEach((numbers) => {
        console.log(numbers); // 1~10 출력
      });

 

for문은 전통적이고 범용적이지만 코드가 복잡할 수 있다. for of문은 간결하게 배열을 순회할 수 있고,

forEach는 배열 요소에 특정 작업을 수행할 때 더 간편한 문법을 제공한다. 상황에 맞게 고려하여 적절한

반복문을 선택하면 된다.

 

---

 

배열의 합

      let arr = [];
      let arrsum = 0;
      for (let i = 0; i <= 100; i++) {
        arr.push(i);
        arrsum += i;
      }
      console.log(arr); // 1~100 배열 확인
      console.log(arrsum); // 1~100까지의 배열의 합 출력 : 5050

 

 

배열 함수, filte

      let number = [1, 2, 3, 4, 5, 6];
      let arr;
      arr = number.filter(function (num) {
        return num > 3;
      });
      console.log(arr); // 3, 4, 5

      const words = [
        "spray",
        "limit",
        "elite",
        "exuberant",
        "destruction",
        "present",
      ];
      const result = words.filter((word) => word.length > 6);
      console.log(result); // exuberant, destruction, pr