레플릿을 풀고 스터디를 하며 새로 알게된 개념에 대해 정리해보고자 한다.

🟥 콜백함수(Higher-order Function)

콜백함수는 파라미터로 함수를 전달하고, 전달받은 함수를 함수의 내부에서 실행시킨다. 나중에 호출되는 함수라고 생각하면 되고, 어떤 이벤트가 발생하거나 특정 시점에 도달하면 시스템에서 호출한다. 따라서 전달 받은 즉시 실행이 될 필요가 없다. 참고로, 포함하고 있는 함수의 변수와 전역변수에 접근이 가능하다(클로저).

let animals = ['dog', 'cat', 'rabbit', 'pig']
animals.forEach(function (eachAnimal, index){
  console.log(index + 1 +"." + eachAnimal);
});
/*
"1.dog"
"2.cat"
"3.rabbit"
"4.pig"
*/

더 읽어보기(출처)

🟧 화살표 함수(Arrow Function)

function키워드 대신 간편하게 화살표(=>)를 사용한다.

//매개변수 지정
     () => {...} //매개변수 없을 경우
      x => {...} //매개변수 1개, 소괄호 생략 o
 (x, y) => {...} //매개변수 2개, 소괄호 생략 x
 
 //함수 몸체 지정_single line block
 x => {return x * x}
 x => x * x
 () => {return {a: 1};}
 () => ({a: 1}) //위 표현과 동일하지만 객체 반환시 소괄호 사용
 //함수 몸체 지정_multi line block
 () => {
   const x = 10;
   return x * x;
 }

화살표 함수는 익명 함수로만 사용할 수 있기 때문에 호출을 위해 함수 표현식을 사용한다.

const arr1 = [1, 3, 5]
const arr2 = arr1.map(x => x * x);
//만약 함수가 실행내용이 없이 return만 한다면 return 키워드와 중괄호가 생략 가능하다. 
//원래대로라면 arr.map(x => {return x * x });

console.log(arr2); //[1, 9, 25]

일반함수와의 가장 큰 차이점은 this이다. 일반함수에서 this는 전역객체 window를 가리키며, 메소드를 호출한 객체를 가리키게 하려면 bind, call, apply 방법을 사용할 수 있다. 하지만, 화살표 함수의 this는 언제나 상위 스코프의 this를 가리키며 메소드로 변경할 수 없다. 이를 Lexical this라고 한다. 이 때문에 <화살표 함수 사용을 피해야할 경우>가 있다.

• 메소드 정의(메소드로 정의하면 this는 전역객체 window를 가리킴)
• prototype(화살표 함수는 prototype 프로퍼티 없음)
• 생성자 함수(생성자 함수는 prototype 프로퍼티를 가짐)
• addEventListener 함수의 콜백 함수(this는 전역객체 window를 가리킴)

더 읽어보기(출처)

🟨 배열과 반복문을 함께 사용하는 이유

배열은 index와 length를 갖는다는 특징이 있다. 따라서 반복문을 통해 순차적으로 모든 원소에 접근하기 좋다.

function forLoops() {
  let myArray = [];
  for (let i =1; i<10; i +=2) {
    myArray.push(i)
  }
  return myArray
}
console.log(forLoops())//[1, 3, 5, 7, 9]

🟩 Array

array를 선언하는 방법

// 대괄호
let arr1 = [];
// Array() 생성자 함수로 배열 생성
var arr1 = new Array('a', 'b', 'c');
var arr2 = new Array(3); //원소 1개/숫자인 경우 배열의 크기

Array.from()

arrayLike를 얕게 복사해 새로운 array 객체를 만든다. 중간의 다른 배열을 생성하지 않으며, lentgh 속성은 1이다.

arrayLike : 배열로 변환하고자 하는 유사 배열 객체나 반복 가능한 객체

• 유사 배열 객체 : length 속성과 인덱싱 된 요소를 가진 객체
• 순회 가능한 객체 : Map, Set 등 객체의 요소를 얻을 수 있는 객체

//구문
Array.from(arrayLike[, mapFn[, thisArg]])
//예시
Array.from('hi');//['h', 'i']
Array.from([1, 2, 3], x => x * x); //[1, 4, 9]

더 읽어보기(출처)

Array.of()

인자의 수나 유형에 관계 없이 가변 인자를 갖는 새 Array 인스턴스를 만든다.

Array(5); //[ , , , , ] 주의!!!! length 속성이 5
Array.of(5);//[5] 

Array(1, 2); //[1, 2]
Array.of(1, 2); //[1, 2]

더 읽어보기(출처)

sparse Array

let a = Array(3); //[ , , ] 
let b = new Array(2); //[ , ]

전개 구문(spread syntax)

배열, 문자열과 같이 반복 가능한 문자를 확장해 0개 이상의 키-값 쌍으로 객체 확장 가능하다. 즉, 말 그대로 펼치는게 가능하다. 사용법은 간단하게 ...을 찍어주는 것!

//객체
{...obj}
//배열
[...arr]
{...arr} //배열은 객체나 배열로 담을 수 있음

//펼칠 대상이 객체
const customer1 = {
  name: 'dabin',
  age: 25
}

const customer2 = {...customer1};

const customer3 = {
  ...customer1,
  job: 'student'
}//추가 프로퍼티 작성

console.log(customer1);//{age: 25, name: "dabin"}
console.log(customer2);//{age: 25, name: "dabin"}
console.log(customer3);//{age: 25, name: "dabin", job: 'student'}

console.log(customer1===customer2)//false
//서로 다른 주소 값을 가진 독립적인 객체이다. 

//펼칠 대상이 배열
const arr1 = ['apple', 'banana', 'grape']
const arr2 = [...arr1]

console.log(arr1===arr2)//false 독립적인 배열이다. 

const obj1 = {...arr1}
console.log(obj1) //{0: "apple", 1: "banana", 2: "grape"}
//객체로 만들면 각 요소는 프로퍼티 값이 되고 배열의 index가 프로퍼티 name이 된다. 

//나머지 매개변수로 활용
function myFunction(teamName, ...members){
  return {name: teamName, members: members}
}
const team1 = myFunction('쪄죽코', '다빈', '수빈', '빈빈');
const team2 = myFunction('추죽코', '빈다', '빈수', '빙빙');

console.log(team1);
/*
{
  members: ["다빈", "수빈", "빈빈"],
  name: "쪄죽코"
}
*/
console.log(team2);
/*
{
  members: ["빈다", "빈수", "빙빙"],
  name: "추죽코"
}
*/

더 읽어보기(출처)