memo(udemy)

array

push 추가 pop 제거 stack

shift 제거 unshift 추가 queue

arr1.concat(arr2) 배열합치기

.length 길이

.indexof("?")인덱스 확인

includes 배열에 들어있는지

reverse 배열순서 역순

slice(2,4)2번부터 4번까지  slice(-3) 뒤에서세개

splice(2,3,"something") 2번부터 3개를 제거 후 " " 내용 추가 (0으로 제거 안할수도있음)

배열을 비교 할 때 배열 속 내용이 아닌 메모리 참고 값을 비교한다.

속의 값이 같아도 === false 반환

 

object

객체에서 만드는 키는 문자열로 변환됨.

.key 와 ["key"]의 차이 - 대괄호를 쓰면  표현식을 넣는게 가능.

["k"+"ey"] 또는 대괄호 속에 변수를 넣는것이 같이 가능.

 

for of

const arr=[1,2,3,4,5];
for(let sub of arr){
	console.log(sub);
}

객체 루프

for in 

const obj={
name : "now",
blog : "t",
}
for(let info in obj)
{
	console.log(`${info} is ${obj.[info]})
}

Object.keys(obj);

Object.values(obj);

Object.entries(obj); //  key/value 

 

 

Lexical Scope

부모 함수 안에 중첩된 내부 함수는 해당 외부 함수 범위 내 정의된 변수에 액세스 가능

function outer(){
	const arr = [1,2,3,4,5];
    function inner(){
    	console.log(arr);
    }
}
outer();

로 할 시에 정상적으로 실행되지 않음. outer 함수 안에서 inner()을 실행해야 함.

중첩된 함수나 내부 함수는 상위 몇단계 위에 있든 액세스 가능.

 

 

함수표현식

function add(x,y)
{
	return x+y;
}
대신
const add = function (x,y)
{
	return x+y;
} //이 경우에는 함수의 이름이 add인것이 아님 변수에저장하는것

자바스크립트에선 함수가 값이다. 숫자, 객체를 저장하고 전달하는것과 같이 함수를 저장하고 전달한다.

 

고차함수

다른함수를 인수로 받아서 작업을 하거나 함수를 반환할 수 있는 함수.

function execute(func)
{
	func();
}

function dice()
{
	const result = math.floor(math.random()*6)+1;
    console.log( result);
}

execute(dice);

여기서 execute(dice()); 와 같이 해버리면 인수를 함수로 하는게 아닌 dice의 결과물 숫자를 넣는꼴

 

팩토리함수

함수를 반환하는 함수.

function makeFunc(min, max){
	return function (num){
    		return num>=min && num>=max
    }
}

const student = makeFunc(8,17);

 

메서드

메서드는 객체에 종속된 특성. 함수에 포함되는 개념. 메서드 이름 앞에 점찍어 사용.

모든 메서드는 함수지만 모든함수가 메서드는 아님. 메서드들 객체에 추가 가능.

배열은 JS에서 객체이고, 문자열 사용시 문자열은 객체안에 있음.

const myMethod = {
	square : function(num) {
    	return num*num;
    }
    
}

위와 같은것이

const myMethod = {
	square(num) {
    	return num*num;
    }
    
}

 

this

this는 메서드에 있는 객체를 기리킴.

const one = {
	name:lee,
    whatsName()
    {
    	console.log(`${this.name} is name`);
    }
}

const two = one.whatsName;
two();

이를 실행했을 때에 two에서 this는 one을 가리키지 않음. window 객체(최상위객체)를 가리키게 됨.

this키워드는 점 왼쪽을 가리킴.  two(); 왼쪽에는 없었기에 기본값인 window 객체.

 

 

try 내부 내용에 에러가 있으면 catch (???) 로 넘어가고 ???에 에러 내용이 담김.

 

forEach

배열안의 각 항목에 대해 실행함.

const numbers=[1,2,3,4,5];
numbers.forEach(function(el){
	console.log(el);
}

 

map

콜백의 반환값으로 새로운 배열 생성.

const fullNames = [{first:'cheolsu', last:'kim'},{first:'ho',last:'lee'}];
const firstNames = fullNames.map(function(el){
    return el.first;
})

 

화살표함수

const firstNames = fullNames.map((el) =>{
    return el.first;
})

중괄호를 괄호로 바꾸고 return 키워드를 뺄 수 있음

또는 한줄로 만들어서 괄호까지 뺄 수 있음.

이때는 바디에 표현식이 딱 하나만 있어야 함.

 

filter

반환값이 참이면 새 배열에 들어감.

const number[1,2,3,4,5];

const num = numbers.filter(n =>{
	return n<3;
}

 

 

객체에 사용할 때

movies.filter(movie => movie.score > 70).map(movie=>movie.title)

과 같이 map과 filter 한번에 사용 가능.

 

배열에서 한개이상 참이면 참 반환 .some 모두일땐 .every

 

reduce

배열을 조건에따라 하나만 남긴다.

[1,3,5,7,9].reduce((a,b) => {

    return a+b;

});

와 같은 형태가 되면 첫실행에서 a는1 b는 3 리턴값이 a에 저장되고 b는 5로 실행, 총합 으로 리턴

두번째 인자를 넣으면,

[1,3,5,7,9].reduce((a,b) =>, 100);

100부터 실행돼서 리턴은 배열+100

화살표 함수에서 this는 다르게 작동함. 메서드에선 정규함수식 시용.

 

기본매개변수, 매개변수에서

function func(a=1)과 같은 형태면 a가 입력 안됐을때 기본값이 1

기본값이 있는 매개변수를 뒤쪽으로 배치

 

스프레드구문 ... 문자열에도 사용가능.

배열에 ... 사용시 배열 형태가 아니게됨.

 

객체 스프레드

객체에 ... 사용시  키 값 모두 객체형태로

두개의 객체를 ... 사용시 중복되는 키가 있으면 나중에 호출되는게 덮어씌움

{...[2,4,6,8]}

과 같은 형태로 배열로 객체를 만들면

키는 index값 값은 배열의 각 index에 해당하는 값이 들어감.

 

자바스크립트에서 배열과 객체는 포인터같이 새로운 변수에 넣으면

원래값을 참조하게 되는데 스프레드 구문을 사용하면 값을 복사함.

 

 

rest

인수 객체는 배열이 아니다. 배열 메서드를 사용할 수 없으므로 arguments.reduce 와 같이 사용할 수 없음.

함수 선언을 할 때에 function func(...num)과 같이 사용하면 배열형태로 인수가 저장된다.

인수에 스프레드를 사용하면 펼치던 것과 반대로 배열로 모으는 효과가 되는 것.

배열 메서드를 사용할 수 있게 되는 것.

 

배열 분해.

const num = [1,2,3,4,5];

const [zero,one,two, ..every]= num;

하면 zero에 1 one에 2 two에 3 every에 나머지가 배열로 저장됨.

 

객체 분해

const user=

{

firstname: hong,

lastname:lee

}

의 형태로 있으면 

const {firstname, lastname} = user; 하면

각각 해당값이 해당 변수에 들어감. 

 

const {name:firstname}=user; 하면

name이란 변수에 user.firstname의 값이 들어감.

default value를 줄 수도 있음.

 

매개변수 분해

매개변수로 객체를 받을때 유용.

function fullName({firstname,lastname}) {

   return `${firstname} ${lastname}`

}

과 같은 형태로

 

 

 

---------------------------------------

생성자 함수

function User(name, age, job)

{

this.name=name

this.age=age

this.job=job

this.pr = function(time){

  console.log(`플레이타임 ${time}`)

}

const now = new User('Now',23,'student')

console.log(now)

하면

User {

name: 'Now',

age:23,

job:'student',

pr:[Function]

}

과 같이 출력.

now.pr("25")

 

class

https://velog.io/@lshjh4848/%ED%81%B4%EB%9E%98%EC%8A%A4%EC%99%80-%EC%83%9D%EC%84%B1%EC%9E%90

class Person{

constructor() {    //프로퍼티 사용 위한 생성자함수

   this.name = 'Now';

}

prtName(){

console.log(this.name);

}

}

const person = new Person();

person.prtNmae();

 

클래스 선언시

class Human extends Person{

  super();

과 같이 사용해서 다른 클래스의 프로퍼티와 메서드 상속 가능

이때는 super 메서드를 추가해야함

new 키워드로 클래스의 인스턴스 생성

 

 

위 class 내용은 구식방식

 

class Person {

 name:'Now';

}

const person = new Person();

console.log(person.name);

과 같이 사용 가능.

 

class People extends Person {

~~~

}

과 같이 extends 하고 이미 있는 class를 선언시 내용이 상속됨.