Goni's dev_log

서론

배열과 관련된 문제를 풀 때마다 slice()함수가 정말 많이 유용하게 사용되고 있음에도 불구하고, 쓸 때마다 자꾸 헷갈리는 부분이 있어서 그걸 제대로 잡고자 쓰는 글이다.

본론

slice() 함수

• 생김새 : arr.slice(begin, end) (end는 생략 가능)
• 배열의 begin index부터 (end-1) index 까지 반환해주는 함수이다.
• 매개변수로 index의 범위가 넘어가는 수가 들어가면 빈 배열을 반환한다.
• 원본 배열을 훼손하지 않는 것이 splice()와 가장 큰 차이점이다.
• 즉, 새로운 배열로 반환해주는 것이다.
• 개인적으로 slice() 함수에서 헷갈리는 부분이 두 가지가 있었다.
  • end index가 생략될 수도 있다는 점과, end index는 실제로 (end-1) index까지 적용된다는 점이다. end index가 생략된 경우에는 자동으로 해당 배열의 마지막 값까지 자른다는 의미이다.
  • 매개변수로 음수값이 들어갈 수도 있다. 예를 들어, -1은 해당 배열의 가장 마지막 값, -2는 해당 배열의 가장 마지막 값에서 두번째 값 ... 이런식으로 배열의 마지막을 기준으로 1, 2, 3... index로 생각하면 된다. 근데 이게 음수는 좀 예외적으로 이해해야 할 부분이 있다.
• 다양한 예시를 들어서 이해해보자!

  /* slice함수 연습 */
  let sliceTest = [1, 2, 3];
  console.log(sliceTest.slice(0)); // [1, 2, 3]
  console.log(sliceTest.slice(0, 0)); // []
  console.log(sliceTest.slice(0, 1)); // [1]
  console.log(sliceTest.slice(-1)); // [3]
  console.log(sliceTest.slice(0, -1)); // [1, 2]
  console.log(sliceTest.slice(0, -2)); // [1]
  console.log(sliceTest.slice(0, -3)); // []
  console.log(sliceTest.slice(-1, 1)); // []
  console.log(sliceTest.slice(-3, -1)); // [1, 2]

• slice() 배열로 활용될 수 있는 다양한 예시들이다. 맨 처음 예시처럼 0만 매개변수로 들어간 경우에는 start = 0 index라는 의미이고, end가 없으니 시작 index인 1부터 자동으로 배열의 끝인 3까지 반환해주는 것이다.
• 그리고 가장 헷갈렸던 음수값이 들어갔을 때는 다음과 같이 이해하면 쉽다.

  [ 1, 2, 3 ]
    0  1  2  << index
   -3 -2 -1 << index​

• slice() 함수에서 배열 [1, 2, 3]은 위와 같은 index를 갖게 된다. (실제로 음수 index를 가지는 것은 아니고, 이해를 위해 index라고 표현했다)
• 이 배열에서 slice(0, -1)을 하면 [1, 2]를 반환하게 된다. 이는 index의 위치를 보면 slice(0, 2)과 비슷하니까 이해가 쉬웠다. 그런데 slice(-1, 1)은 뭔가 [3]이 반환될 것 같았는데 보다시피 [] 빈배열이 반환된다. 왜 그런지 생각해봤더니 slice함수의 매개변수는 내가 적어놓은 index의 오른쪽 방향으로 가는 경우에만 적용이된다는 사실을 알아냈다.
• 무슨 의미냐면 (0, 1) or (-3, -1) or (1, -1) or (0, -2)와 같이 start index가 end index보다 더 왼쪽에 위치한 경우에는 적용이 되지만, (2, 1) or (1, 0) or (2, 0) or (-1, -3) or (-1, 0) 과 같이 start index가 end index보다 더 오른쪽에 위치한 경우에는 빈 배열이 반환된다.
• 이 사실을 알고 나니 slice 함수의 매개변수로 어떤 값이 들어가도 이제 헷갈리지 않았다. 이제 이해한 걸 바탕으로 문제 풀 때 잘 적용만 시키면 될 것 같다!

서론

자바스크립트로 배열문제를 풀 때 가장 많이 보이고 쓰이는 함수로 filter, map, reduce가 있다. for문과 마찬가지로 배열 내 인자들을 차례로 순회할 때 사용하는데, for문에 너무 익숙해져 있는 탓인지 저 함수들을 이용하면 코드가 엄청 간결해지는 걸 알면서도 쉽게 사용을 못하고 있다. 그래서 이 참에 제대로 한번 정리하고 사용법을 익히기 위해 세 함수에 대한 정리를 해봐야겠다!

본론

세 함수의 공통점

• 모두 ES6문법에서 추가된 메소드이다
• 배열(Array) 타입에서 사용하며 배열의 각 요소들을 매개변수로 받아 작동한다
• 기본적으로 순차적으로 값들을 접근한다는 개념이 내포돼 있기 때문에 for문이 가진 순회를 별다른 코드를 작성하지 않고도 사용할 수 있게 한다는 장점이 있다

filter() 함수

