React_core // 20.03.24_02

3028 단어 ReactReact

Javascript 기초 이론

Spread 연산자 (spread 문법)

어떤 객체 안에 있는 요소들을 객체 바깥으로 꺼내준다.

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

... <- 이 점 3개를 스프레드 문법이라고 한다.
배열 안에 있는 항목들(요소들)을 전부 꺼내준다.
즉 [...array]는 array에 있는 항목을 전부 꺼내서
새로운 배열(new_array = [])에 넣어준다는 뜻이다.

조건부 삼항 연산자

삼항 연산자는 if문의 단축형태이다.
사용법으로는 조건? 참일 경우 : 거짓일 경우
if문으로 본다면 조건과 참일때의 조건, else일때의 조건이다.

let info = {name: 'koong', id: 0};
let is_dog = info.name === 'koong'? true : false;
console.log(is_dog);

if문 보다 연산이 훨씬 빠르다

Array의 내장 함수

map

배열에 속한 항목을 변환할 때 많이 쓰인다.
원본 배열을 흐트러트리지 않은 채로 변환한 값을 새로운 배열로 만들어 준다.

const array_num = [0,1,2,3,4,5];

// array_num이라는 배열을 map함수를 이용해 돌려주겠다 라는 뜻이고,
// 돌려줄때 각각의 항복은 array_item이라는 이름으로(for문에서는 i처럼) // 돌려주겠다 라는 것이다. 그리고 그 돌려준 항목들을 return을 거쳐서 
// new_array에 넣어 주겠다는 뜻!!
const new_array = array_num.map((array_item) => {
	return array_item + 1;
});
// array_num에 1씩 더해진 값이 나온다.
console.log(new_array);

filter

map함수를 돌려서 새로 얻어낸 배열도 원본 배열 하고 길이가 같다.
하지만 filter함수는 내가 원하는 원소만 뽑아준다.
원래 배열에서 내가 필요한 원소들만 걸러서 가지고 나오는 것.

const array_num = [0,1,2,3,4,5];

const new_arry = array_num.filter((array_item) => {
	//특정 조건을 만족할 때만 return하게 된다
	return array_item > 3;
    //return에는 true 혹은 false가 들아가야 한다. (이게 조건이다.)
});

console.log(new_array);

concat

배열에 합쳐서 새로운 배열을 만들어주는 함수. // 원본 배열이 변하지 않음

const array_num01 = [0,1,2,3];
const array_num02 = [3,4,5];

const merge = array_01.concat(array_num02);
console.log(merge);
//merge = [0,1,2,3,3,4,5]

이 때 중복된 값은 없어지지 않는데 없에는 방법중에 하나는

const array_num01 = [0,1,2,3];
const array_num02 = [3,4,5];
//Set 이라는 자료형은 중복되는 걸 허용하지 않는 자료형
const new_merge = [...new Set(array_num01.concat(array_num02))]
//new Set으로 만들었지만 결국엔 배열로 만든 것이다.

from

배열을 만들 때 사용한다.
유사배열, 새로운 배열을 만들때 주로 사용한다.
유사배열이란? [값1, 값2, 값3 ...] 이런 모양으로 생겼지만 배열의 내장 함수를 사용하지 못하는 배열이다. DOM dodelist같은 게 유사배열이다.

//배열화 하는 것
const my_name = 'passion';
const my_name_array = Array.from(my_name);
console.log(my_name_array);

//길이가 문자열과 같고, 0부터 4까지 숫자를 요소로 같는 배열
const text_array = Array.from('hello', (item, idx) => {return idx});
//'hello'라는 걸 어떻게 해줄껀지
//여기서 item이라는 것은 'hello'의 하나, 하나가 이고 idx는 순서가 된다.
console.log(text_array);

//새 배열, 즉 빈 배열을 초기화 해보자
//이 말은, 정해진 값은 없어도 원하는 길이에 따른 배열을 만들 수 있다.
//길이가 4고, 0부터 3까지 숫자를 요소로 같는 배열
const new_array = Array.from({length: 4}, (item, idx)=>{return idx});
console.log(new_array);
// 만약 (item, idx) => {return idx}라는 값을 안주면 길인느 4로된 [undefined, undefined, undefined, undefined]라는 배열이 나오게 된다.

이 외에도 내장함수는 엄청 많다.
나중에 찾아보면서 공부하자!

좋은 웹페이지 즐겨찾기