Harvey's TechNote

고차 함수(higher-order function)란?

 고차 함수는 하나 이상의 함수를 인수로 취하는 경우 또는 결과로 함수를 반환하는 함수를 의미합니다.

고차함수의 예로는 함수와 요소의 배열을 입력하여 배열의 각 요소 하나하나에 적용하여 변환된 요소들의 새로운 배열을 반환해주는 map 함수, 또 일정 조건을 만족하는 요소들만 모인 배열들을 반환하는 filter 등이 있습니다.

고차 함수는 복잡한 알고리즘 구현을 크게 단순화 할 수 있기에 굉장히 효율적인 도구입니다. 데이터를 조작하고 계산할 때 고차함수를 사용하면 굉장히 효율적입니다.

ex)함수를 인자로 받고, 함수를 리턴.

function addPlusThree(plusNum){
  return plusNum+3; 
}

function addMinus(added, func){
  const plused = func(added);
  console.log(plused);
  
  return function(minusNum){
    
    return plused - minusNum ;
  
  };
  
}

console.log(addMinus(5,addPlusThree)); // function(minus) { return plused - munusNum}이 리턴됩니다.

const test = addMinus(5,addPlusThree); //

console.log(test(2)); // addplusThree에 들어가 8이된 값에서 addMinus의 return 함수에서 2가 빼진 6을 리턴합니다.

고차함수 map  ->  배열의 각 요소에 함수를 적용한 새로운 배열을 반환해줍니다.

let arr = ["Yunsu" , "JJangoo" , "Jisung"];

let result = arr.map(function(ele){
    
  return "Hi "+ ele;
  
})

console.log(result);   //["Hi Yunsu","Hi JJangoo","Hi Jisung"]

고차함수 filter -> 배열의 각 요소중 함수를 만족하는 요소들이 모인 새로운 배열을 반환해줍니다.

let arr =[203,532,15,24];

let result = arr.filter(function(ele){
  
    return ele>100;
  
})

console.log(result); //[203,532]

고차함수 reduce  -> 초기값을 설정하고 각 요소를 돌며 함수를 적용한 최종 값을 반환해줍니다.

let arr = ['바','보','멍','청','이'];

let result = arr.reduce(function(acc,cur,idx){
  

    
  acc+=cur;
  return acc
  
},'나는 ');

console.log(result); // "나는 바보멍청이"

querySelector / querySelectorAll

querySelector 와 queySelectorAll 은 CSS의 선택 구문을 사용하여 HTML문서에서 element를 선택할 수 있는

두가지 방법입니다. 

querySelector 는 selector와 일치하는 첫 번째 요소만 반환하는 대신 일치하는 모든 요소가 포함된 노드 목록을 반환합니다. 

const first = document.querySelector('p');

querySelectorAll은 querySelector와 비슷한 방식으로 자동하지만 셀렉터와 일치하는 모든 요소가 포함된 노드 목록을 반환합니다.

const all = document.querySelectorAll('p');

Class ex)

const User = function(name,age){
	this.name = name;
   	this.age = age;
    this.showName = function(){
    	console.log(this.name);
    };
};

const mike = new User("Mike",30);

class User2 {
	constructor(name,age){
    	this.name = name;
        this.age = age;
	}
	showName(){
	console.log(this.name)
    }
}

const tom = new User2("Tom",19);

tom.showName();
mike.showName();

Class 상속 ex)

class Car{
	constructor(color){
    	this.color = color;
        this.wheel = 4;
        }
   	drive(){
       	console.log("drive...");
       	}
  	stop(){
    	console.log("STOP!");
        }
}

class Bmw extends Car{
	park(){
    	console.log("PARK");
    }
    stop(){ //동일한 메소드 명으로 정의하면 기존 메소드 내용을 덮어씌운다.
    	//super.stop(); ->부모의 메소드 내용에서 확장하고 싶을 때 사용한다(super).
        console.log("OFF");
        }
}

