귤귤의 대모험

새 창을 열고 닫힐 때 특정 기능을 실행하는 방법 ?

웹 사이트를 개발하다 보면, 사용자의 편의성을 높이기 위해 새창을 열고, 해당창이 닫힐 때 특정 동작을 수행하고 싶을 때가 있습니다. 이번 포스팅에서는 이러한 상황을 'React'를 활용해 어떻게 구현할 수 있는지 알아보도록 하겠습니다.

먼저 기본이 되는 몇 가지 JavaScript 메소드에 대해 알아보겠습니다:

• window.open() : 새 창을 여는 메소드로, 이를 통해 반환받은 창 객체 참조를 저장할 수 있습니다.
• setInterval() : 주기적으로 코드를 실행하게 해주는 타이머 함수입니다.
• windowObject.closed : 창이 닫혔는지 확인하는 속성으로, 창이 닫히면 true를 반환합니다.
• clearInterval() : 기능을 사용하여 메모리 누수를 방지하려면 상위 구성 요소가 마운트 해제될 때 간격을 지워야 합니다

그럼 전체 코드를 한번 봅시다.

import React, { useEffect, useState } from 'react';

function ParentComponent() {
  const [childWindow, setChildWindow] = useState(null);

  // 하위 창이 닫힐 때 실행할 콜백 함수
  const onChildClose = () => {
    console.log('Child window closed');
    // 하위 창이 닫힌 후에 실행할 코드
  };

  // 하위 창을 여는 기능
  const openChildWindow = () => {
    const windowFeatures = 'width=600,height=400,resizable,scrollbars=yes,status=1';
    const childWin = window.open('/child-path', 'ChildWindow', windowFeatures);
    setChildWindow(childWin);
  };

  useEffect(() => {
    let intervalId;

    if (childWindow) {
      // 매초 자식 창이 닫혀 있는지 확인한다.
      intervalId = setInterval(() => {
        if (childWindow.closed) {
          clearInterval(intervalId);
          onChildClose();
        }
      }, 1000);
    }

    // 마운트 해제 시 Interval 해제
    return () => {
      if (intervalId) {
        clearInterval(intervalId);
      }
    };
  }, [childWindow]);

  return (
    <div>
      <button onClick={openChildWindow}>Open Child Window</button>
    </div>
  );
}

export default ParentComponent;

이 코드는 React의 useState와 useEffect 훅을 사용하여 새 창을 열고, 해당 창이 닫힐 때 onChildClose 함수를 실행합니다. setInterval 함수를 사용하여 1초마다 새 창의 상태를 확인하고, 닫힌 경우에는 clearInterval로 타이머를 해제한 후, 콜백 함수를 호출합니다.

이와 같이 구현하면 새 창을 열고 닫힐 때 원하는 기능을 실행할 수 있으며, 이는 웹 애플리케이션의 사용성을 향상시키는 데 도움이 됩니다. 오류나 더 좋은 구현 방법에 대한 의견이 있다면, 피드백을 주시기 바랍니다. 

IT 대모험 아직 끝나지 않았습니다.

언제나 공부하는 마음으로 새로운 언어, 새로운 환경에 적응해 나가길 바랍니다.

그럼 다음 또 다른 포스팅으로 찾아 뵙겠습니다~ 

ES6 모듈 시스템에서는 default 키워드를 사용하여 모듈에서 기본으로 내보내는 값을 정의할 수 있다.

숫자, 문자, 불리언과 같은 기본형 값과 객체, 함수, 클래스와 같은 참조형 값 모두올 수 있다.

export default 'hello';
export default function hello(name) {
  console.log('hello' + name);
};

export default class Hello {
  constructor(greeting) {
    this.greeting = greeting;
  }
  hi(name) {
    console.log(`${this.greeting} ${name}`);
  }
}

default 키워드 사용에 있어 중요한 점이 있는데, default 키워드는 하나의 모듈에서 한 번만 사용할 수 있다.

즉, 한 파일에서는 하나의 값만 default로 정의할 수 있다.

default 키워드 다음에는 var, let, const와 같은 변수 선언 키워드가 올 수 없다.

default는 사실 해당 모듈의 기본값을 선언하는 것이기 때문에 변수 선언 키워드가 오면 문법적 오류를 발생한다

예를 들어, A라는 모듈이 있으면 A.default = 'hello'와 같이 A모듈의 기본값을 할당한다고 볼 수 있다

//File: app.js
import Hello from './hello,js';

const koreanHi = new Hello('안녕하세요.');
koreanHi.hi('하린');

hello.js에서 default로 내보낸 값을 가져오고 import하는 모듈에서(현재 파일) 이름을 부여한다.

여기에는 Hello라는 이름으로 부여하였다

hello.js에서는 클래스를 기본값으로 내보냈기 때문에 new 키워드를 사용하여 객체를 생성한다.

Hello 클래스의 인스턴스인 koreanHi의 hi메소드를 호출한다.

