[데브코스 FE] 2주차 네번째 수업 2024/07/25

2주차 목요일 수업에서는 

JS 문법 중 내장객체, 배열 다양하게 사용하는법, map, filter 등등을 배웠다.

 

수업을 듣다보니, 개발하면서 혹은 자바스크립트로 코딩테스트 준비하면서 

한 번씩 봤던 메서드들이었다.

하지만 제대로 깊게 파보거나 공부해본 적은 없기 때문에

익숙하면서도 낯선 부분이 있었다.

 

특히 이번 수업은 자바스크립트로 코딩테스트를 준비할때

유용하게 사용할 수 있는 배열 관련 메서드들을 많이 알려주셔서 

복습을 꼭 ! 해야겠다고 생각했다.

 

---

학습내용

1. 다양한 내장객체함수들
2. 배열 /  반복문 vs 고차함수
3. 배열에서 원하는 값 찾고싶을땐? / map vs filter
4. css 반응형 vs 적응형
5. 수업 때 질문들 Q&A

 

---

1. 다양한 내장객체함수들

자바스크립트 JS 에서 내장객체란 무엇일까?

따로 선언이나 import하지 않고도, 바로바로 쓸 수 있는 객체들을 말한다.

 

내장객체함수는,

내장객체를 이용하여 바로바로 쓸 수 있는 내장함수들을 말한다.

 

바로 다양한 예시들을 살펴보자!

🔍소숫점 조작

.toExponential(num) : 지수함수(e+n)로 표기

 

 .toFixed(n) : n자리 소숫점 이하 버림, 지정하지 않으면 소숫점 이하 버림

 

.toLocaleString() : 돈세는것처럼, 3자리씩 ','로 끊어서 변환함

 

.toPrecision(n) :  원하는 자리수(n)까지 반올림

let num3 = 102;
console.log(num3.toExponential(4)); // 1.02e+2

const num4 = 12344321.1321;
console.log(num4.toFixed());    // 12344321
console.log(num4.toLocaleString()); // 12,344,321.1321
console.log(num4.toPrecision(2)); // 1.2e+7

 

🔍문자열 조작

.charAt(index) : 원하는 위치(index)의 문자 반환

 

.indexOf(index) : 찾고자 하는 위치(index)의 문자 반환

 

.lastIndexOf(x) : 뒤에서부터, 찾고자 하는 문자(x)의 위치를 반환

 

.slice(start, end) : start ~ end - 1 위치의 문자열 반환. 인덱스가 음수일경우, 문자열의 끝에서부터 계산됨.

 

.substring( start , end) : start ~ end - 1 위치의 문자열 반환. 음수인덱스는 0으로 간주함.

 

.includes(str) : 해당 문자열(str)를 포함하고 있는지 확인, 있으면 true 없으면 false 반환

 

.split("") : 문자열 공백기준으로 끊어 단어 배열을 반환. 보통 공백기준으로 끊기 위해 ""를 전달값으로 많이 사용하고,

끊고자 하는 문자 어느것이든 인자로 사용가능.

 

const text = "test 1234";
console.log(text.charAt(1)); // e
console.log(text.indexOf(1)); // 5 찾고자 하는 원소의 위치를 반환
console.log(text.lastIndexOf(1)); // 5 뒤에서부터 찾고자 하는 원소의 위치를 반환
console.log(text.slice(1, 3)); // es
console.log(text.substring(1, 3)); // es
console.log(text.includes("test")); // true , 문자열을 포함하고 있는지 확인

const long = "안녕 반갑습니다. 오늘도 화이팅";
console.log(long.split(" ")); // ["안녕", "반갑습니다.", "오늘도", "화이팅"]

 

특히 문자열 조작에서 chatAt(), slice() 메서드는 코딩테스트할때 

자주 본 기억이 있다!

이외에도 색다른 메서드들을 보면서,

눈에 자주 익혀두면 코테 문제를 풀때 좀 더 창의적이고 신박한 풀이가 떠오르는데 도움이 될듯싶다 :)

 

2. 배열 / 반복문 vs 고차함수

배열을 생성하는 방법이 3가지나 있다는 놀라운 사실?!

1. [ ] 대괄호 표기법

let arr1 = [ 1,2,3 ];

 

가장 직관적이고, 간결한 방법.

