내가 모르는 js기초 문법들(=>,reduce,foreach...)

이번에 강의를 들으면서 뭔가 당연히 알아야한다는 느낌으로 설명이 나오는데 완전히 처음보는 문법들이 있었다.

일단은 그러려니 했었는데 js코테 문제를 풀어보고 다른 사람들 풀이를 보는데 그곳에서도 비슷한 문법들이 나오길래 이번 기회에 그냥 그 문법들을 정리해보기로 하였다.

js 화살표 문법 (=>)

일반적으로 함수를 만드는 방식을 간편하게 바꾼 것이 화살표 문법(arrow function)이다.

사용 방식은 let func = (arg1, arg2, ...argN) => expression방식이다.

let (함수명) = (매개변수's) => (함수 내용)의 방식이다.

이렇게 설명만 한다면 감이 잘 오지 않을 수 있으니 간결한 사용 예시를 들어본다면

let sum = (a, b) => a + b;

이다. 만약 받는 인수가 없는 경우에는

let sayHi = () => alert("안녕하세요!");

방식으로 작성한 후

sayHi();

를 입력하면 된다.

약간 더 활용을 추가하면 삼항연산자를 추가하여서

let welcome = (age < 18) ? () => alert('안녕') : () => alert("안녕하세요!");

방식으로 작성 할 수 있다.

그리고 내용을 여러줄로 적어야 할 경우에는

let sum = (a, b) => {
    let result = a + b;
    return result;
};

방식으로 적어야 한다.

※주의점※

화살표 함수에서는 this 사용 시 주의해야 한다.

var name = "Global";

let user = {

  name: "Inpa",

  sayHi: function() {

    console.log(this.name); 

  }

};

user.sayHi(); // Inpa

위 경우는 일반 함수라서 this.name이 Inpa로 나오지만

var name = "Global";

let user = {
  name: "Inpa",
  sayHi: () => {
    console.log(this.name); 
  }
};

user.sayHi(); // Global

위 경우는 화살표 함수라서 this.name이 Global로 나온다.

js reduce

reduce의 일반적인 사용 방법은

const arr = [1, 2, 3, 4, 5]
  
arr.reduce(function (acc, cur, idx) {
  console.log(acc, cur, idx);
  return acc + cur;
}, 0);

이다.

acc는 accumulator의 약자로 현재까지의 cur(=currentValue)의 누적 값들을 의미한다.

cur은 currentValue의 약자로서 arr[index]의 값을 의미한다.

idx는 index의 약자로 현재 값이 arr을 기준으로 몇번째(0~)인지를 의미한다.

이게 일반적인 사용법중 하나인 배열 요소의 합산 예시이다.

다른 활용방법으로는 map구현이 있다.

const arr = [1, 2, 3, 4, 5]
  
const result = arr.reduce(function (acc, cur) {
  acc.push(cur % 2 ? "홀수" : "짝수");
  return acc;
}, []);
 
console.log(result);
// [ '홀수', '짝수', '홀수', '짝수', '홀수' ]

위 방법은 arr의 값들은 순차적으로 집어넣은 후 홀수면 홀수,짝수면 짝수가 되도록 새로운 배열을 만든 것이다.

마지막에 있는 []의 정체는 initialValue로 그냥 초기값이다.

※알면 좋은 것들※

1. 사실 단순 함수를 만들것이면 화살표가 더 "간결"하다.(무조건적으로 좋지는 않다.)

2. 배열을 끝값부터 하고싶으면 reduceRight가 있다.

js foreach

foreach는 개념자체는 상당히 간단하다.

var arr = ['가','나','다','라'];

arr.forEach(function(item,index,arr2){
    console.log(item,index,arr2[index+1]);
})

보다시피 arr의 값들을 안에 있는 함수에 순차적으로 집어넣는 구조이다.

앞의 코드를 실행시키면

가 0 나
나 1 다
다 2 라
라 3 undefined

가 출력된다.

순서대로 (현재 들어간 값, 현재 들어간 값의 index값,현재 index+1의 값)

번외-for in과 for of

for in은 객체({key:value}의 형태)에 사용 할 수 있다.

var obj = {
    a: '가', 
    b: '나', 
    c: '다'
};

for (var key in obj) {
    console.log(key, obj[key]); // a 가, b 나, c 다
}

key에다가 obj의 key값을 넣는 방식으로 작동된다.

for of는 for in과는 유사하면서도 다른데 for of는 key가 아닌 값만을 순차적으로 집어넣는다.

var iterable = [10, 20, 30];

for (var value of iterable) {
  console.log(value); // 10, 20, 30
}