mordern JS 반복문, 배열

강정우·2022년 12월 22일
0

JavaScript

목록 보기
29/53
post-thumbnail

반복문

of를 이용한 반복문

for(let item of basket) {
  console.log(item);
}
  • python과 가장 유사한 반복문

in을 이용한 반복문

  • 객체의 property들과 method들을 확인할 때 사용하는 반복문

  • for ...in 문은 객체 자체의 모든 열거 가능한 속성들과 프로토타입 체인으로부터 상속받은 속성들​에 대해 반복한다.
    더 가까운 프로토타입의 속성들이 프로토타입 체인 객체로부터 더 멀리 떨어진 프로토타입의 속성보다 더 우선한다.

  • for ... in 의 출력은 우선 배열의 index인를 먼저 출력하고, 개체에 연결된 속성을 출력한다.

  • 프로토타입의 속성을 출력하는데 가까운 것부터 arrCustom, objCustom을 출력한다.

const 객체명 = {1 : value1,2 : value2,3 : value3,
}

for(const property in 객체명){
  console.log(객체명[property]);
}
  • Object.entries(객체명) : [[키, 값], [키, 값]...]
    Object.keys(객체명) : [키, 키, 키...]
    Object.values(객체명) : [값, 값, 값...]

getOwnPropertyNames() hasOwnProperty()

foreach

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((i) => console.log(i));

배열

생성

const 배열이름 = [1, [2, 3], "Alex", {name : "Alex", age : 28}];
const 배열이름 = new Array();
배열이름[0] = 1;
...

삭제

  • splice(시작index, 끝index)

함수

  • push, pop, concat, join, reverse, slice, filter, split
  • map : mapping 한다고 생각하면 됨
const 다른배열이름 = 배열.map((인덱스 이름) => {
  return ~~함수~~;
})
  • indexOf : 변수안에 들어있는 index번호를 return함 단, property가 객체일 경우는 못 찾음 (-1 return)
  • findIndex : 배열의 객체를 변수로 받아서 특정 property값의 index를 찾아줌
  • find : 배열의 객체를 변수로 받아서 특정 property값의 객체 자제를 return함

기타 문법

default값 설정하기

function 함수명(number, property = 매개변수) {
  ~~logic~~
};
  
함수명(1);

👀 구조 분해 할당 (비구조화 할당) 문법 [destructuring]

  • 객체는 중괄호{ }로 구조분해할당을 진행한다.
const 객체명 = {1 :1,2 :2
}

let {1,2} = 객체명; // 단, 동일한 property 명을 써줘야함!
let {1 :180,2 : 몸무게100} = 객체명; // 정 다르게 변수명을 주고싶다면
let {2 : 몸무게100} = 객체명; // 만약 1개만 가져오고 싶다면
let {1 :180,3 : 아이큐=180 } = 객체명; // 만약 없는 값을 가져온다면 default값을 설정해줄 수 있다!!

배열 분해 할당

  • 배열은 대괄호[ ]로 구조분해할당을 진행한다.
let 배열 = [1, 2, 3];
const [item1, ...item2] = 배열;
const [, , item3, item4, item5=100 ] = 배열;

item1 = 1
item2 = [2, 3]
item3 = 3
item4 = undefined
item5 = 100
  • ... 으로 나머지 전부 할당 가능 단, 제일 뒤에 있어야함
  • , 으로 index 건너뛰기 가능
  • = 으로 default 설정 가능

구조분해 할당 활용하기

변수값 교환하기

[a, b] = [b, a]

  • 근데 python과 다르게 중괄호가 있어야함

function에서 할당받기

function 함수이름(){
  return [1, 2, 3]
};

let [a, b, c] = 함수이름()

split 활용하기

let data = "1, 2, 3";
let [one, two, three] = data.split(",");

Rest 파라미터

function getData(a, b, ...rest) {
  let [i1, i2, i3, i4, i5] = rest;
}

getData(1, 2, 3, 4, 5);

Spread 파라미터

const data = [1, 2, 3];

console.log(data); // => 객체를 반환
console.log(...data); // => 각 숫자들을 반환함
  • Rest와 마찬가지로 ...을 붙여서 정의하는 문법이다.
  • iterable한 변수 앞에 붙여서, 해당 변수의 데이터를 개별 아이템으로 분리한다.
    • iterable : 반복 가능한 객체 즉, 배열, 문자열등을 의미함.
const array1 = [1, 2, 3];
const array2 = [0, ...array1, 4, 5, 6]
  • concat() 과 다르게 원하는 위치에 붙여넣을 수 있다.
profile
智(지)! 德(덕)! 體(체)!

0개의 댓글