[TIL] 2023.03.31 기술면접 스터디, Programmers 문제 풀기

Today I Learned

• Programmers 문제 풀기
• 기술면접 스터디
• 기술면접 답변 준비

 

---

Programmers 문제 풀기

가까운 수

나의 풀이

function solution(array, n) {
    let array2 = array.sort((a,b) => a-b).map((num) => Math.abs(n-num))
    let index = array2.indexOf(Math.min(...array2))
    return array[index]
}

처음에는 sort를 사용하지 않고 그냥 map만 돌려서 n-num을 한 절댓값으로 배열을 가공한 후에 해당 배열에서 최솟값을 가진 index를 찾아서 문제를 풀었다. 그런데 이렇게 했을 때 "가장 가까운 수가 여러 개일 경우 더 작은 수를 return합니다."라는 조건을 통과하지 못했다.

 

그러면 아예 배열을 오름차순으로 정렬한 후에 map을 돌리면 가장 가까운 수가 여러 개가 있더라도 indexOf가 해당 요소의 첫 번째 인덱스를 반환하기 때문에 더 작은 수를 찾을 수 있겠다는 생각에 sort 메서드를 추가했다.

 

array2는 sort 메서드로 가공한 배열임에도 기존 array와 동일한 index로 접근할 수 있는 이유는 sort 메서드가 원본 배열까지 정렬하는 "mutator method"이기 때문이다.

 

풀이방법 이것저것 생각해 보면서 고민 많이했던 문제인데 점수 잘 맞아서 기분 좋음! 처음에는 기존 array에 n을 push 해서 sort로 오름차순 정렬한 다음에 splice로 배열을 n 기준 앞뒤로 잘라서 비교하는 방법을 생각했었다...ㅎㅎ

 

 

다른 사람의 풀이 01

function solution(array, n) {
    return array.reduce((a,c)=> Math.abs(a-n) < Math.abs(c-n) ? a : Math.abs(a-n) === Math.abs(c-n) ? Math.min(a, c) : c);
}

reduce를 배열의 모든 요소의 합을 구하는 한 가지 용도로만 사용하느라 잊고 있었는데 reduce 메서드는 더욱 다양한 방법으로 사용할 수 있다! 

 

 

다른 사람의 풀이 02

function solution(array, n) {
    array.sort((a,b) => Math.abs(n - a) - Math.abs(n - b) || a - b);
    return array[0];
}

sort를 아예 Math.abs 사용해서 정렬하는 방법도 있었구나..! 멋있다👍

 

---

reduce() 메서드 활용 방법

 주어진 배열에서 음수와 양수의 개수 구하기 

const numbers = [2, -5, -123, 59, -5480, 24, 0, -69, 349, 3];
const result = numbers.reduce((acc, cur, idx) => { 
  if(cur < 0){
    // 처리할 현재 요소가 음수일 경우
    acc[0]++;
  }
  else if(cur > 0){
    // 처리할 현재 요소가 양수일 경우
    acc[1]++;
  }
  return acc;
 }, [0,0]);
console.log(result);  // [4, 5]

initialValue에 배열을 할당하여 주어진 배열에서 음수와 양수의 개수를 카운트해서 출력할 수 있다.

출처 https://miiingo.tistory.com/365

 

 

 배열의 평균값 구하기 

const numbers = [4, 3, 2, 1];
const avg = numbers.reduce((acc, cur, index, arr) => {
	if (index === arr.length - 1) { // index가 마지막일 때
		return (acc + cur) / arr.length; // cur - 4
	}
	return acc + cur; // cur - 1, 2, 3
	}, 0);
ㅤ
console.log("avg", avg); // 평균값 2.5

 

 배열에서 각 알파벳의 개수 구하기 

const alphabets = ["a", "a", "c", "c", "c"];
 ㅤ
const cnt = alphabets.reduce((acc, cur) => {
 if (acc[cur]) {
   acc[cur] += 1; // acc.cur이 있으면 value에 +1
 } else {
   acc[cur] = 1; // acc.cur이 없으면 선언함
 }
 return acc;
}, {}); // acc는 오브젝트로 선언
 ㅤ
console.log(cnt); // {a: 2, c: 3}

 

출처 https://velog.io/@teo_ryu/javascript-reduce-함수와-싸우기

 

---

기술면접 스터디 CS 지식

this 가 동작하는 원리와 용법

출처 https://youtu.be/PAr92molMHU

• 함수를 호출할 때 생성되는 실행 컨텍스트 객체 (현재 실행 중인 함수의 객체를 참조)
• This의 값은 함수를 호출하는 방법에 의해 결정됨
• 호출한 놈(객체) === This
• 함수가 호출될 때마다 This가 가리키는 객체가 동적으로 결정되는 것 === This가 그 객체에 “바인딩”된다.
• bind 메서드를 사용하면 함수가 어떻게 호출되었는지와 무관하게 This를 고정할 수 있음

 

일반 함수

• 해당 함수를 어떻게 호출하는지에 따라 동적으로 결정됨
• 일반 함수 호출 ⇒ Global
• 메소드 호출 ⇒ 메서드를 호출한 주체
• 생성자 함수 호출 ⇒ 생성자 함수의 반환 값인 인스턴스 객체
• apply/call/bind 호출 ⇒ 해당 함수의 매개변수로 사용된 인자
• 상단 세 가지를 제외한 함수 호출 방식일 경우, ****전역 객체를 this로 바인드한다. ****(브라우저: window / Node.js: global)

 

화살표 함수

• this는 함수의 선언 단계에서 이미 정적으로 결정되는데, 언제나 상위 컨텍스트(스코프)의 this를 가리킴

 

참고

https://youtu.be/PAr92molMHU

https://velog.io/@mkitigy/JS-this-의-동작-원리#this-usual-function-vs-arrow-function

 

 

Session storage, Local storage, Cookie 브라우저 저장소의 차이점

Session Storage

• 브라우저가 종료되면 데이터 삭제됨
• 도메인이 같아도 브라우저나 탭이 다르면 각각의 세션스토리지가 형성되어 데이터 공유가 되지 않음 (동일한 탭/윈도우 내에서만 접근 가능)
• 일시적으로 데이터 저장이 필요할 때: 일회성 로그인, 입력 폼 저장, 비로그인 장바구니

 

Local Storage

• 브라우저를 종료해도 데이터를 보관 (영구적으로 보관이 가능)
• 도메인별로 생성되기 때문에 도메인이 같으면 데이터 전역적으로 공유 가능
• 지속적인 데이터 저장이 필요할 때: 자동 로그인

 

Cookie

• 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 키-밸류 형식의 저장소
• 서버와 통신할 때 HTTP 헤더에 포함되는 텍스트 파일 (쿠키는 매번 서버로 전송됨)
• 하나의 사이트에 저장할 수 있는 개수와 용량에 제한이 있음
• 브라우저가 닫혀도 영구적으로 데이터를 유지
• 동일한 도메인 상이라면 쿠키 값이 공유됨

 

참고 https://velog.io/@ejchaid/localstorage-sessionstorage-cookie의-차이점

 

---

회고

4월엔 무기력함에서 벗어나서 새로운 마음으로 시작한다. 파이팅!!!