일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- webpack
- 클라이언트 사이드 렌더링
- 이벤트 캡처링
- 프로미스
- 주소창에 naver 입력시 일어나는 일
- 깊은 복사
- props와 state 차이점
- 리액트
- 세션 스토리지
- MPA
- 자바스크립트
- 스코프 체인
- 변수 생성 단계
- 브라우저 렌더링원리
- 로컬 스토리지
- react
- 호이스팅
- 자바스크립트 함수
- CSS
- 리액트의 생명 주기
- async/await
- 얕은 복사
- 가상 dom
- CORS
- 이벤트 버블링
- 실행 컨텍스트
- undeclared
- polyfill
- 서버 사이드 렌더링
- 자바스크립트의 클래스
Archives
- Today
- Total
Gapus Dev Blog
[자바스크립트] 배열, 문자열 본문
배열이란?
- 변수 안에 여러 데이터를 넣어야 할 때 사용하는 방법이다.
- 배열을 사용할 때는 [ ] 안에 데이터를 , 로 구분하여 넣는다.
// 빈 배열
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 |