2022.07.07 - javascript 비기너 복습 (2)

[ 9강 ~ 13강 요약 ]

- new Array()

Array 인스턴스 생성, 반환 

파라미터에 따라 배열 생성 기준이 다르다. 

파라미터를 작성하지 않으면 빈 배열이다. 

작성한 순서로 엘리먼트에 설정된다.

 

- Array()

Array 인스턴스 생성, 반환 

new Array()와 생성 방법 및 기능이 같다. 

Array()는 직접 생성자 함수를 호출하여 인스턴스를 생성한다. 

 

- length 프로퍼티 

배열 [1,2,3]에서 length 값은 3이다. 

열거, 삭제는 할 수 없지만 변경은 가능하다. 

length 값을 변경하면 배열의 엘리먼트 수가 변경된다. 

 

- delete 연산자

var 변수는 삭제 불가

글로벌 변수는 삭제 가능 

삭제 성공시 true, 실패시 false 반환

let book = {title:"자바의 정석"};
console.log(delete book.title); //true
console.log(book.title); //undefined

 

- unshift() 

0번 인덱스에 파라미터 값 삽입

배열에 있던 엘리먼트는 뒤로 이동한다. 

let value = [1,2];
value.unshift(345,67);
console.log(value);
// 345,67,1,2

 

- push()

배열 끝에 파라미터 값을 첨부

let value = [1,2];
value.push(345,67);
console.log(value);
// 1,2,345,67

 

- concat()

배열에 파라미터 값을 연결하여 반환 

파라미터가 1차원 배열이면 값만 반영 

=> [3],[4] 로 입력해도 결과는 [1,2,3,4]임

let value = [1,2];
let result = value.concat(3,4);
console.log(result);
// 1,2,3,4

 

- slice()

배열의 일부를 복사하여 배열로 반환한다. 

첫 번째 파라미터의 인덱스부터 두 번째 인덱스 직전까지 

true, false 를 숫자로 변환한다.

첫 번째 파라미터 값이 두 번째 파라미터 값보다 크면 빈 배열을 반환한다. 

 

- join()

엘리먼트와 분리자를 하나씩 결합하여 문자열로 연결 

마지막 엘리먼트는 분리자를 연결하지 않음

파라미터에 빈 문자열 작성 

-> 엘리먼트 값만 연결하여 반환한다. 

-> 데이터로  HTML 마크업을 만들어 한번에 표시할때 주로 사용한다.

 

- 요구사항에 맞게 코딩해보기

let html = ["<ul>"];
for(i=1; i<11; i++){
  html.push(`<li id=id${i}> id${i}</li>`);
}
html.push("</ul>");
console.log(html);
let result = html.join("");
document.body.innerHTML = result;

 

- every()

forEach() 처럼 시맨틱 접근

배열의 엘리먼트를 하나씩 읽어가면서 false를 반환할때까지 콜백함수를 호출한다. 

false가 반환되면 반복 종료

false를 반환하지 않으면  true 반환

let value = [20,10,30,40];
let fn = function(el, index, all){
  console.log(el);
  return el>15;
  // el의 처음값인 20이 15보다 크므로 true 반환
  // el의 두번째 값인 10은 15보다 크지 않으므로 false 반환, 반복 종료 
};
let result = value.every(fn);
console.log("결과 :",result);

// 20
// 10
// false

 

- some()

every()처럼 시맨틱 접근

단, true 를 반환할때까지 콜백 함수 호출

true 가 반환되면 반복 종료 

true를 반환하지 않으면 false 반환 

let value = [10,20,30,40];
let fn = function(el, index, all){
  console.log(el);
  return el>15;
  // el의 처음값인 20이 15보다 크므로 true 반환
  // el의 두번째 값인 10은 15보다 크지 않으므로 false 반환, 반복 종료 
};
let result = value.some(fn);
console.log("결과 :",result);

// 10
// 20
// true

 

- filter()

배열로 반환

true일때 엘리먼트값이 설정됨 

배열의 엘리먼트를 하나씩 읽어가면서 콜백함수에서 true를 반환하면 현재 처리중인 엘리먼트를 반환한다.

조건에 맞는 엘리먼트를 추려낼때 좋음.

let value = [10,20,30,40];
let fn = function(el, index, all){
  console.log(el);
  return el>15;
  // 20,30,40이 15보다 크므로 비교결과 true 
};
let result = value.filter(fn);
console.log(result);
// [20,30,40]

- true가 하나도 없으면 빈 배열을 반환한다. 

let value = [1,2,3,4];
let fn = function(el, index, all){
  console.log(el);
  return el>15;
  // true가 하나도 없으면 빈 배열을 반환한다. 
};
let result = value.filter(fn);
console.log(result);

// []

 

 

- map()

반환값이 배열.

배열의 엘리먼트를 하나씩 읽어가면서 콜백함수에서 반환한 값을 새로운 배열에 추가하여 반환한다. 

배열의 엘리먼트 수 만큼 계속 읽는다.

forEach()메서드와 비슷하지만 forEach()는 반환값이 없음.

반환하려면 콜백함수에서 의도적으로 코드를 작성해야함

map()은 값을 반환해주면 그 값을 배열로 반환해준다. 

let value = [10,20,30,40];
let fn = function(el, index, all){
  console.log(el);
  return el + this.add
  // el=10, this.add=100, el+this.add = 110 
};
const point = {add:100};
let result = value.map(fn,point);
console.log(result);
// [110,120,130,140];

 

[ 반환 값을 파라미터 값으로 사용하는 메서드 ]

- reduce()

배열 끝까지 콜백 함수를 호출한다. 

파라미터 작성 여부에 따라 처리가 다름

첫번째 파라미터 -> 콜백함수 

두번째 파라미터 -> 초기값 

 

1) 파라미터를 하나만 작성한 경우 

let value = [1,3,5,7];
let fn = function(prev, curr, index, all){
  console.log(prev+","+curr);
  return prev + curr;
  // 
 
};

let result = value.reduce(fn);
console.log("결과 : "+result);
// 1,3
// 4,5
// 9,7
// 결과:16

네개의 파라미터를 가지며 첫 번째 파라미터만 작성하고, 두 번째를 작성하지 않으면 두개의 엘리먼트가 한꺼번에 설정된다.

  

2) 두 번째 파라미터를 작성한 경우

let value = [1,3,5];
let fn = function(prev, curr, index, all){
  console.log(prev+","+curr);
  return prev + curr;
  // 
 
};

let result = value.reduce(fn,7);
// 콜백함수를 호출하면서 파라미터값 7을 넘겨준다.
// 이 값(7)은 prev에 설정되고, [1,3,5]의 1이 curr에 설정됨
// index는 0
// 7+1 = 8을 반환하게 된다 (return)
// 그 후 다시 콜백함수를 호출하면서 8을 넘겨주게 되고 
// 이 값(8)은 prev에 설정되고, [1,3,5]의 3이 curr에 설정됨
// 계속 반복한다 

console.log("반환 : "+result);
// 7,1
// 8,3
// 11,5
// 반환:16

 

- reduceRight()

reduce() 와 처리 방법은 같음

배열 끝에서 앞으로 하나씩 읽어가면서 콜백함수에서 반환한 값을 반환 

let value = [1,3,5,7];
let fn = function(prev, curr, index, all){
  console.log(prev+","+curr);
  return prev + curr;
  // 
 
};

let result = value.reduceRight(fn);
// 콜백함수가 호출되고 prev에 7이 설정됨(뒤에서 앞으로)

console.log("반환 : "+result);
// 7,6
// 12,3
// 15,1
// 반환:16