09/23

Javscript

1. es6 parameters & arguments

• Reference : https://www.smashingmagazine.com/2016/07/how-to-use-arguments-and-parameters-in-ecmascript-6/

• Parameter : 함수 선언시에 정의된 변수
• Argument : 함수에 전달된 값들

function foo(param1, param2) {
    // do something
}
foo(10, 20);
//Param1, Param2 == Parameters
// 10, 20 == Arguments

2. Apply

• Apply는 arguments를 배열 형태로 전달하는데 유용한 메소드

const myArray = [10,50,100]

Math.max(myArray) //NaN

Math.max.apply(Math, myArray); //100

// Spread Syntax를 활용한 더 좋은 방법!!

Math.max(...myArray); //100

3. Rest Parameters

: 함수에 전달된 파라미터들을 배열 형태로 리턴한다.

//파라미터를 Rest Parameter 형식으로 받음
function myFunction(...params) {
	return params;
}

myFunction('a','b','c'); //['a','b','c']

function test(id, ...params){
	return params;
}

test("id",'a','b'); //['a','b'];

• Rest Parameter 유용한 예시

function checkSubstrings(string) {
  for (var i = 1; i < arguments.length; i++) {
    if (string.indexOf(arguments[i]) === -1) {
      return false;
    }
  }
  return true;
}

checkSubstrings('this is a string', 'is', 'this');   // true

//개선
function checkSubstrings(string, ...keys) {
  for (var key of keys) {
    if (string.indexOf(key) === -1) {
      return false;
    }
  }
  return true;
}
checkSubstrings('this is a string', 'is', 'this');   // true

Vue

1. updated 훅

: 컴포넌트의 데이터가 변하여 재 렌더링이 일어나 후에 실행되는 곳, 돔 업데이트가 완료되어 있으므로 돔 종속적인 연산 가능! 하지만 여기서 상태를 변경하면 무한 루프에 빠짐 => 또 updated훅이 실행되므로

• Reference : https://medium.com/witinweb/vue-js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-7780cdd97dd4