✨
Saltberry
GithubLinkedIn
  • 개요 Overview
  • 📝HTML/CSS
    • 구조 HTML
    • 스타일 CSS
      • z-index
  • 📦개발 Development
    • 개발 Implementation
    • 단어 Glosarry
    • 깃 Git
    • 해시 Hash
    • 노드 패키지 매니저 Node Package Manager
    • 브라우저 랜더링 Browser Rendering Process
    • 교차 출처 리소스 공유 CORS
    • 인터프리터 Interpreter
    • Object-oriented programming(OOP) 객체지향 프로그래밍
  • 💡CS 50
    • Computational Thinking
  • ✨자바스크립트 Javascript
    • 자바스크립트란 What is JavaScript
    • 표현식과 문 Expression Statement
    • 변수 Variable
    • 함수 Function
    • 참과 거짓 값 Truth Falsy
    • 배열 Array
    • Import Export
    • 스택과 큐 Stack Queue
    • 문서객체모델 Document Object Model
      • 개요 Overview
      • 도큐먼트 Document
      • HTMLCollection
      • getMethod
      • NodeList
      • childNodes, children
      • Event
      • live, static
      • Element
      • DOM Token
      • 속성 attribute
      • implementation
      • 노드 Node
      • HTMLElement
    • 브라우저 저장소 Cookie Web Storage
  • 🎁리액트 React
    • 리액트 톧아보기 Overview
    • Intro
      • 상태의 불변성 State Immutability
      • Props and State
      • Hooks
    • Concepts
  • 🚦타입스크립트 Typescript
    • Page 1
  • 🗃️리덕스 Redux
    • 왜 리덕스를 사용할까 Why Redux
    • 플럭스 Flux
  • 📬넥스트 Nextjs
    • Pages
  • ✅면접 Interview
    • Index
    • Implement experiences
    • Best practice for query parameter and fetch
  • 🚀TECH
    • Lists
    • Zustand
  • 🧬Algorithm
    • Types of algorithms
    • 이진수 변환 Binary Number
    • 후위 연산자 Postfix expression
    • 선택 정렬 Selection Sort
    • Find longest substring without repeating characters
    • 올바른 괄호 Valid Parentheses
  • 📔Mathematics
    • 다항식 Polynomial
  • 🗂️Database
    • 데이터베이스 Database
  • 📝Class
    • 자료구조 Data Structure
      • 배열 Array
    • C++ 프로그래밍
      • C++ 기초
    • 소프트웨어 공학 Software engineering
      • 소프트웨어 개요 Software overview
      • 소프트웨어 프로세스 Software process
    • 자바 Java
      • 자바와 객체지향 프로그래밍 Java and OOP(Object-oriented programming)
  • Java
    • 자바가 뭐지?
  • CA EI
    • CA EI
Powered by GitBook
On this page
  • Array
  • Array Method
  • Array.prototype.every()
  • Array.prototype.filter()
  • Array.prototype.forEach()
  • Array.prototype.join()
  • Array.prototype.indexOf()
  • Array.prototype.map()
  • Array.prototype.push()
  • Array.prototype.pop()
  • Array.prototype.unshift()
  • Array.prototype.shift()
  • Array.prototype.concat()
  • Array.prototype.splice()
  • Array.prototype.slice()
  1. 자바스크립트 Javascript

배열 Array

Array

배열은 동형(동일한 데이터 타입) 값을 저장할 수 있는 데이터 구조이다.

Array Method

Array.prototype.every()

배열 내 모든 요소가 통과하는지에 따라 Boolean 반환

const arr = [1, 2, 3, 4];
const result = arr.every((value) => value > 4); // false

Array.prototype.filter()

주어진 함수의 테스트를 통과하는 모든 요소를 모아서 새로운 배열로 반환

const arr = [1, 2, 3, 4];
const result = arr.filter(x => x < 3); // [1, 2]

Array.prototype.forEach()

