FrontEngineer JungBam

혼공스(챕터4) 반복문 본문

자바스크립트 개념

혼공스(챕터4) 반복문

정밤톨 2022. 11. 10. 19:49

배열

여러 자료를 묶어서 활용할 수 있는 특수한 자료형태

일반적인 선언형태
   const array = [10,20,30,40,50]
이때 배열 안에 있는 각각의 값을 요소라고 한다. 그리고 이들의 순서를 알려주는 값을 index라고 한다.
배열로 데이터를 받았을 때에 각각의 요소와 length를 확인하기 위해 가장 좋은 방법은 console.log()로 찍어보는 것이다.
사실 데이터를 받으면 거의 무조건 찍어본다...(눈으로 확인해야만 생각이 되는 수준)

배열함수 정리

★ 배열함수에서 작업하면서 가장 신경쓰는 것은
      1. 원본을 변경시키느냐 (※ 파괴적 처리 : 원본을 손상 / 비파괴적 처리 : 원본을 유지)
      2. 반환시키는 값이 어떤 것이냐

shift() - 배열을 왼쪽으로 이동 / 첫번째 삭제
unshift() - 배열을 오른쪽으로 이동 / 첫번째에 추가
pop() - 마지막 요소를 삭제하고 그 값을 반환함.
splice(x,y,z) - 배열 요소 삭제 또는 대체(추가)
slice(x, y) - 배열 요소 삭제
indexOf(찾으려는 조건) : 조건에 맞는 객체의 인덱스 값을 반환함. 찾지 못하면 -1을 반환함.
find((x, y, z) => { }) x 배열 내단일 객체 y 인덱스 z 전체 배열 => 해당 값을 찾아내면 원본 자체를 조작함. findIndex((x, y, z) => { }) find와 동일하게 작동함. 반환값이 인덱스 값일 뿐.
includes(x) : x가 배열에 포함되어있는지 true 또는 false로 반환함.
forEach((x,y,z)=>{}) 배열의 모든 객체에 함수를 적용함.(for of 문과 동일)
filter((x,y,z)=>{return 조건}) : 조건에 맞는 배열의 객체들을 배열로 반환시킴.
map((x,y,z)=>{return}) 배열의 모든 객체에 함수를 적용하여 새로운 배열로 반환시킴.(forEach와 차이점) 참조된 객체와는 별도의 함수를 통과한 새로운 배열이 생성됨.
sort((a,b) => {정렬 조건}) : 정렬하게 됨. 파라미터 없이 사용했을 때에는 첫값을 기준으로 순서대로 정렬시킴
reduce((x,y)b) 배열의 값을 점진적으로 줄이면서 계산하는 함수

반복문

하드코딩을 통해 노가다성 반복 작업을 아름답게 작업하도록 도와주는 것

For문

일반적인 형태
for(let i = 0 ; i<반복횟수; i++){반복해야하는 작업}
※ 여기서 i를 const로 선언하면 작동하지 않는다. 왜냐 i는 0부터 반복횟수 n-1회까지 변해야하는 변수이기 때문.

배of객in
(처음 JS를 배울때 정말 안외워져서 혼자서 만든 단어 배오객인)

for( const i of 배열 또는 객체){반복해야하는 작업}
※ 여기서는 const로 선언한다? let보다 const로 선언하는 것이 효율이 좋다.(이건 앞에 변수편 참고)
    그럼에도 위에서는 i가 증가해야한다며? 하겠지만 여기서의 i는 횟수가 아니라 배열 또는 객체 안에 들어있는 각각의 요소를 선언해주는 것이다.

for( const i in 배열 또는 객체){반복해야하는 작업}
※ for of문과 for in문의 차이는 i의 차이라고 생각하면 된다. for of에서는 각 요소를 가져왔지만 for in에서는 각 인덱스 값을 가져온다.
※ 나는 주로 객체의 키값에 따른 밸류값을 가져올 때 사용한다.

while문

일반적인 형태
while(조건){반복해야하는 작업}
※ 조건에 합당하다면 계속해서 반복을 한다.

※ break와 continue
      break는 조건문이나 반복문을 그만두는 키워드이고 continue는 지금 실행중인 반복을 마치고 다음 반복을 진행하라는 키워드이다.
반응형
Comments