위 코드를 크롬 콘솔에서 확인하면 다음과 같다

결과 : 안녕하세요. 하린

이렇게 모듈의 default 값을 가져오는 활용방법을 알아보았다

어느 한 파일에서 export default가 되어있는 부분을 다른 파일에서 불러오는것이 가능하다

그것은 import로 가져오게 되는데 이때 가져올때 이름은 꼭 export default에 맞춰서 import 할 필요가 없다

즉, import하는 파일에서 이름을 지정하여 사용하면된다.

그렇게 사용하면 모듈화된 파일안에 정의된 함수, 변수를 사용할 수 있다

다음은 모듈을 여러 이름으로 내보내고 가져오는 방법을 알아보자

2020/06/08 - [JavaScript/모듈 이해하기] - 자바스크립트 모듈 시스템 이해하기 - 번들링(Bumdling) 웹팩(Webpack)

ES6의 모듈 자바스크립트 코드를 담고 있는 하나의 파일이다. 즉 하나의 파일이 하나의 모듈이라고 볼 수 있다.

ES6의 모듈은 엄격한 모드의 코드이고 import와 export 키워드를 사용한다.

export 키워드르르 이용하여 모듈내의 특정 코드를 외부에서 사용할 수 있다. 그리고 import 키워드를 이용해서 export 한 코드를 가지고 올 수 있다.

간단히 모듈을 정의하고 코드를 외부로 내보내고 가지고 오는 예제를 살펴보자.

//File: hello.js
export function hello(name){
 console.log(`hello ${name}`);
}


//File: app.js
import {hello} from './hello.js';

hello('es6 module'); // hello es6 module 출력된다.

두 모듈은 단순한 자바스크립트 파일이다.

hello.js에서는 hello 함수를 정의하고 이함수를 export 키워드를 이용하여 외부에서 가져올 수 있게 내보냈다.

app.js에서는 hello.js의 hello함수를 import키워드를 이용하여 가지고 온다.

이렇게 가져온 함수는 app.js 모듈내에서 자유롭게 사용할 수 있다

이렇게 하나의 모듈이 다른 모듈에서 내보낸(Export) 코드를 가져오면(Import) 두 모듈은 서로 의존하게 되어 의존관계가 형성되고 여러 모듈들은 의존관계를 맺어 의존관계 그래프가 형성되게 된다. 그리고 의존 관계 그래프에서는 최상의 루트가 필요한데 이루트 모듈이 애플리케이션의 시작 지점이 된다.

자바나 C언어에서의 메인 메소드와 같다고 생각하면 된다.

위 예제 코드에서는 app.js가 루트 모듈이라고 볼 수 있다.

ES6의 모듈로 정의된 파일들은 실행하는 방법에 따라 두 가지로 분류할 수 있다

* 런타임 로딩(Runtime Loading)

런타임 로딩은 의존 관계가 형성된 모듈들을 애플리케이션이 구동 시점에 비동기 HTTP 요청으로 불러오고 실행된다. 이때 모듈 로더가 필요한데 system.js 나 require.js를 이용할 수 있다

* 번들링(Bumdling)

번들링은 의존 관계가 형성된 모듈들을 하나의 파일로 묶어 준다.

그리고 애플리케이션이 구동할 때 묶여진 이 파일을 로드한다.

번들링은 개발 시점에 이루어지게 되고 브라우저에서 이루어지지 않고 대체로 node.js 환경에서 이루어지게 된다.

대표적인 모듈 번들로는 웹팩(Webpack)이 있다

* 웹팩(Webpack)

웹팩은 모듈 번들러로 자바스크립트 코드 외에 CSS, 이미지, 폰트 등 다양한 자원들을 모듈화시켜 의존 관계 그래프를 형성하여 병합된 파일들을 만들 수 있다.

node.js 플랫폼에서 동작하는 애플리케이션이고 다양한 플러그인들을 제공하고 있다

Bundler – 여러 개의 파일을 묶어주는 파일로 여러 가지가 있다 그중 Webpack을 공부하자

웹에서도 모듈을 사용하고 여러개의 파일을 묶어서 제공하고자 사용한다

그 이유는 프로젝트가 많은 양의 js, css파일등이 필요하기 때문에 많은 작업들을 수행해야 하기 때문

최신 브라우저에 사용할 수 있으며 bundle.js로 오래된 브라우저도 지원이 가능하게된다

//File: hello.js
var word = 'hello';

export default word;

//File: word.js
var word = 'World';

export default word;



//webpack – module

//File: index.html

<div id="root"></div>

<script type="module">

import hello_word from "./source/hello.js";

import world_word from "./source/world.js";

document.querySelector('#root').innerHTML = hello_word + ' ' + world_word;

</script>

Webpack은 npm install –D webpack-cli을 하여 webpack을 설치한다

webpack 적용을 하기위해 모듈화하여 .js파일을 추가하고 index.html파일을 수정한다