const z4 = new Bmw("blue");

const Bmw = function(color){
	const c = color;
    this.getColor = function() {
    		console.log(c);
	};
};

ex) 공통된 car의 속성을 상속받음. bmw, benz, audi 는 car의 프로토타입들이 되는 것.

const car = {
	wheels : 4,
	drive() {
		console.log(“drive..”) ;
	},
};

const bmw  = {
	color: “red”,
	navigation: 1,
};

const benz = {
	color: “black”,
};

const audi = {
	color: “blue”,
};

bmw.__proto__ = car;
benz.__proto__ = car;
audi.__proto__ = car;


//아래와 같이 계속 상속 가능. 
const x5 = {
	color: “white”,
	name: “x5”,
};

x5.__proto__ = bmw .

ex2)

const Bmw = function (color) {
	this.color = color;
};


//아래와 같이 Bmw의 프로토타입들에게 속성을 부여하는 것도 가능. 
Bmw.prototype.wheels = 4; 
Bmw.prototype.navigation = 1;
Bmw.prototype.stop = function() {
	console.log(“Stop!”);
};
Bmw.prototype.drive = function() {
	console.log(“drive ..” );
};

const x5 = new Bmw ("red");
const z4 = new Bmw("blue");

* 아래와 같이 코드를 짜면 초기 설정된 색상을 이후에 변경할 수 없음.

const Bmw = function(color) { 
	const c = color;
	this.getColor = function() {
		console.log(c);
	};
};

*push() : 뒤에 삽입

*pop()   : 뒤에 삭제

*unshift(): 앞에 삽입

*shift() : 앞에 삭제

*arr.splice(n.m) : 특정 요소 지움. (n:시작 m: 개수)

*arr.splice(n,m,x) : 특정 요소 지우고 추가

*arr.concat(arr2,arr3...) : 합쳐서 새배열 반환

구조분해 할당

*구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식이다.

ex)

let users = ['Mike','Tom','Jane'];

let[user1, user2, user3] = users;

 ->let user1 = user[0];

     let user2 = user[1];

     let user3 = user[2]; 와 같다.

let a = 1, let b = 2 에서 a와 b의 값을 바꾸려면 원래 c라는 임의변수를 이용하여 바꿔야했지만 [a.b] = [b,a]와 같은 식을 이용하여 간편하게 바꿀 수 있다.

ex)

Const superman = {
  name:'clark',
  age: 33,
 
}

접근

superman.name

superman['age']

추가 

superman.gender = 'male';

superman['hairColor'] = ' blue ';

삭제

delete superman.hairColor;

객체 프로퍼티로 할당 된 함수.

const superman = {
  name:'clark',
  age : 33.
  fly : function(){
    console.log('날아갑니다.')
  }

// =fly(){
//    console.log('날아갑니다.')
// }
  
}

작성하는 법 ex)

function sayHello(name){
	console.log(`Hello, &(name)`);
}

아래와 같이 전역 변수와 지역 변수를 let으로 지정하는 경우 서로 정의할 수 있고 서로 간섭 받지 않음. 

let msg = " welcome ";

function sayHello(name) {
	
	let msg = "Hello"
	console.log(msg + ' ' + name); 

}


sayHello( 'Mike' );
console.log(msg);

아래와 같이 or을 사용하여 변수 저장이 가능하다.

let name = '';
let newName = name || 'friend';
console.log(newName);

name이 비어있어 friend가 로그창에 찍힌다. 

name에 이름이 저장되어있으면 name이 찍히게 된다. 

문자형으로 반환 -> String()

숫자형으로 반환 -> Number()

불린형으로 반환 -> Boolean()

위 괄호에 변환시키고자 하는 값을 넣으면 된다.

주의사항 

Number(null)              -> 0

Number(undefined)   -> NaN

Boolean(0)                  -> false

Boolean('0')                -> true

Boolean('')                  -> false

Boolean(' ')                 -> true           를 반환한다.