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
'국비지원 > 부트캠프' 카테고리의 다른 글
[KDT 포스코x코딩온 10] 웹 풀스택 과정 회고록 (9) | JQuery (0) | 2023.11.07 |
---|---|
[KDT 포스코x코딩온 10] 웹 풀스택 과정 회고록 (8) | Javascript (0) | 2023.11.05 |
[KDT 포스코x코딩온 10] 웹 풀스택 과정 회고록 (6) | Javascript (2) | 2023.11.01 |
[KDT 포스코x코딩온 10] 웹 풀스택 과정 회고록 (5) | Javascript (2) | 2023.10.31 |
[KDT 포스코x코딩온 10] 웹 풀스택 과정 회고록 (4) | CSS (0) | 2023.10.30 |