미리 길이를 명시해둘 수는 없음.

2. 생성자 형태

let arr2 = new Array(1,2,3);
let arr = new Array(3); // 길이가 3인 빈 배열 생성

 

배열의 길이를 미리 명시해두고 싶은경우 유용.

3. 스태틱 형태

let arr3 = Array.of(1,2,3);

 

new Array()의 인자 해석 문제를 피하고, 인자의 개수에 관계없이 배열을 생성하고 싶을 때 유용.

 

사실 나도 그렇고, 일반적으로 가장 많이 사용하는 방식은

1. 번 처럼 [ ] 를 이용하는 대괄호표기법 방식인것 같다!

 

🔍반복문 vs 고차함수

다음과 같이 문제상황이 주어졌다고 하자.

주어진 배열 안의 딸기 아이템을 키위로 교체하는 함수를 만들어라. 단, 새로운 배열로 반환해야한다.

 

일단, 과일 이름이 담겨있는 배열이 주어진다면

딸기 → 키위로 교체하는 방법을 고민해봐야한다.

 

나는, 각 원소들을 반복문으로 모두 탐색하면서 값을 확인하여 교체하는 방법이 가장 먼저 떠올랐다.

 

하지만 !

자바스크립트에서는 배열과 관련하여 다양한 고차함수가 있다.

( map, forEach 등)

반복문을 사용하지 않고도, 단 한줄의 코드로 배열의 원솟값을 모두 확인하고 변경해주는 함수인 고차함수를

코딩테스트나 프로젝트시에 적극 사용하면

가독성도 좋아지고 코드 효율성도 좋아질 것 같다.

 

사실 고차함수를 사용하는것은 아직 익숙지않은데,

이번기회에 정리하면서 더 익숙해지려고 한다!

 

🔍반복문을 사용한 풀이

// 퀴즈1: 주어진 배열 안의 딸기 아이템을 키위로 교체하는 함수를 만들기. 단 새로운 배열로 반환해야함
function replace(arr, from, to) {
  const replaced = Array.from(arr);
  for (let i = 0; i < arr.length; i++) {
    if (replaced[i] === from) {
      replaced[i] = to;
    }
  }
  return replaced;
}
let array = ["바나나", "딸기", "사과", "포도", "딸기"]; // 기존 배열 유지
const result = replace(array, "딸기", "키위");	// 새로운 배열로 반환

 

주어진 배열을 옮긴 배열 replaced에서,

"딸기"(from)를 발견하면

"키위"(to)로 교체한다.

🔍map()을 사용한 풀이

// 퀴즈1: 주어진 배열 안의 딸기 아이템을 키위로 교체하는 함수를 만들기. 단 새로운 배열로 반환해야함
//map을 사용하여 배열을 순회하면서 딸기를 키위로 바꾸는 함수를 만들어보자
function replace2(arr2, from, to) {
  return arr2.map((item) => (item === from ? to : item));
}

let array = ["바나나", "딸기", "사과", "포도", "딸기"];
const result2 = replace2(array, "딸기", "키위");

 

map()은, 주어진 조건을 만족하는 원소만 남는 새로운 배열을 반환한다.

반복문을 사용한 풀이보다

훨씬 가독성좋고 코드가 짧다!

 

🔍forEach()를 사용한 풀이

let array2 = ["바나나", "딸기", "사과", "포도", "딸기"];
array2.forEach((item, i) => {
  if (item === "딸기") { // 배열에서는 item 그대로 이용
    array2[i] = "키위";
  }
});
console.log(array2); // ["바나나", "키위", "사과", "포도", "키위"]

 

forEach()는 배열의 원소들을 전부 확인할 수 있는 메서드이다.

반복문을 이용한 풀이랑 원리는 비슷하지만, 코드는 좀 더 짧다.

 

확실히 고차함수를 이용한 풀이가 더 가독성좋고 짧아서 유지보수에도 좋을 것 같다!

 

3. 배열에서 원하는 값 찾고싶을땐? / map() vs filter()

map()을 배우다보니, 궁금한 점이 생겼다.

filter()도 원하는 조건에 맞춰 배열의 원소를 걸러주는 기능으로 알고있는데,

map()과의 차이점은 무엇일까?

 

🔍map()과 filter()의 차이

