analogcoding

일반적인 함수의 경우 this 가 참조하는 값을 binding 해줘야한다. arrow function 을 사용하지 않을 때 this === window 가 true 이다. this.pruntData() 는 이미 myObj 를 바라보고 있어서 window가 아니기 때문에 bind로 this를 묶어줘야 한다. 그렇지만 arrow function을 사용할 경우 binding을 따로 해주지 않아도 바로 연결된다. 그렇지만 this 가 window 를 바라보는 것은 아니다. bind 를 생략한 상태에서도 context 를 유지하기 때문에 'where is this' 가 출력된다.

let arr = [1,2,3,4].map(function(v){ return v * 2; }); ES5 let arr2 = [1,2,3,4].map( (v)=>{ return v * 2; }) ES6 let arr2 = [1,2,3,4].map( (v) =>( v * 2)) 축약​ 기존 function 보다 짧게 , 가독성 있게 사용할 수 있다. ES6 이전 setTimeOut(function(){ console.log('hello') },1000) ES6 arrow function setTimeOut( ()=>{ console.log('arrow'); },1000)

객체의 키와 값이 같을 경우 ES5에서 프로퍼티 키를 동적으로 생성하려면 객체 외부에서 obj[key] 를 사용해야 했지만 ES6에서는 객체 내부에서도 프로퍼티 키를 동적으로 생성할 수 있다.

펼침 연산자의 예시 배열의 요소로 카피한 요소를 그대로 펼쳐서 그 자리에 넣을 수도 있다. spread operator 사용 이점의 예시 배열의 각 요소들을 하나씩 함수의 인자로 써야하는 예시일 때 apply 를 사용해서 하나 씩 받았다면 spread operator 를 사용해서 배열을 복사하지 않고 바로 펼쳐서 인자로 사용할 수 있다. rest 파라미터 rest 파라미터(Rest Parameter)는 Spread 연산자(...)를 사용하여 파라미터를 정의한 것을 의미한다. rest 파라미터를 사용하면 요소를 함수 내부에서 배열로 전달받을 수 있다. rest 파라미터는 마지막에만 쓸 수 있다.

화살표 함수(Arrow function)는 function 키워드 대신 => 를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다. 하지만 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다. 화살표 함수의 기본 문법은 아래와 같다. 함수 선언식 예시 function fnName() { } 함수 표현식 예시 var fnName = function() { } 화살표 함수는 익명 함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다. 함수가 매개변수를 받는 경우에 따른 화살표 함수식 () => { ... } // 매개변수가 없을 때. x => { ... } // 매개변수가 한 개일 때는 소괄호 생략 가능. (x, y) => { ... } // 매개변수가 여러 개일 때..

ES6 에서 새로 도입된 문자열 표기법으로 백틱(`)을 사용한다. (여담으로 맥북에서 한/영 자판을 쓰고 있는데 백틱이 키보드에 없어서 한 참 찾았다. 분명 사용한 기억이 있는데.. 해답은 한글자판모드일 때 ₩가 영어자판모드일 때 `이다.) 일반적인 문자열에서 줄바꿈은 허용되지 않으며 공백을 위해선 \ 를 사용했지만 ES6 템플릿 리터럴은 일반적인 문자열과 달리 여러줄에 걸쳐 문자열을 작성할 수 있다. 공백이 그대로 적용된다. 또한 문자열 내에서 따옴표를 사용할 때 역시 \ 를 사용해야했지만 `를 사용하면 그럴 필요가 없다. 또한 템플릿 리터럴은 문자열과 변수 간의 + 연산자를 사용하지 않고 다른 간단한 방법으로 새로운 문자열을 삽입할 수 있다. 이를 문자열 인터폴레이션(string interpolati..

ES6 이전 변수 선언은 var 키워드 뿐이었지만 var 키워드에는 몇 가지 문제점이 있었다. var 의 문제점. 1. 함수 레벨 스코프를 가지므로 전역 함수 외부에서 생성 될 경우 모두 전역 변수여서 전역변수가 너무 많아진다. 2. 생략이 허용되므로 암묵적 전역변수가 생길 수 있다. 3. 변수의 중복 선언이 허용된다. 이러한 문제들과 더 편리한? 코딩을 위해 새로 도입 된 let 과 const . let 1. 재할당이 자유롭다. 2. var 와 다르게 블록 레벨 스코프를 가진다. 모든 코드 블록 {} 안에서 선언된 변수는 코드 블록 내에서만 유효하고 블록 외부에서 참조할 수 없다. 즉 내부 선언 지역 변수이다. let foo = 123; // 전역 변수 { let foo = 456; // 지역 변수 l..

function protoype methods call,apply 는 그냥 함수가 실행되도록 "도와"주는 것이고 bind 는 "새로운" 함수를 "만들어" 준다. 함수를 호출하는 2가지 방법 call,apply는 함수를 실행시킨다(=호출해 실행한다). 사용하는 이유는 call,apply메서드의 첫번째 인수 때문이다. call,apply는 첫번째 인수 없이도 에러 없이 작동한다. 인수가 없을 경우, 자동적으로 전역객체를 가리키게 된다. function.prototype.call call은 함수를 빌려오거나 프로퍼티를 가져올 수 있다. case-1. 함수를 빌려오는 경우 case-2. 프로퍼티를 빌려오는 경우 case-3. Array.prototype.slice.call/apply.(obj/arguments)..