웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어이다. 인터넷에 접속하기 위해 사용하는 크롬, 사파리, 엣지, 파이어폭스 등이 브라우저이다.
웹 브라우저의 동작 원리는 여러 단계로 나뉘어져 있는데 사용자가 웹 페이지를 요청하고 이를 렌더링하는 과정에서 다양한 기술이 활용된다.
브라우저의 구조
사용자 인터페이스(User Interface) : 주소 표시줄, 각종 버튼(이전/다음, 새로고침, 설정, 닫기 등), 북마크 메뉴 등. 요청한 페이지를 보여주는 영역을 제외한 나머지 모든 부분이 사용자 인터페이스에 해당한다.
브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어해주는 엔진. 자료 저장소를 참조하며 로컬에 데이터를 읽기/쓰기 하면서 다양한 작업을 한다.
렌더링 엔진 : 요청한 콘텐츠를 표시한다. 요청한 웹 페이지의 HTML과 CSS를 파싱하여 화면에 표시
통신 : HTTP 요청과 같은 네트워크 호출에 사용
자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행
UI 백엔드 : input, select 와 같이 기본적으로 지원하는 요소를 그린다. OS 사용자 인터페이스에서 정해준것들을 사용한다.
자료 저장소 : 쿠키, 로컬 스토리지와 같이 로컬 영역에 저장해야 하는 모든 종류의 데이터들을 저장한다.
1. URL 입력 및 요청
사용자가 웹 브라우저에 URL을 입력하면, 브라우저는 해당 URL을 해석하여 웹 서버에 요청을 보낸다. 이 과정에서 DNS(Domain Name System)를 통해 도메인 이름을 IP 주소로 변환한다.
2. 요청 전송
브라우저는 HTTP(HyperText Transfer Protocol) 또는 HTTPS(HyperText Transfer Protocol Secure) 프로토콜을 사용하여 웹 서버에 요청을 전송한다. 이 요청은 보통 GET 요청으로 이루어지며, 서버에게 특정 리소스(예: HTML 파일, 이미지 등)를 요청한다.
3. 서버 응답
웹 서버는 요청을 처리한 후, 요청된 리소스를 포함한 HTTP 응답을 브라우저에 반환한다. 이 응답에는 상태 코드(예: 200, 404)와 함께 HTML 문서, CSS 파일, JavaScript 파일 등이 포함될 수 있다.
4. HTML 파싱 및 DOM 생성
브라우저는 응답받은 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성한다. DOM은 HTML 문서의 구조를 나타내는 객체 모델이다.
5. CSS 파싱 및 CSSOM 생성
브라우저는 HTML 문서와 함께 요청한 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다. CSSOM은 스타일 정보를 구조화하여 브라우저가 렌더링을 할 수 있도록 돕는다.
6. JavaScript 실행
브라우저는 HTML 문서 내의 JavaScript 코드를 실행한다. 이 과정에서 JavaScript는 DOM과 CSSOM을 수정할 수 있으며, 브라우저는 이를 반영하여 페이지를 업데이트한다.
7. 렌더 트리 생성
브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다. 렌더 트리는 화면에 표시될 요소들만 포함하며, 각 요소의 스타일과 위치 정보가 포함된다.
8. 레이아웃 및 페인팅
렌더 트리를 기반으로 브라우저는 레이아웃을 계산하여 각 요소의 정확한 위치와 크기를 결정한다. 이후, 이 정보를 바탕으로 화면에 각 요소를 그리는 과정을 페인팅이라고 한다.
9. 최적화 및 재렌더링
브라우저는 페이지가 동적으로 업데이트될 때 최적화를 통해 불필요한 렌더링을 줄인다. JavaScript가 DOM을 수정하면, 브라우저는 필요한 부분만 다시 렌더링한다.
결론
웹 브라우저는 이러한 여러 단계를 통해 사용자가 요청한 웹 페이지를 화면에 표시한다. 이 과정에서 다양한 프로토콜과 기술이 사용되며, 각 단계는 브라우저의 성능과 사용자 경험에 큰 영향을 미친다.
내가 어떤 프로그램을 만든다고 했을 때 다양한 기능을 추가하다보면 어느순간 한 파일에 작성한 코드가 100줄, 1000줄이 넘어가는 경우가 생긴다. 하나의 파일에 많은 코드를 작성하게 되면 각 코드들의 의미를 빠르게 파악하기가 어렵고 기능수정이 필요할 때도 그부분을 찾기가 쉽지 않아 코드를 관리하기 어려워진다. 그래서 많은 기능이 필요한 프로그램은 하나의 파일로 관리하는게 아니라 각 기능별로 여러개의 파일로 분리해서 관리하는 것이 좋다.
공통된 기능이나 특별한 목적에 따라 각각의 파일로 분리하는 과정을 모듈화(Modularization)라고하고 각 파일 하나하나를 모듈이라고 부른다.
복잡하고 많은 양의 코드를 기능에 따라 각각의 파일로 나눠 관리하면 1. 코드를 좀 더 효율적으로 관리할 수 있고, 2. 비슷한 기능이 필요할 때 다른 프로그램에서 재사용 할 수도 있다는 장점이 있다.
모듈 파일이 가져야 할 조건
1. 모듈이 되는 파일은 이 파일만의 독립적인 스코프를 가져야 한다. 모듈 파일이 가지는 독립적인 스코프를 모듈 스코프 라고 한다.
모듈 스코프(Module Scope)
모듈 파일 안에서 선언한 변수나 함수는 외부에서 자유롭게 접근할 수 없고, 이 파일 안에서만 사용이 가능해야한다.
하나의 폴더 안에 index.html, index.js, print.js 파일들이 위치해 있다고 생각해보자. 서로 다른 파일에 자바스크립트 코드가 존재하지만 마치 하나의 파일에 존재하는 것처럼 스코프를 공유하게 된다.
//print.js
const title = 'Hello Welcome to the Code World!';
function print(value) {
console.log(value);
};
//index.js
print(title);
//print(title) 출력값
Hello Welcome to the Code World!
print.js에서 선언한 변수와 함수를 index.js에서 사용하고 있지만 코드를 실행해보면 에러가 발생하지 않고 실제로 두 파일에 나눠진 코드가 마치 하나의 파일에 존재하는 것처럼 잘 동작하는 모습을 확인 할 수 있다.
이 현상이 에러가 발생하지 않아 문제가 없는것처럼 느껴질 수 있지만 생각보다 큰 문제가 될 수 있다.
html에서 script 파일을 연결할 때 print.js를 먼저 연결하고 아랫줄에 index.js를 연결해줬다. 예를들어 아래쪽 파일인 index.js에서 코드를 작성할 때 위쪽 파일인 print.js에서 선언한 변수나 함수와 이름이 중복되면 이 값이 덮어써지면서 코드를 실행했을 때 의도치 않은 결과가 나타날 수 있고 SyntaxError가 발생할 수도 있다.
//print.js
const title = 'Hello Welcome to the Code World!';
function print(value) {
console.log(value);
};
//index.js
print(title);
function print(valie) {
console.log('이건 새로운 print 입니다.');
};
//print(title) 출력 값
이건 새로운 print 입니다.
------------------------------------------
//print.js
const title = 'Hello Welcome to the Code World!';
function print(value) {
console.log(value);
};
//index.js
print(title);
function print(valie) {
console.log('이건 새로운 print 입니다.');
};
const title = '너도 할 수 있어 코딩!';
//출력되는 값
//syntax Error
이런 문제를 방지하기 위해서 각각의 모듈 파일이 다른 파일과는 스코프를 함부로 공유할 수 없도록 모듈 스코프를 가지고 있어야 한다.
HTML파일에서 자바스크립트 파일을 불러올 때 모듈 스코프를 갖게 하려면 script태그에 type속성을 module이라는 값으로 지정해 주어야 한다.
이렇게 하고 실행을 눌러보면 에러가 발생하는데, 브라우저에서 내 컴퓨터 안에 있는 HTML 파일을 불러오게 되면 자바스크립트의 모듈 문법은 사용할 수가 없다.
에러가 뜬 출력화면
자바스크립트의 모듈 문법을 만들 때 문법 자체의 보안 요구사항으로 일부러 에러가 발생되도록 설계했기 때문이다.
이 문제를 해결하려면 브라우저에서 직접 파일을 불러오는 방식이 아니라 서버를 통해서 이 HTML 파일을 실행해야 한다. 서버를 통해 HTML을 실행하는 방법은 굉장히 다양하지만 VS Code의 확장기능을 활용해서 간단하게 해결할 수도 있다.
vs code의 확장 프로그램 live server
설치를 한 후 go live 버튼을 눌러보면 서버를 통해 실행된 TML 파일이 자동으로 열리게 된다. 서버를 통해 실행된 HTML 파일에서 콘솔을 열어보면 index.js에서 title이 선언되지 않았다라는 오류가 발생하는걸 확인 할 수 있다.
왜냐하면 index.html에서 script를 연결할 때 type 특성에 module이라는 값을 지정해줬기 때문에 이 파일들은 각각 모듈 스코프를 갖게 되서 print.js 파일 내에 선언한 변수나 함수는 다른 외부 파일과 스코프를 공유하지 않게 된 것이다.
기본적으로 모듈 스코프를 가지고 특별한 문법을 통해서 서로 다른 파일들끼리 변수나 함수를 공유하는 것이 모듈 문법의 핵심이다.
모듈 문법
자바스크립트의 모듈 문법은 기본적으로 export(내보내다)와 import(불러오다) 다.
모듈 스코프를 가진 파일에서 외부로 내보내고자 하는 변수나 함수를 export 키워드를 통해 내보내고, 모듈 파일에서 내보낸 변수나 함수들은 다른 파일에서 import 키워드를 통해 가져온다.
// printer.js
export const title = 'CodePrinter';
export function print(value) {
console.log(value);
};
//이제는 이 값들을 다른 파일에서도 사용할 수 있다. 하지만 무조건 제한 없이 사용할 수 있는건 X
//변수나 함수를 사용하고자 하는 파일에서 한번더 불러오는 과정을 거쳐야 사용할 수 있다.
// index.js
import { title, print } from './printer.js';
print(title);
//파일 내에서 사용할 함수나 변수를 쉼표로 구분해서 작성해준 다음 from 키워드와 모듈 파일의 경로를 작성해준다.
이름 바꿔 import 하기
import 키워드를 통해 모듈을 불러올 때 as 키워드를 활용하면 import하는 대상들의 이름을 변경할 수 있다. import 할 변수나 함수 이름을 조금 더 간결한 이름으로 바꾸거나, 혹은 더 구체적으로 바꾸고 싶을 때 활용할 수 있다. 뿐만 아니라 이름을 바꿔서 import 하면 여러 파일에서 불러오는 대상들의 이름이 중복되는 문제를 해결할 수 있다.
// printer.js
export const title = 'CodePrinter';
export function print(value) {
console.log(value);
};
//index.js
import { title as printerTitle, print, printArr } from './printer.js';
//title이라는 변수나 함수이름을 printerTitle로 바꾼다.
import { title, data as members } from './members.js';
printer(title); //CodeMembers
arrPrinter(members); //(12) ['지민', '태연', ..., '소유', '효리']
한꺼번에 import 하기
모듈 파일을 import 할 때 그 파일에서 export 하는 대상을 모두 가지고 올 필요는 없다. 실제로 파일에서 사용하는 것만 import를 하면 된다. 지금은 코드가 짧아 export 대상이 몇 개 없지만 만약 모듈 파일에서 export 하는 대상이 훨~씬 많고 다른 파일에서 import를 할 때도 그 대상들을 모두 불러와야 한다면 생각보다 작성해야 될 코드도 많아지고, 자연스럽게 가독성도 나빠진다.(여기서 이름까지 바꾼다면 코드는 더 복잡해진다.)
import할 때 와일드카드 문자(*, Wildcard Character)와 as를 활용하면 모듈 파일에서 export하는 모든 대상을 하나의 객체로 불러올 수 있다.
//print.js에서 export하는 모든 대상이 이 이름(printerJS)에 전달이 된다.
import * as printerJS from './printer.js';
console.log(printerJS.title); // CodeitPrinter
console.log(printerJS.print); // ƒ print(value) { console.log(value); }
이렇게 활용하면 조금 더 간결하게 사용할 수 있고, 값을 가지고 올 때 프로퍼티 형식으로 값을 불러오기 때문에 여러 모듈을 불러 올 때 이름이 중복 될 일이 없다.
하지만 이 파일에서 필요하지 않은 대상들도 모두 불러오는 단점도 있어서 코드가 항상 효율적이라고 할 순 없다. (무분별하게 *를 사용하지 말고 필요에 따라 적절하게 활용하는것이 좋다.)
한꺼번에 export 하기
변수나 함수 앞에 매번 export 키워드를 붙일 수도 있지만, 선언된 변수나 함수를 하나의 객체로 모아 한꺼번에 내보낼 수도 있다. 이때 as 키워드를 활용하면 이름을 변경해서 export할 수도 있다.
const title = 'CodeitPrinter';
function print(value) {
console.log(value);
}
function printArr(arr) {
arr.forEach((el, i) => {
console.log(`${i + 1}. ${el}`);
});
}
// export 키워드 다음에 내보낼 대상을 중괄호로 묶어주면 된다.
export { title as printerTitle, print, printArr };
그러면 선언마다 export를 붙여주지 않아도 되고, 어떤것들이 export 되는지 한눈에 알아볼 수 있다는 장점이 있다.
import를 할 때처럼 as 키워드를 사용할수도 있는데, 모듈 파일에서 미리 이름을 바꿔서 export를 할 수도 있다.
default export
export 키워드를 사용할 때와는 다르게 default 키워드가 붙으면 그 뒤에는 반드시 하나의 대상만 내보낼 수가 있다. 변수나 함수 이름으로 export하는 것 뿐만 아니라 바로 값 하나를 전달할 수도 있다. 한가지 주의해야 할 점은 default 키워드는 모듈 파일내엣 딱 한번만 사용할 수 있다는 점이다.
const title = 'CodePrinter';
function print(value) {
console.log(value);
}
export default print; //변수나 함수 뿐만 아니라
//export default 'CodePrinter'; 이렇게 값을 바로 입력할 수도 있다.
default export는 import할 때도 기본적으로 default 키워드로 구분이 된다. (키워드 자체로는 선언할 수 없고 반드시 as 키워드를 통해서 이름을 붙여주어야한다.)
import { default as printerJS } from './printer.js';
console.log(printerJS.title); // CodePrinter
console.log(printerJS.print); // ƒ print(value) { console.log(value); }
export default print; //하나의 대상만 export : Default Export
export { title as printerTitle, print, printArr }; //변수나 함수의 이름으로 여러 대상을 export 하는 방식 : Named Export
//조금 특별하게 import 사용하기
import {
default as code,
title as membersTitle,
data as membersData
} from './members.js'
//에서 default as 부분을 생략하고 default 값에 붙여준 이름을 중괄호 밖으로 빼서 사용할 수 있다.
import code, {
title as membersTitle,
data as membersData
} from './members.js'
//import를 할 때 중괄호 여부로 Default Export와 Named Export를 구분할 수 있다.
다음과 같이 축약형 문법으로 import 할 수도 있다.
import * as printerJS from './printer.js'; //를
import printerJS from './printer.js'; //로 축약할 수 있다.
console.log(printerJS.title); // CodePrinter
console.log(printerJS.print); // ƒ print(value) { console.log(value); }
사용할 때 객체 형태로 사용할 수가 있게 되는데 import 부분의 코드를 간결하게 쓸 수 있고 객체 형태로 값을 활용하기 때문에 다른 모듈과 이름 중복을 피할 수 있다는 장점이 있긴 하지만 객체 형식으로 활용하면 매번 점 표기법으로 프로퍼티에 접근해야 하고, 모듈 파일을 불러온 입장에서 각 대상의 이름을 변경할 수 없다는 단점도 있다.
Map은 이름이 있는 데이터를 저장한다는 점에서 객체와 비슷하지만, 할당연산자를 통해 값을 추가하고, 점 표기법이나 대괄호 표기법으로 접근하는 일반 객체와 다르게 Map은 메소드를 통해서 값을 추가하거나 접근할 수 있다. new 키워드를 통해서 Map을 만들 수 있고 아래와 같은 메소드를 통해 Map 안의 여러 값들을 다룰 수 있다.
map.set(key, value): key를 이용해 value를 추가하는 메소드.
map.get(key): key에 해당하는 값을 얻는 메소드. key가 존재하지 않으면 undefined를 반환.
map.has(key): key가 존재하면 true, 존재하지 않으면 false를 반환하는 메소드.
map.delete(key): key에 해당하는 값을 삭제하는 메소드.
map.clear(): Map 안의 모든 요소를 제거하는 메소드.
map.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)
문자열과 심볼 값만 key(프로퍼티 네임)로 사용할 수 있는 일반 객체와는 다르게 Map 객체는 메소드를 통해 값을 다루기 때문에 다양한 자료형을 key로 활용할 수 있다는 장점이 있다.
Set
Set은 여러 개의 값을 순서대로 저장한다는 점에서 배열과 비슷하지만, 배열의 메소드는 활용할 수 없고 Map과 비슷하게 Set만의 메소드를 통해서 값을 다루는 특징이 있다. Map과 마찬가지로 new 키워드로 Set을 만들 수 있고 아래와 같은 메소드를 통해 Set 안의 여러 값들을 다룰 수 있다.
set.add(value): 값을 추가하는 메소드. (메소드를 호출한 자리에는 추가된 값을 가진 Set 자신을 반환.)
set.has(value): Set 안에 값이 존재하면 true, 아니면 false를 반환하는 메소드.
set.delete(value): 값을 제거하는 메소드. (메소드를 호출한 자리에는 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환.)
set.clear(): Set 안의 모든 요소를 제거하는 메소드.
set.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)
한가지 특이한 점은 일반 객체는 프로퍼티 네임으로, Map은 get메소드로, 그리고 배열은 index를 통해서 개별 값에 접근할 수 있었는데 Set에는 개별 값에 바로 접근하는 방법이 없다.
// Set 생성
const members = new Set();
// add 메소드
members.add('영훈'); // Set(1) {"영훈"}
members.add('윤수'); // Set(2) {"영훈", "윤수"}
members.add('동욱'); // Set(3) {"영훈", "윤수", "동욱"}
members.add('태호'); // Set(4) {"영훈", "윤수", "동욱", "태호"}
for (const member of members) {
console.log(member); // 영훈, 윤수, 동욱, 태호가 순서대로 한 줄 씩 콘솔에 출력됨.
}
그래서 위 코드와 같이 반복문을 통해서 전체요소를 한꺼번에 다룰 때 반복되는 그 순간에 개별적으로 접근할 수가 있다.
이런 특징을 가지고도 Set이 유용하게 사용되는 경우가 있는데 바로, 중복을 허용하지 않는 값들을 모을 때다.
Set은 중복되는 값을 허용하지 않는 독특한 특징이 있는데 Set 객체에 요소를 추가할 때 이미 Set 객체 안에 있는 값(중복된 값)을 추가하려고 하면 그 값은 무시되는 특징이 있다. 처음 Set을 생성할 때 아규먼트로 배열을 전달할 수가 있는데, 이런 특징을 활용해서 배열 내에서 중복을 제거한 값들의 묶음을 만들 때 Set을 활용할 수 있다.
sort 메소드를 사용할 때 한 가지 주의해야될 부분은 메소드를 실행하는 원본 배열의 요소들을 정렬한다는 점이다. 그래서 한 번 정렬하고 나면 정렬하기 전의 순서로 다시 되돌릴 수 없으니까, 원본 배열의 순서가 필요하다면 미리 다른 변수에 복사해두는 것이 좋다.
reverse 메소드
reverse 메소드는 말 그대로 배열의 순서를 뒤집어 주는 메소드이다. reverse 메소드는 별도의 파라미터가 존재하지 않기 때문에 단순히 메소드를 호출해주기만 하면 배열의 순서가 뒤집히는데 sort 메소드와 마찬가지로 원본 배열의 요소들을 뒤집어 버린다는 점은 꼭 주의해야한다.
reduce 메소드는 누적값을 계산할 때 활용하는 조금 독특한 메소드인데 일반적으로 두 개의 파라미터를 활용한다.
첫 번째를 제외한 세 파라미터는 다른 메소드들의 콜백함수와 역할이 똑같다. 배열의 요소가 전달되고(el), 요소의 인덱스가 전달되고(i), 메소드를 호출한 배열이 전달(arr)된다. reduce 메소드에서 특별한 첫번째 파라미터는 Accumulator(누산기)라고 한다. (벌써 익숙하지 않은 느낌) 줄여서 acc라고도 작성하는데, 이 파라미터는 매번 콜백 함수가 반복해서 동작할 때 직전에 동작한 콜백 함수가 리턴한 값을 전달받는 파라미터이다. 그래서 reduce 메소드에 활용되는 콜백함수는 그 다음 콜백함수에 acc로 전달할 값을 리턴해주게 되는데, 매 반복 때마다 콜백 함수의 리턴값을 다음 콜백 함수의 acc로 전달해주면서 결국에는 마지막에 실행되는 콜백 함수의 리턴값이 reude 메소드의 최종 리턴값이 되는 것이다.
그런데, 위 설명대로라면 제일 처음 실행되는 콜백함수는 acc에 전달받을 값이 없다. 그래서 첫번째 콜백 함수가 동작할 때 acc의 값을 reduce 메소드의 두번째 아규먼트로 전달해준다.
reduce 메소드의 동작 원리를 가장 간단하게 확인하는 방법은 각 배열의 값들을 합산해보는 것이다. 인덱스와 함께 앞에 있는 두 파라미터(acc, el)도 출력하면서 각 반복동작을 구분하기 위해 구분선(-----)도 출력해주고 있다. 그리고 마지막은 두 값을 합한 결과(acc+el)를 리턴하고 있다. 메소드를 실행할 때 초기값을 0으로 작성해놓았기 때문에 처음 0번 인덱스의 요소로 콜백 함수가 동작할 때는 acc의 값이 0이고 요소의 값은 1이 된다.
결과
그리고 나서 콜백 함수가 이 두 값에 합(acc+el)을 리턴하기 때문에 0+1이 다음 콜백 함수에 acc로 전달되는 것이다. 이 과정이 계속 반복되면서 1+2가 다음 acc로 전달되고, 그 다음 3과 더해져서 결국 마지막 콜백함수가 실행될 때는 6+4가 리턴되면서 sumAll이라는 변수에 할당된 것이다.
+사실 reduce 메소드의 두번째 아규먼트(초기값)는 선택사항이다. 이 값을 작성해주면 가장 처음에 동작하는 콜백함수의 acc로 전달이 되지만 만약 생략을 하더라도 에러가 발생하지 않고 배열의 0번 인덱스에 있는 요소의 값이 첫번째 실행되는 콜백함수의 acc로 전달돼서 결과값도 동일하게 실행되긴 한다.
초기값을 지우고 실행해본 코드
하지만 처음에 실행되는 콜백 함수가 0번 인덱스가 아니라 1번 인덱스로 시작됐다. 배열의 요소는 총 네 개인데 콜백함수는 총 세번만 동작한 것이다. 지금은 단순히 두 파라미터의 합을 리턴하기 때문에 최종적인 리턴값이 똑같이 나왔지만 만약 조금 더 복잡한 동작을 했다면 예상치 못한 결과가 나타났을 수도 있다. 그래서 reduce 메소드를 사용할 땐 가급적 초기값을 명시해 주는것이 더 안전하게 사용 할 수 있는 방법이다.
some 메소드는 배열 안에 콜백함수가 리턴하는 조건을 만족하는 요소가 1개 이상 있는지를 확인하는 메소드이다. 배열을 반복하면서 모든 요소가 콜백함수가 리턴하는 조건을 만족하지 않는다면 false를 리턴하고, 배열을 반복하면서 콜백함수가 리턴하는 조건을 만족하는 요소가 등장한다면 바로 true를 리턴하고 반복을 종료한다.
const numbers = [1, 3, 5, 7, 9];
// some: 조건을 만족하는 요소가 1개 이상 있는지
const someReturn = numbers.some((element, index, array) => {
console.log(index); // 콘솔에는 0, 1, 2, 3까지만 출력됨.
return element > 5;
});
console.log(someReturn);
//출력
0
1
2
3
true;
every 메소드
every 메소드는 배열 안에 콜백 함수가 리턴하는 조건을 만족하지 않는 요소가 1개 이상 있는지를 확인하는 메소드이다. 배열을 반복하면서 모든 요소가 콜백함수가 리턴하는 조건을 만족한다면 true를 리턴하고, 배열을 반복하면서 콜백함수가 리턴하는 조건을 만족하지 않는 요소가 등장한다면 바로 false를 리턴하고 반복을 종료한다.
const numbers = [1, 3, 5, 7, 9];
// every: 조건을 만족하지 않는 요소가 1개 이상 있는지
const everyReturn = numbers.every((element, index, array) => {
console.log(index); // 콘솔에는 0까지만 출력됨.
return element > 5;
});
console.log(everyReturn);
//출력
0
false;
+ 메소드를 호출하는 배열이 빈 배열일 경우 콜백함수를 실행하지도 않고 바로 some은 false, every는 true를 리턴한다.
filter 메소드는 조건을 만족하는 모든 값을 모아야 하기 때문에 배열의 모든 인덱스가 콘솔에 다 출력되었고, find 메소드는 조건을 만족하는 하나의 요소만 찾으면 되니까 단 두번의 인덱스만 콘솔에 출력되면서 콜백함수가 두번만 실행되고 종료되었다는걸 확인 할 수 있다.
+ 상황에 따라서 존재하지 않는 요소를 찾는다거나 가장 마지막에 위치해 있는 요소를 찾는다면 결국엔 filter 메소드와 반복횟수가 같아질 수 있다. 존재하지 않는요소를 찾으면 처음부터 마지막 인덱스까지 돈 후 undefined 값이 출력된다.