크게는 사용하는 목적이 다르다.map()은 원소들의 '변환'을 목적에 두고 있고,filter()는 특정 조건을 만족하는 원소만 '선택'할때 사용한다.

 

하지만! 위 '🔍map()을 사용한 풀이' 에서는 '선택'의 목적으로 map()을 썼어서,

궁금한 나머지 chatgpt에게 물어봤고 답변은 이와 같았다.

 

[Q] 🔍map()을 사용한 풀이 에서, map()은 특정 요소를 선택하도록 사용된거아니야?

[A] map()은 본래 모든 요소를 변환하는 데 사용되지만,
변환 과정에서 조건을 넣어 특정 요소만을 변환하도록 할 수 있습니다.
이처럼 map()은 변환 작업을, filter()는 선택 작업을 주로 담당하지만,
map()에서 조건문을 사용하여 특정 요소를 선택적으로 변환하는 것도 가능합니다.

 

한 줄 요약

'선택'도 가능은하다. 하지만 map()의 본래목적은 '변환'에 더 가깝다.

 

결론

비록 위의 예시에서는 고차함수중 map()의 예시를 보여주기 위해 filter()대신 map()을 썼지만가독성이나 나중에 알아보기 편하게나 유지보수를 위해본래의 목적에 맞게 고차함수를 사용하는 것이 중요할 것 같다!

 

4. css 반응형 vs 적응형

 

강사님께서 강의중에 '반응형', '적응형' 단어를 몇 번 반복하셨는데

정확히 이 둘의 차이가 무엇인지 궁금하여 폭풍검색을 해보았다!

 

반응형

웹에 접근한 기기를 체크해

서버나 클라이언트에서 그 기기에 맞는 템플릿을 제공하는 개념

 

적응형

하나의 템플릿만을 사용하며,

  미디어 쿼리를 사용해 기기 화면의 크기를 확인하고

유연한 이미지와 그리드를 활용해 화면 크기 변화에 따라

페이지의 크기 및 레이아웃을 조절하는 기술

 

즉

 

브라우저 가로길이가 변할 때,

어느 순간 툭 바뀐다? = 적응형.
이미지와 그리드가 실시간 변화한다? = 반응형.

이다.

위: 반응형, 아래: 적응형

사진 출처

 

각 장단점에 따라 채택택하는 방법이 다를 것이다. 

각각의 장단점은 무엇이 있을까?

 

반응형

장점 : 하나의 템플렛으로 다양한 사용자와 기기에 대응할 수 있어 , 개발이 간편하다. 

단점 : 사용자는 단 하나의 기기로 접속하지만 이러한 경우에도

모든 기기를 위한 css를 전부 다운로드해야하므로

데이터를 낭비하고 로딩 시간이 늘어난다. 

 

적응형

장점: 사용자의 기기에 맞는 템플릿 및 css만 다운로드하면 되므로

데이터 낭비가 적고 로딩 속도가 빠르다.

단점 : 각 기기별로 별도의 템플릿을 작성해야하므로 개발이 복잡해진다.

반응형과 적응형은 각각의 장단점이 서로의 단,장점이 된다. 

 

회사나 단체에서 개발하는 목적이나 방법에 따라 적당한 방법을 선택하면 되지 싶다!

 

5. 수업때 Q&A 

Q: 변수에서 var와 let중에 어떤 것이 많이 쓰이나요?

A: var는 호이스팅이 일어나서, 블록레벨의 let을 더 많이 쓰는 경향이 있습니다.

Q: 화살표함수랑 선언함수랑 기능적인 차이점이 무엇인가요?

A: 함수 내부에서 this.을 사용하는 경우, arraw function은 무조건 this = 윈도우 를 가리키게 된다.

그 외의 함수에서 this.는 함수 발생 이벤트를 가리킨다.

---

수업때 코딩테스트에서 많이 사용할 법한 문자열조작 방법과

실무에서 데이터 fetch시 많이 사용할법한 고차함수(map,forEach)등을 

깊게 다뤄보는 시간이었던 것 같다. 

 

또한 평소에 궁금하였던

'반응형'과 '적응형'의 차이를 복습하면서 알게되어

궁금증에 대한 간지러움이 해소되었고 뜻깊었던 포스팅이었다. :)