Gapus Dev Blog

[자바스크립트] 배열, 문자열 본문

프론트엔드/JavaScript

[자바스크립트] 배열, 문자열

Gapus 2023. 1. 6. 15:33

배열이란?

  • 변수 안에 여러 데이터를 넣어야 할 때 사용하는 방법이다.
  • 배열을 사용할 때는 [ ] 안에 데이터를 , 로 구분하여 넣는다.
// 빈 배열
const blanksArr = []                     // 아무것도 안담는 것도 가능

// 숫자들로 이루어진 배열
const numbers = [2, 10, 7, 3.3]       // 숫자 담기

// 문자들로 이루어진 배열
const classmates = ["코드", "캠프"]     // 문자 담기

배열의 특징

  • 배열은 각 데이터의 위치를 알려주는 index를 사용하며, index는 첫 번째 칸을 0부터 시작한다.
  • 배열의 길이를 구하는 length는 index와 달리 1부터 시작

배열의 Method와 속성

// 배열 만들기
const blanks = []                            // 비어있는 배열
const numbers = [2, 10, 7, 3.3]              // 숫자들로 이루어진 배열
const flower = ["장미", "해바라기", "민들레"]     // 문자들로 이루어진 배열

// 배열의 길이 구하기 _ length
flower.length          // 3  length는 . 만 사용

// 배열의 값 꺼내기
flower[0]              // "장미"
flower[1]              // "해바라기" []안에는 index 넣음 

// 배열의 기능 ()로 표현

// 배열의 맨 뒤에 추가하기 _ push
flower.push("무궁화")     // ["장미", "해바라기", "민들레", "무궁화"]

// 배열의 맨 마지막 삭제하기 _ pop
flower.pop()          // ["장미", "해바라기", "민들레"]

// 배열의 요소 정렬하기 _ sort
flower.sort()               // ["장미", "해바라기", "민들레"]

// 배열이 가지고있는 데이터 확인하기 _ includes
flower.includes("장미")     // true
flower.includes("수국")     // false
const flower1 = ["장미", "해바라기", "민들레", "무궁화"]
const flower2 = ["개나리", "달래"]

// 배열 2개 연결하기 _ concat
flower1.concat(flower2)     // ["장미", "해바라기", "민들레", "무궁화", "개나리", "달래"]

// 배열을 문자로 만들기 _ join
flower1.join(', ')     // 장미, 해바라기, 민들레, 무궁화
flower1.join("와 ")    // 장미와 해바라기와 민들레와 무궁화

// 배열 분리하기 _ splice
const flower = ["장미", "해바라기", "민들레", "무궁화"]
flower.splice(0, 1)     // ["장미"]

// 배열에서 원하는 요소만 뽑아내기 _ filter
flower.filter((data) => (data === "장미"))     // ["장미"]
flower.filter((data) => (data !== "장미"))     // ["해바라기", "민들레", "무궁화"]

// 배열에서 모든 요소 변경하기 _ map
flower.map((data) => (data + "꽃"))         // ["장미꽃", "해바라기꽃", "민들레꽃", "무궁화꽃"]

 

문자열이란?

  • 문자열도 배열처럼 method를 이용할 수 있고, index를 이용해 사용할 수 있다.
// 문자열
const flower1 = "장미"
flower1[0] // "장"
flower1[1] // "미"

// 문자열 쪼개기
const flower2 = "장미,민들레"
flower2.split(",") // ["장미", "민들레"]

// 문자열 양쪽 공백 제거하기
const flower3 = " rose, 민들레 "
flower3.trim()     // "rose, 민들레"

// 문자열 대소문자 변환하기
flower3.toUpperCase()     // " ROSE, 민들레 "
flower3.toLowerCase()     // " rose, 민들레 "

// 문자열에 빈칸 채우기
const chulsooNumber = "1234"
chulsooNumber.padStart(10, "0")     // "0000001234"
chulsooNumber.padEnd(10, "0")       // "1234000000"

'프론트엔드 > JavaScript' 카테고리의 다른 글

[자바스크립트] 호이스팅  (0) 2023.10.19
[자바스크립트] 조건문  (0) 2023.01.10
[자바스크립트] 데이터타입  (0) 2023.01.09
[자바스크립트] 객체  (2) 2023.01.06
[자바스크립트] 변수, 상수  (0) 2023.01.06