200903 [Prep]

Arrow Funcion(화살함수)

 : ES6 에서 추가된 함수 기능으로 간결한 익명의 함수 이다.(lambda)

 

 ＠화살함수의 특징

  - 혼자서는 사용 될 수 없다. 

    : 간결한 익명 함수이고 메소드 형식으로 표현 할 수 없기 때문에 혼자서는 사용 할 수 없다.

  - 사용 시 parameter 값을 받아 사용하게 된다.

  // 일반함수 예제
  arrow.map(function(parameter){조건식});
  
  // 화살함수 예제
  arrow.map((parameter) => { ... });

    : 위의 예시처럼 더 간갈한 익명 함수를 선언 할 수 있게 되었다.

  - 화살 함수는 this, arguments, super(class 상속), new.target(생성자) 를 바인딩 하지 않고 오직 상위객체의 값만을 사용 할 수 있다.

    : 보통 함수에서 선언 된 this 는 window(node에서는 global) 를 담고 있지만 여기서는  상위 객체와 module.exports 를 참조한다.

※arrow function 은 parameter를 받아 사용하기 편리하지만,  this, arguments, super(class 상속), new.target(생성자)가 사용 될때는 가급적 사용하지 않는것이 좋다. 

 

Destructuring(구조화)

  : 구조, 분해, 할당에 대한 기능

 

1. 배열

  ★배열의 분해

    :  배열 리터럴 표현식을 사용하면 즉석에서 쉽게 데이터 뭉치를 만들 수 있다. 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의 할 수 있다.

let array = [1, 2, 3, 4, 5];
let [a, b] = array;
console.log(a); // 1
console.log(b); // 2

위의 예시처럼 [a ,b] 라는 값에 array에 해당하는 값을 할당 할 수 있다.

 

    ★문법의 배열 분해 적용

    : spread syntax 를 사용 할 수 있다.

let array = [1, 2, 3, ,4 ,5]
let [start , ...rest] = array
console.log(start) // 1
console.log(...rest) // [2, 3, 4, 5]

※spread syntax 사용 시 반환되는 값의 타입을 잘 기억해 두자.

 

2. 객체

  : 배열과 동일하게 객체 역시 분해 하여 쉽게 값을 할당 할 수 있다.

 

  ★객체의 할당

let age = 20;
let current = 'study'

let obj = {age, current , job : 'student'}

console.log(obj) // {age : 20 , current : 'study' , job : 'student'}

  ★객체의 분해 할당 

  : 객체 리터럴 표현식을 사용하여 분해 할당 할 수 있다.

let obj = {age : 20 , current : 'study' , job : 'student'};

let {age} = obj

console.log(age)  // 20

 

★문법의 객체 분해 적용

let obj = {num : 1 , age : 18 , 
           shcool : {grade : 2 , 
          	 major : {science : ture, litetature: false }
          	 },
             sex : male
           }

// spread가 앞에 올때 : spread객체의 내용을 뒤에오는 내용으로 바뀐다
let chObj = {...obj, num : 4 , age : 17}
            
 console.log(chObj) //     {num : 4 , age : 17 , 
          					shcool : {grade : 2 , 
          					 major : {science : ture, litetature: false }
          					 },
            			   sex : male}     

// spread가 뒤에 올때 : spread객체의 내용으로 덥어 쓴다.
let overWriteObj = {num : 4 , age : 17 , ...obj,}

concole.log(overWriteObj) // {num : 1 , age : 18 , 
          					  shcool : {grade : 2 , 
          					   major : {science : ture, litetature: false }
          					  },
            				  sex : male}
                              
// spread 의 사용 : spread 가 쓰인곳의 내용만 바꾼다.
let chDepartmentObj = {num : 5 , age : 19,
						shcool:{ grade : 3 , ...obj.major},
                        sex : male}
                        
 concole.log(overWriteObj) //  {num : 5 , age : 19 , 
           						shcool : {grade : 3 , 
          						 major : {science : ture, litetature: false }
          						 },
            					 sex : male}

※객체와 문법의 spread syntax 사용 방법과 사용 위치에 따른 결과값을 기억해 두자.

 

3. call / apply / bind 의 사용 예시

 ★call  : 이미 할당 되어있는 함수 or 객체 의 값을 현재 쓰이는 함수의 parameter 로 재할당 하기 위해 사용한다.

// call 의 기본 사용 예시
// exam.call(this, arg)  => arg 는 argument 인자를 뜻하며 인자는 this 가가지고 있는 범위내에서 추가가 가능하다
// this 는 가지고 오려고 하는 함수 또는 객체를 가르킨다.

let obj = {msg : 'hello'}

function exam(){
	return this;
    }
    
console.log(exam.call(obj))  //  {msg : 'hello'}   
console.log(exam.call(obj).msg)  //  'hello'

※ 위의 예제처럼 arg 는 생략이 가능 하고 가져올 값이 많을 때는 선택적으로 가져 올 값을 추가 할 수 있다.

 

 ★apply : 기능과 사용 방법은 call 과 유사하지만 다른점은 받아오는 인자의 값이 배열 or 객체의 요소가 가능하다는 점이다.

// apply의 기본 예시
// exam.apply(this, [arg])
// this 값과 arg 값은 상활에 따라서 생략이 가능하다.
let obj = {msg : 'hello'}

function exam(){
	return this;
    }
 
 console.log(exam.apply(obj))  //  {msg : 'hello'}
 
 // apply의 사용 예시
 
 function exam2(name, age, ...arg){
 	return `${thsi.sex} ${name} ${age} ${arg.length === 0 ? '' : '' + this.feature + : + ${job}}`
 }
 
 let person = {sex: male, feature : 'job'}
 let person2 = {sex: female , feature : 'job'}
 
 console.log(exam2.apply(person, ['john', 35])
  // 'male john 35살'
 console.log(exam2.apply(preson, ['jane' , 20 , 'student'])
  // 'female jane 20 job:student'

※ 위의 예시를 이해하고 해당 기능을 연습해 두자.

※ apply 를 사용 하여 유사배열의 값을 사용 할 수 있다는 것! 꼭 숙지

※ call 과 apply 를 이용하여 Array.prototype 의 메소드를 사용 하는 방법 예시 확인 및 숙지 해야한다..