// File: index.html -- (entry 파일 추가 & 수정)
<div id="root"></div>

<script src="./public/index_bundle.js">

import hello_word from "./hello.js";

import world_word from "./world.js";

document.querySelector('#root').innerHTML = hello_word + ' ' + world_word;

</script>

npx weppack —entry

./source/index.js —output

./public/index_bundle.js

위의 명령어를 실행하면 entry 파일인 index.js 에서 사용하고 있는 모든 파일을 index_bundle.js에 출력하라는 의미

웹을 실행하면 출력은 전과 같게 동일하지만 js파일은 한 개만 로드한다

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Module Sample</title>
  <script type="module" src="app.js"></script>
</head>
<body>
</body>
</html>

위 코드를 크롬 콘솔에서 확인 하면 다음과 같다

결과 : hello es6 module

2020/06/08 - [JavaScript/모듈 이해하기] - 자바스크립트 모듈 시스템 이해하기 - 번들링(Bumdling) 웹팩(Webpack)

오늘은 자바스크립트의 모듈에 대해서 이야기 해보자

모듈은 파일이나 코드의 묶음 단위로 애플리케이션 하나의 구성요소로 볼 수 있다. 이렇게 모듈로 정의 하면 모듈단위로 코드를 재사용 할 수 있고, 하나의 애플리케이션이라는 큰 기능을 작은 기능단위로 잘게 분리하여 관리할 수 있다.

예를 들어, 베이스볼 게임이라는 애플리케이션을 문제 생성 모듈, 플레이어 관리 모듈, 등과 같이 여러 모듈로 구성할 수 있다

* 위와 같이 여러 장점들이 있지만 너무 많이 모듈화를 한다면 유지 보수나 다른 개발자들이 수정작업을 할때 불필요한 작업들이 발생한다 관리모듈이든, 문제 생성 모듈이든, 그 모듈은 분명한 작업들을 관리하는 작업이야 한다

단순히 어떠한 기본값들을 모듈화해서 관리할 필요는 없을 것이다

ECMAScript 5.x 버전까지는 모듈에 대한 정의를 자바스크립트 표준으로 제공하지 않았다  그래서 네임스페이스 패턴을 통해 모듈을 정의 했다. 다음의 예제를 통하여 네임스페이스 패턴을 알아보자.

var namespaceA = (function(){
	var privateVariable = '비공개 변수';
    return {
    	publicApi: function(){
        	console.log(privateVariable + '를 접근할 수 있습니다.');
        }
    }
})();

namespaceA.publicApi();

네임스페이스란 C# 언어에서 제공하는 기능으로 코드를 그롭화하고 이름 충돌을 방지하게 도와준다

하지만 자바스크립트에서는 네임스페이스를 직접적으로 지원하지 않는다. 그래서 함수를 정의함과 동시에 실행하는 즉각 호출 패천을 통하여 네임스페이스를 유사하게 구현할 수 있다. 이렇게 하는 이유는 기본적으로 변수와 함수를 기본적으로 선언하게 되면 전역으로 정의되어 다른 라이브러리나 타인의 코드에서 정의된 이름들과 충돌이 날수 있기 때문이다.

위 예제는 즉각 호출 패턴을 통해 함수를 정의함과 동시에 실행하여 util이라는 네임스페이스를 생성하고 있다.

var 키워드로 생성된 변수의 스코프는 함수이기 때문에 네임스페이스안에 정의 된 변수들을 그 외부에서 접근을 못한다

