React_core // 20.03.24_02
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]라는 배열이 나오게 된다.
이 외에도 내장함수는 엄청 많다.
나중에 찾아보면서 공부하자!
Author And Source
이 문제에 관하여(React_core // 20.03.24_02), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@passion10377/Reactcore-20.03.2402저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)