라벨이 =>인 게시물 표시

[JavaScript] this

this란 this를 포함하고 있는 함수 또는 메서드가 자신을 포함하고 있는 객체를 가리키도록 약속된 특수한 예약어다. 간단히 말하면 this는 자신을 호출하는것을 가리킨다. this를 위에서 처럼 정의했지만 상황에 따라 조금씩 다르게 동작한다. this는 일반 함수에서 사용할 때와 화살표 함수에서 사용할 때 다르게 동작한다. 일반 함수에서의 this는 호출할때의 환경에 따라 즉, 런타임 환경에서 this의 값이 동적으로 결정되는것이고 화살표함수에서의 this는 선언된 시점에서의 환경(lexical scoping)에 따라 정적으로 결정되는 것이다. 조금더 자세히 알아보면 상황에 따라 다르게 동작하는 this 1. 함수(메서드) 안에서의 this // 함수 안에서의 this function functionThis () { console . log ( this ); } functionThis (); // window (전역)함수를 선언하면 this는 window 객체를 가리킨다.  함수가 전역에 선언되어있으면 해당 함수는 전역 객체인 Window 안에서 함수가 선언되는 것이기 때문에 함수이면서 동시에 메서드이다.  위 함수(메서드)가 호출되면 함수 안에있는 console.log(this)는 해당 함수를 소유하고있는 객체인 window를 가리킨다는것을 알 수 있다. 여기서 메서드란 객체가 가지고 있는 함수를 말한다. // 메서드 안에서의 this let methodThis = { test : true , methodTest : function () { console . log ( this . test ); // true }, // methodTest() { // console.log(this.test); 위의 메서드를 이와 같이 줄여서 작성할 수 있다. // }, }; 위와 같이 객체안에 메서드를 작성한 경우 메서드를 소유하고 있는 객체인 methidThis는 this가 가리키는 대상이 된다. 2. 전역 함수가아

Arrow function(화살표 함수)과 매개변수의 기본값 설정

arrow function(화살표 함수) 표현방식 // 1번) // 한 줄 작성 let arrow1 = ( x , y ) => x + y ; arrow ( 10 , 10 ) //20 // 여러줄 작성 let arrow2 = ( x , y ) => { console . log ( "여러줄 작성" ); return x + y ; } arrow2 ( 10 , 10 ) //20 // 여러 줄 작성 (return문 미작성) let arrow2 = ( x , y ) => { console . log ( "여러줄 작성" ); x + y ; } arrow2 ( 10 , 10 ) //undefined 한줄로 코드를 작성할 경우 { }중괄호 생략이 가능하다. 하지만 여러 줄의 코드를 작성해야 하는경우 { }중괄호와 return문이 꼭 작성되어야한다. return문이 없는 경우 undefined를 반환한다. // 2번) const oneParameter = x => x ; oneParameter ( 10 ) // 10 매개변수가 하나일 경우 괄호도 생략이 가능하다. 매개변수가 두개인 경우에는 생략 불가 // 3번) const obj = ( x , y ) => ({ x , y }) obj ( 123 , 456 ); // {x: 123, y: 456} 하지만 객체를 반환하는 경우에는 ( ) 소괄호를 사용해야 한다. 매개변수에 기본값 설정 화살표 함수를 포함한 함수 선언문방식과 함수 표현식에서 모두 매개변수에 기본값을 설정할 수 있다. 매개변수에 할당연산자를 이용하여 매개변수에 값이 전달되지 않은 경우 해당 기본값으로 계산되게 할 수 있다. // ex1) let arrow = ( x = 1 , y = 2 ) => { return x + y ; } arrow (); // 결과 : 3 // ex2) let arrow = ( x , y