각 요소 별로 함수를 실행

const arr = [1, 2, 3]
const result = arr.forEach((value) => console.log(value));
//1
//2
//3

Array.prototype.join()

모든 요소를 연결해서 하나의 문자열을 반환

const arr = ['Hello', 'I'm', 'Mochi.']
const result = arr.join(); //Hello,I'm,Mochi.
const result1 = arr.join(' '); //Hello I'm Mochi.
const result2 = arr.join('-'); //Hello-I'm-Mochi.

Array.prototype.indexOf()

배열 내에서 특정 요소를 찾아 검색된 첫번째 인덱스를 반환

const arr = ['apple', 'banana', 'orange']
const result = arr.indexOf('banana', 1); //1
const result2 = arr.indexOf('a'); // -1 찾을 수 없는 경우

Array.prototype.map()

배열 내의 모든 요소를 각각에 주어진 함수를 호출한 결과를 모아서 새로운 배열 반환

const arr = [1, 2, 3, 4];
const result = arr.map(x => x * x); // [1, 4, 9, 16]

Array.prototype.push()

인수로 받은 모든 값을 원본 배열 마지막 요소로 추가해서 변경된 Length를 반환

const arr = [1, 2];
const result = arr.push(3, 4); //4
console.log(arr) // [1, 2, 3, 4]

*Length

Length를 이용해서 배열에 요소를 추가할 수 있음

const arr = [1, 2];
arr[arr.length] = [3, 4];
console.log(arr) // [1, 2, 3, 4]

*Spread

const arr = [1, 2];
const result = [...arr, 3, 4]; // [1, 2, 3, 4]

Array.prototype.pop()

원본 배열의 마지막 요소를 원본 배열에서 직접 제거하고 제거한 요소를 반환

*원본 배열이 빈 배열이면 undefined를 반환

const arr = [1, 2];
let result = arr.pop(); // 2
console.log(arr) // [1]

Array.prototype.unshift()

인수로 전달받은 모든 값을 원본 배열 가장 처음에 추가하고 변경된 Length 반환

const arr = [1, 2];
const result = arr.unshift(-1, 0); // 4
console.log(arr) // [-1, 0, 1, 2]

*Spread

const arr = [1, 2];
const result = [-1, 0, ...arr]; // [-1, 0, 1, 2]

Array.prototype.shift()

원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환

*원본 배열이 빈 배열이면 undefined를 반환

const arr = [1, 2];
let result = arr.shift(); // 1
console.log(arr) // [2]

Array.prototype.concat()

concat에 넣는 값은 원본 배열에 마지막에 추가 (배열인 경우 해체됨) 새로운 배열로 반환

const arr = [1, 2];
const arr2 = [3, 4];
const result = arr.concat(arr2); // [1, 2, 3, 4]
console.log(arr, arr2) // [1, 2] [3, 4]

*Spread

const arr = [1, 2];
const result = [...arr, 3, 4]; // [1, 2, 3, 4]

Array.prototype.splice()

직접 원본 배열의 중간 요소를 추가/제거하고 제거한 요소를 배열로 반환

const arr = [1, 2];
const arr2 = [2, 3, 4];
let result = arr.splice(1, 1, arr2, 5); // (start, deleteCount opt, items opt)
console.log(result) // [2]
console.log(arr) // [1, 2, 3, 4, 5]

-n인 경우 배열의 마지막 부터 카운트

const arr = [1, 2, 3];
let result = arr.splice(1); // [2, 3]

Array.prototype.slice()

인수로 전달된 범위의 요소들을 복사해서 새로운 배열로 반환

const arr = [1, 2, 3];
let result = arr.slice(0, 1); // (start, end opt)
console.log(result) // [1]
const arr = [{x:1, y:2}]
const arr2 = arr.slice();
console.log(arr.x === arr2.x) // true
console.log(arr === arr2) // false

Last updated 2 years ago

✨