문자열 관련 메소드
.length : 문자열 길이 반환(공백포함)
.toUpperCase()&toLowerCase() : 문자열 전체를 대문자&소문자로 변경
.indeexOf(' ') : 매개변수로 문자열을 받아서 몇 번째 인덱스인지 숫자 반환
.slice(starIdx, endIdx) : start부터 end-1까지 슬라이싱 반환, 음수값도 가능
.replace(문자열1, 문자열2) : 1을 2로 변경
.replaceAll(문자열1, 문자열2) : 문자열1을 모두 문자열2로 변경
.repeat(n) : 문자열 n번 반복
.trim() : 문자열의 양끝 공백 없애기
.split() : 매개변수로 들어온 문자열 기준으로 str 쪼개서 배열 저장
배열 관련 메소드
.push() : 배열 끝에 추가
.pop() : 배열 끝 요소 제거
.shift() : 배열 앞에 제거
.unshift() : 배열 앞 추가
arr.length : 배열 길이 반환
arr.indexOf() : 매개변수에 해당하는 배열의 인덱스를 받아옴. 매개변수에는 문자열이 아니어도 됨.
arr.reverse() : 배열 순서 반대로 반환
arr.join() : join 안의 문자열 기준으로 문자열 병합
배열 함수 , [ ].include(요소);
배열에 지정한 요소가 있는지 확인
배열에서의 for
for문 / for of문
let arr = [1, 2, 3];
//for문
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
//for of문
for (let number of arr) {
console.log(number);
}
[ ].forEach문
배열의 요소를 반복하는 array 객체에서만 사용하는 메소드이다.
let fruits = ["딸기", "바나나", "수박 "];
fruits.forEach(function (fruit, i, arr) {
console.log(fruit, i, arr);
});
fruits.forEach((fruit, i, arr) => {
console.log(fruit, i, arr);
});
첫번째 인수는 배열의 item, 두번째 인수는 배열의 index, 세번째 인수는 배열 그 자체이다.
배열의 item인 딸기가 먼저 나오고 두번째에는 딸기의 인덱스인 0 세번째는 fruits 배열이 출력된다.
배열의 합
let numbers = [1, 2, 3];
let sum1 = 0;
let sum2 = 0;
let sum3 = 0;
for (let i = 0; i < numbers.length; i++) {
sum1 = sum1 + numbers[i];
}
for (let num of numbers) {
sum2 = sum2 + num;
}
numbers.forEach((num) => {
sum3 = sum3 + num;
});
배열함수, filter
- 조건에 부합하는 배열 요소만을 반환
let fruits = ["딸기", "바나나", "수박"];
let store =fruits.filter(function(select){
return select.length >= 3;
})
console.log(store);
map : 배열의 모든 원소에 대해 연산한 값을 새로운 배열로 반환
let arr = [1, 2, 3].map(function (el) {
return el * 3;
});
console.log(arr);
find : 조건을 만족하는 첫번째 값 반환
arr = [10, 20, 30, 40, 50];
let findResult = arr.find((num) => num >= 30);
console.log(findResult); //조건 만족하는 값 하나만 반환, 30
🙈
조건문, 반복문, 메소드는 다른 언어에서 많이 사용해봐서 이번 수업시간은 많이 멍때리고 있었다.
이래서 언어하나 잘해두는 게 좋은 건가봅니다. 학교에서 배울 때 수업 좀 잘 들어놓을 걸.. 과거의 나 반성해;)
수업 들으면서 실습을 다양하게 많이 해볼 수 있었다.
실습문제를 풀어보고 강사님과 답을 맞추는 시간이면 괜히 떨린다. 코드에 정답이란 건 없는 걸 알지만, 강사님의 코드가 더 좋아 보이는 그런 느낌이다.
당연히 그러겠지만,,,
그렇다고 한가지 방법의 코드만 알려주시는 게 아니라 여러 방법으로 짤 수 있는 코드를 보여주신다.
그래도 콘솔창만 들여다보지 말고, 먼저 값 예상해보고 생각하는 시간 좀 가져야겠다.
bootstrap으로 구현하는 것도 알려주셨는데, 페이지 하나 만들면서 이 블로그의 검색기능을 사용했다.
그냥 적는 게 아니었고, 쓸모가 있었다니 다행인 것 같다.
구글링하면 다른 사람이 쓴 글을 읽어봐야 하고, 강의 자료를 하나하나 ctrl+f 하기도 귀찮았었다.
대충 내가 뭐라고 기억했고, 위아래 썼던 내용도 다시 찾아보게 되었다.
'[Study] FE > HTML & CSS & JS' 카테고리의 다른 글
[포스코x코딩온] 1차 프로젝트 중간 점검🔥 (feat.중간 점검까지 프로젝트 회고록) (0) | 2023.03.23 |
---|---|
[포스코 x 코딩온] JS_04 DOM (0) | 2023.03.13 |
[포스코X코딩온] JS_02 조건문 / 3항 연산자 / 반복문 (0) | 2023.03.11 |
[포스코X코딩온] JS_01 데이터/연산/함수 (0) | 2023.03.10 |
[포스코X코딩온] CSS_06 Transition/Transform/Animation (0) | 2023.03.09 |