React 들어가기 전 JS 정리

함수 선언 순서

let myFun = function(){
console.log("이것은 먼저 선언이 되야 사용됩니다.");
}

myFun();
myFun2();

function myFun2 (){
console.log("이것은 뒤에 선언되어도 함수가 먼저 읽혀서 상관없이 작동합니다.");
}

콜백 함수 예시

personCheck(false);
personCheck(true,eu);


function personCheck(isForeigner, typeCallback) {
	if (isForeigner) typeCallback();
	else console.log("한국인");
}

function eu(){
	console.log("유럽인");
}

function us(){
	console.log("미국인");
}

undefined일때 는 10으로 지정이됩니다.

a = a ?? 10 

객체를 배열로

const obj = {
	name: "Hong",
	age: 31,
	addr: "Korea",
	hobby: "sleeping"
};
let keys = Object.keys(obj) // key를 array로 반환한다.
let values = Object.values(obj) // values를 array로 반환한다.

console.log(keys);
console.log(values);

배열 내장함수들

arr.forEach()

하나씩 가져와서 컨트롤한다.

const arr = [1,2,3,4];
arr.forEach(e => console.log(e));

arr.includes()

있는지 없는지 boolean 값 return

const arr = [1,2,3,4];
console.log(arr.includes(3));

arr.indexOf()

있는지 없는지 index위치

const arr = [1,2,3,4];
console.log(arr.indexOf(3));

arr.findIndex()

객체로 이루어진 배열에서 값(value)을 찾을때, 일치요소가 두개라면 먼저 발견한 index만 리턴

const arr = [
	{color: "red"},
	{color: "black"},
	{color: "blue"},
	{color: "green"}
];
console.log(arr.findIndex(e => e.color === "blue"));

arr.find()

마찬가지지만 키 값으로 이루어진 프로퍼티 자체({ key : value })를 리턴

const arr = [
	{color: "red"},
	{color: "black"},
	{color: "blue"},
	{color: "green"}
];
console.log(arr.find(e => e.color === "blue"));

arr.map()

하나씩 빼내서 return하여 재정의한다.

const arr = [1,2,3,4];
const newArr = arr.map(e => e*2);
console.log(newArr);

arr.filter()

객체배열에서 선택해서 객체를 가져오기

const arr = [
	{color: "red"},
	{color: "black"},
	{color: "blue"},
	{color: "green"}
];
const newArr = arr.filter(e => e.color === "blue");
console.log(newArr);

arr.slice()

배열을 자르는 함수가

const arr = [
	{color: "red"},
	{color: "black"},
	{color: "blue"},
	{color: "green"}
];
arr.slice(0,2);

arr1.concat(arr2)

arr, arr2를 합치는 함수

const arr1 = [
	{color: "red"},
	{color: "black"}
];
const arr2 = [
	{color: "blue"},
	{color: "green"}
];
const newArr = arr1.concat(arr2);

console.log(arr1);
console.log(arr2);
console.log(newArr);

arr.sort()

원본배열을 정렬, 기본적으로 문자열을 정렬하므로 숫자를 정렬할려면 함수식을 재정의 필요

const arr = [4,20,1,33,2,10,3];
arr.sort();
console.log(arr);

const arr2 = [4,20,1,33,2,10,3];
const compare = function (a,b) {
	if(a>b) return 1
	if(a<b) return -1
	return 0
};
arr2.sort(compare);
console.log(arr2);

arr.join()

배열을 문자열로 한줄로 표현 변수 입력시 각 배열사이에 삽입

const arr = ["으잉", "똥 쌋어"];
const newString = arr.join(" 누가 "); // string
console.log(newString);

단락회로

js는 null undefined 0, -숫자, ""를 전부 false로 인식함
해당 특성을 이용하여 아래와 같이 검증문을 확장가능함.

//before : 일반적인 방식
/*const getName = e => {
	if(!e) {
		return "not Object";
	}
	return e.name;
}*/

//after : AND 와 OR을 이용한 단락 회로 방식
const getName = e => {
    //e가 null이면 이미 false임  AND(&&)조건에 따라 뒷 수식을 볼 필요도 없음. 
  	//e.name에서 not defined가 발생안함
	const name = e && e.name;
  	//name이 존재하면 참이므로 name을 return
  	//name이 거짓이라도 OR(||)조건에 따라 "not Object"가 상수이므로 참임. 이 값을 리턴.
	return name || "not Object";
}

let person = null;
const name = getName(person);
console.log(name);

비구조 할당

let temp = b 없이 두개의 데이터를 스왑가능하다. 배열의 예시를 봅시다.

let a = 10;
let b = 20;

[a, b] = [b, a];
console.log(a,b);

객체의 비구조화는 다음과 같다.

let numbers = {one:"일", two:"이", three:"삼"}

//before
//let one = numbers.one;
//let two = numbers.two;
//let three = numbers.three;

//after

let {one, two, three} = numbers;

console.log(one, two, three);

변수 명을 바꾸는 것도 가능하다.

let {one:myCnt, two, three} = numbers;
console.log(myCnt, two, three);

디폴트를 설정하는 방법입니다.

let {one:myCnt, two, three, four="기본값"} = numbers;
console.log(myCnt, two, three, four);

spread 연산자

배열에서 쓰는 그것맞습니다 ...을 이용하여 배열형태를 삽입하거나 참조가능합니다.
다만 이것을 객체 단위에서도 사용 할 수 있습니다.

const arr1 = ['a','b','c'];
const arr2 = ['d','e','a'];

const newArr = [...arr1, ...arr2];

const base = {type: "electonic", brand: "LG", name: "default"}
const obj1 = {...base, name: "tv"}
const obj2 = {...base, name: "phone"}

console.log(newArr);
console.log(obj1);
console.log(obj2);

비동기 동기 통신

설명이 좀 있어서 다른 포스트에 넘깁니다.