• 배열 각 요소에 대해 주어진 함수의 결과값이 true인 요소를 모아 새로운 배열로 반환하는 메소드
• 오직 boolean 타입만 반환하며 return 값이 true인 경우에만 새로운 배열에 추가하기 때문에 중복 제거처럼 조건에 맞는 특정한 요소들만 새로운 배열에 넣고 싶을 때 사용하기 적합하다
• 3개의 매개변수 (index, array는 필수 입력 요소가 아님)
  1. value : 현재의 요소
  2. index : 요소의 index
  3. array : filter() 함수가 적용될 기존의 배열

• const ex = [1,2,3,4,5]; 
  const ex_filter = ex.filter(i => i > 3); 
  
  //결과 : [4, 5]

map() 함수

• 배열 각 요소에 대해 주어진 함수를 수행한 결과를 모아 새로운 배열로 반환하는 메소드
• 배열의 요소들에 일괄적으로 함수를 적용(같은 조건을 적용)하고 싶을 때 사용하기 적합하다
• 3개의 매개변수 (index, array는 필수 입력 요소가 아님)
  1. value : 현재의 요소
  2. index : 요소의 index
  3. array : map() 함수가 적용될 기존의 배열

• const ex = [1,2,3,4,5];
  const ex_map = ex.map(i => i*2);
  
  //결과 : [2, 4, 6, 8, 10]

reduce() 함수

• 배열 각 요소에 대해 주어진 함수를 수행한 결과의 배열이 아닌 하나의 결과값으로 반환하는 메소드
• 이 함수의 가장 큰 특징은 다른 함수들과 달리 누적값이라는 매개변수가 포함된다. 쉽게 말해 reduce에 주어진 함수를 수행하면서 생기는 값들을 임시적으로 계속해서 보관하는 형태이다
• 예를 들어, reduce 함수를 이용해서 배열의 모든 원소를 더하고 싶을 때, 0 ~ n 번째 까지의 요소 값들을 계속해서 누적하여 더해나가서 결과적으로 최종 누적값을 결과로 반환한다 (그래서 reduce를 덧셈 함수로 많이들 알고 있다)
• 또 이 함수의 특징으로는 초기값을 설정할 수 있다는 것이다. 초기값으로는 숫자뿐만 아니라 배열 등등 다양한 형태로 입력할 수 있다. 위의 예시를 들어 초기값을 5로 설정했다면 5 + 0번째 값, (5 + 0번째 값) + 2번째 값 ... 이런 식으로 누적해 나가는 것이다.  
• 4개의 매개변수 (currentIndex, array는 필수 입력 요소 아님)
  1. acc (accumulator) : 리턴한 값을 저장하는 변수, 초기값을 지정한 경우에는 설정한 초기값부터 시작
  2. cur (currentValue) : 현재의 요소
  3. currentIndex : 요소의 index
  4. array : map() 함수가 적용될 기존의 배열

• const ex = [1,2,3,4,5];
  const ex_reduce = ex.reduce((acc, cur) => {
      console.log(acc, cur);
      return acc + cur;
  }, 5);
  
  // 결과
  // 5 1
  // 6 2
  // 8 3
  // 11 4
  // 15 5
  // 20 << 최종값

• 또한, 위에 작성한 filter, map 과 같은 함수형 메소드를 reduce 만으로 구현할 수 있다

• const ex = [1,2,3,4,5];
  const ex_filter_reduce = ex.reduce((acc, cur) => {
      if (cur > 3) {
          acc.push(cur);
      }
      return acc;
  }, []) //초기값을 배열로 둠
  
  //결과 : [4, 5]
  
  ------------------------------------------------------
  
  const ex = [1,2,3,4,5];
  const ex_map_reduce = ex.reduce((acc, cur) => {
      acc.push(cur * 2);
      return acc;
  }, []) //초기값을 배열로 둠
  
  //결과 : [2, 4, 6, 8, 10]

서론

자바스크립트를 이용하여 반복문 문제를 풀 때 forEach, for ... in, for ... of가 유용하게 쓰인다. 물론 자바스크립트에는 이 외에도 우리가 잘 알고 있는 for문, while문, do while문 등등의 다양한 반복문이 존재한다. 그 중에서도 비슷하면서도 헷갈리는 것들의 차이가 뭘까 궁금해졌다.

본론

forEach

• 오직 배열에서만 사용가능한 메소드
• 인자로 callback 함수를 쓸 수 있음
• (주의) forEach의 E는 꼭 대문자로 써야 함
  

  const ex = ['ex1', 'ex2', 'ex3'];
  
  ex.forEach(function(i) {
  	console.log(i);
  });
  
  //결과: ex1 ex2 ex3

for ... in

• 객체의 반복에서 사용되는 메소드
  

  const user = {
      name: 'goni',
      age: 5
  }
  
  for (let key in user) {
      console.log(key);
      console.log(user[key]);
  }
  
  //결과: name goni age 5​

for ... of

• 배열의 반복에서 사용되는 메소드
• forEach와의 차이점은 배열 외에도 많은 객체에서 쓸 수 있다는 것과 인자로 callback함수를 쓸 수 없다는 것

  const ex = ['ex1', 'ex2', 'ex3'];
  
  for (let i of ex) {
      console.log(i);
  }
  
  //결과: ex1 ex2 ex3