즉시 호출 패턴인 (function(){//코드})();를 통하여 namespaceA의 변수에 함수에서 반환된 객체를 할당 한다.

함수 안에 선언된 변수는 함수 내부에서만 접근이 가능하기 때문에 비공개 영역이 된다.

반환되는 객체는 namespaceA에 할당되고,

외부에서 접근이 가능하기 때문에 해당 객체의 속성과 메소드들은 공개 API가된다.

namespaceA의 publicApi 메소드를 호출한다

위 코드를 크롬 콘솔에서 확인하면 다음과 같다

결과

비공개 변수를 접근할 수 있습니다

namespaceA 자체는 전역으로 등록되기 때문에 여전히 이름 충돌이 발생할 수 있다. 그리고 즉시 호출패턴을 통해 정의된 다른 모듈을 사용하는 것 또한 전역을 통해 가져오게된다 이러한 문제점을 햄결하기 위해 ES6 이전에는 RequireJS를 통하여 모듈을 정의 하였다.

ES6에서 모듈시스템에 대한 표준이 정의 되었기 때문에 RequireJS과 같은 별도의 라이브러리 필요없이 이러한 문제점을 해결할 수 있다 

 아직 es6를 사용하지 않는 프로젝트들이 많이 있다 이러한 방식으로 사용하여 모듈화를 하는 일이 많이는 없지만 일단 이러한 것도 있구나 하며 이번 페이지는 넘어가도록 하자

배열 뒤에 요소를 추가하는 방법으로 push를 알아보도록하자

자바스크립트 배열 자료형은 Linked List 자료구조 형태를 갖고 있다.

따라서 배열 앞과 뒤에서 요소를 추가하는 것이 가능하다

Array 내장객체 메소드 push는 배열 뒤에서 요소를 추가한다

const festa = ['mang'];

festa.push('chimmy');

festa.push('tata')

festa.push('cooky');

festa.push('shooky');

festa.push('koya');

festa.push('rj');

festa.forEach(name => {

  console.log(name);

});

//결과

mang

chimmy

tata

cooky

shooky

koya

rj

문장 순서대로 festa 배열 뒤에 요소를 추가한다

반복문을 이용하여 festa 배열의 요소들을 콘솔로 출력한다.

위 코드를 크롬 콘솔에서 확인하면 결과가 위와 같이 나온다

아래와 같은 코드를 다시 보며 잘 생각 해보자

배열의 처음이나 끝에서 요소 하나를 추가하거나 제거하고 나머지를 변수에 저장한다

const array2 = ["b", "c", "d"];

const a9 = array2.push("e"); 

//배열의 요소 "e"가 마지막 배열 인덱스에 추가되고 배열길이 값을 a9에 저장된다

배열의 요소 "e"가 마지막 배열 인덱스에 추가되고 배열길이 값을 a9에 저장된다

2020/06/02 - [JavaScript/splice 배열 인덱스로 특정요소 수정하기] - splice - 배열 인덱스로 특정 요소 수정하기

Array 객체의 메소드 splice는 특정 위치의 요소를 샂게하거나 수정할 수 있다.

배열.splice(시작 인덱스, 삭제할 요소의 개수, 추가될 요소들 ...)

첫 번째 인자인 시작 인덱스는 배열 요소가 변경될 시작 지점입니다. 

splice는 측정 위치의 요소를 지정하는 것이 필수이므로 반드시 첫 번째 인자값은 배열 길이보다 작아야 유효한다

두 번째 인자인 삭제할 요소의 개수는 시작인덱스의 위치부터 삭제하고자 하는 개수만큼 요소를 제거한다.

이때 해당 요소가 제거됨과 동시에 메소드 호출 결과로 값을 반환한다.

세 번째 인자에 추가될 요소들을 지정하면, 시작 인덱스부터 해당 요소들이 추가된다.

const fruits const fruits = ['melon', 'lemon', 'source', 'apple', 'juice'];

fruits.splice(4, 1);

fruits.splice(4, 0, 'grape');

fruits.splice(2, 1, 'mandarin', 'strawberry', 'watermelon');

console.log(fruits);

변수 fruits에 배열 리터럴을 할당하여 선언한다.

이 배열의 내부 요소에는 문자열들이 있는데, 과일과 과일이 아닌 종류들이 섞여있다

splice(4, 1)를 실행하면 과일이 아닌 juice 문자열이 추출된다

splice(4, 0, 'grape')는 삭제할 개수를 지정하지 않아 추출되는 요소가 없다

그러나 세 번째 인자로 인해 시작 인덱스에 'grape' 문자열이 추가된다

결과

[ 'melon', 'lemon',  'mandarin', 'strawberry', 'watermelon', 'apple', 'juice']

문자열 병합

배열의 문자열 요소들을 몇몇 구분자로 합치려할 때 사용하며, 매개변수가 생략됐을 때의 기본값은 쉼표이며,

정의 되지않은 요소, 삭제된 요소는 모두 빈 문자열로 취급한다

const array15 = [1, null, "hello", "world", true, undefined];

delete array15[3];

array15.join(); // "1,,hello,,true,"

array15.join(''); // "1hellotrue,"

array15.join(' -- '); // "1 -- -- hello -- -- true --"

// 문자열 병합과 Array.prototype.join을 함께 쓰면 HTML<ul> 리스트 같은 것도 만들 수 있다

const attributes = ["Nimble", "Perceptive", "Generous"];

const html = '<ul><li>' + attributes.join('</li><li>') + '</li></ul>';

// html : "<ul><li>Nimble</li><li>Perceptive</li><li>Generous</li></ul>";

Object.keys

객체에서 나열 가능한 문자열 프로퍼티를 배열로 반환

const o = { a : 1, b : 2, c : 3, [SYM] : 4 };

const SYM1 = Symbol();

Object.keys(o)

.forEach(prop => console.log(`${prop} : ${o[prop]}`)); // “a : 1“ “b : 2“ “c : 3“

.filter(prop => prop.match(/^x/)); // “a : 1“ “b : 2“ “c : 3“ []

// 이 예제는 for...in 루프를 썻을 때와 같은 결과이고 hasOwnProperty()를 체크할 필요가 없다

// 객체의 프로퍼티 키를 배열로 가져와야 할 때는 object.keys가 편리하다

for...in

객체 프로퍼티를 나열할 때 for...in을 주로 사용했다

const SYM = Symbol();

const o = { a : 1, b : 2, c : 3, [SYM] : 4 };

for(let prop in o){

if(!o2.hasOwnProperty(prop)) continue;

console.log(`${prop} : ${o2[prop]}`);

}

for...in을 배열에 사용할 수도 있겠지만, 그리 좋은 생각은 아니다.

배열에는 일반적으로 for루프나 forEach를 사용

forEach(callback, thisArg)

for문과 마찬가지로 반복적인 기능을 수행할 때 사용한다 하지만 for문 처럼 index, 조건식, 증감식이 필요없다

callback 함수를 통해 그 기능을 대신하며 callback 함수내에 조건문으로 다른 배열을 만들수 있다

const array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

array.forEach(function(element, index, array){

console.log(`${array}의 ${index}번째 요소 : ${element}`);

});

//0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10의 0번째 요소 : 0 콜백 함수의 첫 번째 매개변수는 배열의 요소를 차례로 받아오며,

//0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10의 1번째 요소 : 1 두 번째는 인덱스 넘버, 세 번째는 배열의 변수가 할당된다

for...of

for(let face of hand)

console.log(`you rolled...${face}!`); // 템플릿 문자열 - 문자열과 ${ }를 통해 값을 삽입할 수 있다

// for...of 배열에 루프를 실행해야 하지만 각 요소의 인덱스를 알 필요는 없을 때 알맞다

배열 push(), pop(), unshift(), shift()

배열의 처음이나 끝에서 요소 하나를 추가하거나 제거하고 나머지를 변수에 저장한다

const array2 = ["b", "c", "d"];

const a9 = array2.push("e"); 배열의 요소 "e"가 마지막 배열 인덱스에 추가되고 배열길이 값을 a9에 저장된다

const a8 = array2.pop(); "e"는 변수 a8에 저장되고 마지막 배열인 "e"가 제거된다

const a7 = array2.unshift("a"); 배열 요소 "a"가 제일 첫 배열 인덱스에 추가하고 배열길이 값을 a7에 저장된다

const a6 = array2.shift() "a"는 변수 a6에 저장되고 첫번째 배열인 "a"가 제거된다

배열의 끝에 여러 요소 추가하기 concat()

concat 메서드는 배열의 끝에 여러 요소를 추가한 사본을 반환한다

const array3 = [1, 2, 3];

const a5 = array3.concat(4, 5, 6); 

const a4 = array3.concat([4, [5, 6]]);

변수 a5에 두개의 문자열을 합쳐서 저장하고 array3의 원본값은 변경되지 않는다

배열에 배열을 묶어 합치게 되어 [1, 2, 3, 4, [5, 6]] 사본이 a4에 저장된다

배열 일부 가져오기 slice()

const array4 = [1, 2, 3, 4, 5];

const b3 = array4.slice(1,3);

변수 b3에 array4 배열 인덱스 1부터 3까지 요소를 저장하고 원본은 변동이 없다

첫 번째 매개변수 어디서 부터 가져올지 정하며 두번째는 어디까지 가져올지를 정한다

splice() 임의의 위치에 요소 추가하거나 제거하기

const array5 = [1, 3, 5, 7];

const b4 = array5.splice(1, 2);

매개 변수 첫번째 값은 배열의 인덱스 넘버부터 두 번째 인자값의 숫자만큼 요소를 제거한다

제거하고 남은 변수 b4에 저장한다 이 예제에서는 [3, 5]이다

(매개변수 세번재, 네번째는 추가할 요소를 지정할 수 있다)

첫 번째 매개변수 어디서부터 가져올지 정하며 두 번째는 어디까지 가져올지를 정한다

특정 값으로 배열채우기 – es6 fill()

배열 생성자 Array와 함께 사용하며 배열의 일부만 채우려 할 때 시작 인덱스와 끝 인덱스를 지정하면된다

const array7 = new Array(5).fill(1);

array7.fill("c", 2, 4); array7에 배열 인덱스 번호 2부터 숫자 4개 자리까지 "c"를 채운다

array7.fill(0, -3, -1); array7에 배열 인덱스 번호

배열정렬과 역순정렬 sort() reverse()

array4.reverse(); array4는 이제 [5, 4, 3, 2, 1] 입니다

array4.sort(); array4는 이제 [1, 2, 3, 4, 5] 입니다

const array8 = [{ name : "Suzanne" }, { name : "Jim" }, { name : "Taervor" }, { name : "Amanda" }];

array8.sort((a, b) => a.name > b.name ); array8은 name 프로퍼티의 알파벳 순으로 정렬됩니다.

array8.sort((a, b) => a.name[1] < b.name[1] );

array8은 name 프로퍼티의 두번째 글자의 알파벳 역순으로 정렬됩니다

배열 검색 - 일치하지 않는 것을 찾지 못하면 –1을 반환한다 

indexOf() lastIndexOf() lastIndexOf()

const o9 = { name : "Jerry" };

const array9 = [1, 5, "a", o, true, 5, [1, 2], "9"];

array9.indexOf(5); // 1

array9.lastIndexOf(5); // 5 마지막 인덱스에 가까운 번호가 저장

array9.lastIndexOf(5, 4); // 1 두 번째 매개변수 값은 검색을 끝낼 인덱스 값이다

findIndex()는 indexOf 보다 더욱 다양한 상황에서 활용할 수 있다

const array10 = [{ id : 5, name : "Judith" }, { id : 7, name : "Francis" }];

array10.findIndex(o => o.id === 5); 0

array10.findIndex(o => o.name === "Francis"); 1

array10.findIndex(o => o === 3); -1

array10.findIndex(o => o.id === 17); -1

배열 검색 메서드

콜백함수를 사용하는 모든 메서드는 호출할 때 this로 사용할 값을 두 번째 매개변수로 받을수 있다

콜백함수 사용시 return 값이 ture인 요소를 찾을 때까지 순회하다가 찾으면 끝이난다

find()는 요소 자체를 검색하려할 때

const array10 = [{ id : 5, name : "Judith" }, { id : 7, name : "Francis" }]; json 데이터에 대한 검색

array10.find(o => o.id === 5); { id : 5, name " Juditj" } 요소 자체를 검색이된다

array10.find(o => o.id === 2); undefined

const array11 = [1, 17, 16, 5, 4, 16, 10, 3, 49];

array11.find((x, y) => i > 2 && Number.isInteger(Math.sqrt(x))); // 4

find findIndex에 전달하는 함수의 this도 수정할 수 있다. 이를 이용해서 함수가 객체의 메서드인 것처럼 호출할 수 있다

ID를 조건으로 Person 객체를 검색하는 방법의 예제를 확인하자

class Person {

constructor(name){

this.name = name;

this.id = Person.nextId++;

}

}

Person.nextId = 0; Person.nextId 초기값 0을 설정하고 객체가 생성될 때마다

const jamie = new Person("Jamie"); ++증가식이되어 id에 +1씩 된다

juliet = new Person("Juliet");

peter = new Person("peter");

jay = new Person("Jay");

const array17 = [jamie, juliet, peter, jay];

* 옵션 1 : ID를 직접 비교하는 방법

array17.find(p => p.id === juliet.id); juliet 객체이며, 무명함수를 주로 사용한다 그리고 매개변수 인자값으로

선언되는 것은 배열의 주소를 뜻한다

* 옵션 2 : "this" 매개변수를 이용하는 방법

array17.find(function (p){ find() 콜백함수 사용시 return 값이 ture인 요소를

return p.id === this.id 찾을 때까지 순회하다가 찾으면 거기서 끝납니다

}, juliet); juliet 객체

some, every

단지 조건에 맞는 요소가 있는지 없는지 확인만 필요할 때 사용하는 메서드

some은 조건에 맞는 요소를 찾으면 즉시 검색을 멈추고 true를 반환하며, 찾지 못하면 false를 반환한다.

const array12 = [5, 7, 12, 15, 17];

array12.some(x => x %2 === 0); true; 12는 짝수입니다.

array12.some(x => Number.isInteger(Math.sqrt(x))); false; 제곱근 수가 없다.

every는 배열의 모든 요소가 조건에 맞아야 true를 반환하여 그렇지 않다면 false를 반환합니다.

every는 조건이 맞지 않는 요소를 찾아야만 검색을 멈추고 false를 반환합니다.

const array13 = [4, 6, 16, 32];

array13.every(x => x%2 === 0); true; 홀수가 없습니다.

array13.every(x => Number.isInteger(Math.sqrt(x))); false; 6은 제곱수가 아닙니다.

map과 filter * 가장 유용한 메서드이다

map과 filter 메서드는 모두 사본을 반환하며 원래 배열은 바뀌지 않으며 함수로 구성된 배열을 말한다

함수로 구성된 배열이 있는데 프라미스가 필요하다면, 일정한 형식의 배열을 다른 형식으로 바꿔야 한다면,

Map을 사용하기 바랍니다. 아래의 예제를 참고하세요

const cart = [{ name : "Widget", price : 9.95 }, { name : "Gadget", price : 22.95 }];

const names = cart.map( x => x.name ); ["Widget", "Gadget"];

const prices = cart.map( x => x.price ); [9.95, 22.95];

const discountPrices = prices.map( x => x * 0.8 ); [7.96, 18.36];

콜백 함수는 각 요소에서 호출될 때 요소 자체와 요소 인덱스, 배열전체를 매개변수로 받는다

map()는 배열의 정보들을 가지고와서 새로운 문자열을 이나 배열을 만들기에 효율이 높다

그리고 map이 배열의 각 요소를 변형한다

const items = ["Widget", "Gadget"];

const price = [9.95, 22.95];

const cart = items.map((x, i) => ({ name : x, price : price1[i]}));

위의 결과 cart : [{ name : "Widget", price: 9.95 }, { name : "Gadget", price : 22.95 }]

객체를 괄호로 감싼 이유는 화살표 표기법에서 객체 리터럴의 중괄호를 블록으로 판단하기 때문

아래의 예제와 같이 map와 filter를 결합하면 다양한 일을 할 수 있다

const cards = [];

for(let suit of ['H', 'C', 'D', 'S'])

for(let value = 1; value <= 13; value++)

cards.push({ suit, value });

value가 2인 카드

let valueNumber = cards.filter(c => c.value === 2); c.value값이 2인것을 찾아내어 변수에 저장

cards.filter(c => c.suit === 'D');

cards.filter(c => c.value > 10);

cards.filter(c => c.value > 10 && c.suit === 'H');

function carToString(c){

const suits = { 'H' : '\u2665', 'C' : '\u2663', 'D' : '\u2666', 'S' : '\u2660' };

const values = { 1: 'A', 11 : 'J', 12 : 'Q', 13 : 'K' };

for(let i = 2; i <= 10; i++)

values[i] = i;

return values[c.value] + suits[c.suit];

}

const k = cards.filter(c => c.value === 2 ).map(carToString);

const k1 = cards.filter(c => c.value > 10 && c.suit === 'H').map(carToString);

splice()

- 특정 시작 인덱스부터 인덱스까지 값을 추가하거나 그 자리에 있는 값을 삭제할 수 있는 메서드

- 배열. splice(시작 인덱스, 삭제할 요소의 개수, 추가될 요소들)

• 첫번째 인자인 시작인데스는 배열 요소가 변경될 시작 지점입니다. splice는 특정 위치의 요소를 지정하는 것이 필수라 반드시 첫 번째 인자 값은 배열 길이보다 작아야 유효합니다
• 두 번째 인자인 삭제할 요소의 개수는 시작 인덱스의 위치부터 삭제하고자 하는 개수만큼 요소를 제거합니다. 이때 해당 요소가 제거됨과 동시에 메서드 호출 결과로 값을 반환합니다
• 세 번째 인자에 추가될 요소들을 지정하면, 시작 인덱스부터 해당 요소들이 추가됩니다.

const fruits = ['melon', 'lemon', 'source', 'apple', 'juice']

fruits.splice(4, 1) // ['melon', 'lemon', 'source', 'apple']

fruits.splice(4, 0, 'grape') // ['melon', 'lemon', 'source', 'apple', 'grape']

fruits.splice(2, 1, 'mandarin', 'strawberry', 'watermelon') 
	// ['melon', 'lemon', 'mandarin', 'strawberry', 'watermelon', 'apple', 'grape']

//결과
// ['melon', 'lemon', 'mandarin', 'strawberry', 'watermelon', 'apple', 'grape']

- splice(4, 1)를 실행하면 과일이 아닌 juice 문자열이 추출됩니다.

- splice(4, 0, 'grape')는 삭제할 개수를 지정하지 않아 추출되는 요소가 없습니다. 그러나 세번재인자로 인해 시작 인덱스에 grape 문자열이 추가됩니다.

배열. indexOf("A")의 활용

- indexOf()는 배열에 해당하는 문자를 찾아서 인덱스 값을 반환한다

- splice와 응용하여 시작인덱스 값을 구할 수 있다

var arr = ["A", "C", "D", "A", "E", "F", "A"];

var arr_splice = arr.splice(1, 3) // 1번부터 3개의 요소 ["C", "D", "A"] 꺼낸다

console.log(arr); // ["A", "E", "F", "A"] console.log(arr_splice) - ["C","D","A"]

arr.splice(arr.indexOf("A"), 1, "a"); // "A"를 찾아서 "a"로 변경한다.

배열의 마법사 reduce 매우 중요하다

Array 객체의 메소드  reduce는 배열 요소를 순환하면서, 정의된 callback 함수에 의해 단일 값으로 누적시킬 수 있다

reduce 메소드의 형태는 인자로 callback 함수와 초기값을 받는다

첫 번째 callback 함수는 기존과 메소드와 달리 여러 매개변수를 정의 한다

아래와 같이 최대 4개까지 매개변수를 받고,  첫 번째 누적된 값과 현재 요소 값은 필수이다

reduce 메소드가 처음에 실행할 때, 누적된 값은 두번째 인자(초기값)을 할당 받는다

이후에는 배열 순환이 끝날 때까지  callback 함수에서 반환된 값을 재할당된다

배열 내 값을 누적시키기

const numArr = [1, 2, 3, 4, 5];

const result  =  numArr.reduce((acc, el) => {

      return acc + el

}, 0);

console.log(result);

결과 15

숫자형 값이 나열된 배열 리터럴을 numArr 변수에 대입한다

reduce의 callback 함수 매개변수로, 첫 번째 acc(누적된 값)과 el(현재 요소값)을 정의한다

매개변수로 전달된 acc와  el를 합산하여, callback 함수 결과 값으로 반환한다

이렇게 반환된 값은 reduce로 순환된 다음 요소 차례에서 acc으로 할당되어 전달된다.

즉, return으로 반환된 값은  다음 배열요소의 acc가 된다는 의미이다.

또한, 배열의 모든 요소들을 순환하고 난 마지막 반환값이 바로 reduce 메소드의 결과 값이 된다.

초기값으로 숫자 0을 대입한다. 이 초기값은 첫 번째 요소에서는 acc로 대입된다.

따라서 배열의 각 요소를 순환하며 초기값 0부터 각 요소의 값들을 합산하게 되었을 때, 

0 + 1, 1 + 2, 3 + 3, 6 + 4, 10 + 5와 같이 진행된다 

배열의 마법사 reduce 활용하기

const array = [5, 7, 2, 4];

const sum = array.reduce((a, x) => a += x, 0);

위의 예제를 자세히 해석해봅시다

1. 첫 번째 배열 요소 5에서 (익명) 함수를 호출한다. a의 초깃값은 0이고 x의 값은 5이다.

함수는 a와 x(5)의 합을 반환한다 이 값은 다음 단계에서 a의 값이 된다

2. 두 번째 배열 요소 7에서 함수를 호출한다. a의 초깃값은 이전 단계에서 전달한 5이고

x의 값은 7이다 함수는 a와 x의 합 12를 반환한다 이 값은 다음 단계에서 a의 값이 된다.

3. 세 번째 배열 요소 2에서 함수를 호출한다. 이 단계에서 a는 12이고 x는 2이다.

함수는 a와 x의 합인 14를 반환한다

4. 네 번째이자 마지막 배열 요소인 4에서 함수를 호출한다. a는 14이고 x는 4이다.

함수는 a와 x의 합인 18을 반환하며 이 값은 reduce의 값이고 sum에 할당되는 값이다.

reduce는 보통 숫자나 문자열 같은 원시 값을 누적값으로 사용하지만, 객체 또한 누적값이 될수 있다

이를 통해 아주 다양하게 활용할 수 있다는 것을 간과하지 말지 말자 아래의 예제를 보자

const words = ["Beachba111", "Rodeo", "Angel", "Aardvark", "Xylophone", "November", "Chocolate",

"Papaya", "Uniform", "Joker", "Clover", "Bali"];

const alphabetical = words.reduce((a, x) => {

if(!a[x[0]]) a[x[0]] =[];

a[x[0]].push(x); 

return a; 

}, {}); 

배열의 문자열 한글자에 인덱스 넘버 0부터 시작된다

if(![a[x[0]])의 뜻은 첫 번째 배열의 첫 번째 요소가 있는지 확인하는 것이다

a[x[0]]는 "Beachba111"의 B를 찾아 그 이름으로 배열을 저장한다

거기에 push()로 x를 a[x[0]]에 저장한다 그렇게 되면 결과적으로 B : "Beachba111"되고

a를 리턴하여 alphabetical에 저장되어 중첩되고 words 배열에 요소가 없으면 끝이 난다

두번째 매개변수의 뜻은 {}에 기본 값을 설정하는 한다는 뜻이다

reduce는 통계에서도 사용할 수 있다. 예를 들어 데이터 셋의 평균과 분산을 계산한다고 생각해보자 아래의 예제를 보자

const data = [3.3, 5, 7.2, 12, 4, 6, 10.3];

const stats = data.reduce((a, x) => {

a.N++; 수학적 공식이라서 그냥 활용방법만 확인하자

let delta = x - a.mean;

a.mean += delta/a.N;

a.M2 += delta * (x - a.mean);

return a;

}, { N : 0, mean : 0, M2 : 0 }); -> 초기값을 설정합니다

if(stats.N > 2){

stats.variance = stats.M2 / (stats.N -1);

stats.stdev = Math.sqrt(stats.variance);

}

reduce의 유연성을 알아보기위해 예제를 더 살펴 보자

const longWords = words.reduce((a, w) => w.length > 6 ? a +" "+ w : a, "").trim();

logWords : Beachball Aardvark Xylophone November Chocolate Uniform

삭제되거나 정의되지 않은 요소들

Array 메서드는 삭제되거나 정의되지 않는 요소들을 다룰 때 쫌 당혹스럽게 동작하곤 한다

const array = Array(10).map((x) => 5); 이렇듯 array 요소는 전부 undefined이다 이와 비슷하게

배열 중간의 요소를 삭제하고 map을 호출하면 배열 가운데 undefined가 생긴다

const arr4 = [1, 2, 3, 4, 5];

delete arr4[2];

arr4.map(x => 0); // [0, 0, undefined, 0, 0];

일반적으로 배열을 다룰때는 정의된 배열을 다루고, 의도적으로 배열안에 빈 부분을 만든다 하더라도 delete를 사용하지 않는다

그래서 현실적으로 이런 동작이 문제를 일으킬 가능성은 거의 없다 하지만 알아서 나쁠 것은 없으니 알아두자