본문 바로가기
Front-End/JavaScript

JavaScript(4)

by newny 2023. 2. 14.
반응형

1. 스택, 힙, 비파괴적 처리, 파괴적 처리

기본자료형 복합자료형
숫자, 문자열, boolean 배열, 함수, 객체

stack

  • 차례로 저장됨
  • 저장 가능 값이 작음
  • 숫자, 문자열, boolean 저장 (기본자료형)

 

hip

  • 마구잡이로 저장됨
  • 저장 가능 값이 큼
  • 배열, 함수, 객체 저장 (복합자료형)
💡 스택영역에 저장될 수 없는 큰 값인 복합자료형은 힙 영역에 저장됨 → 값이 저장되어있는 힙 영역에 주소(번지)를 주어서 그 주소값을 스택 영역에 저장 → 힙영역 값을 불러올때는 스택영역에 저장된 주소를 레퍼런스(참조)함

 

비파괴적 처리

처리 후에 원본 그대로 유지

 

파괴적 처리

  • 처리 후에 원본 변경됨
  • 자바스크립트 특성상 값을 변경할 때 값을 생성하는것이아닌, 그 값을 직접적으로 변경
  • → 따라서 레퍼런스하는 주소가 그대로

 

const의 제한

const는 스택에 저장되는 값만 변경할 수 없게 함
→  const 타입 배열의 경우 hip영역 저장 자료이므로 값 변경이 가능

 

2. 배열

✅배열 생성하기

  • 배열 요소(element) : 배열 내부의 값
  • 인덱스(index) : 배열 요소의 위치 및 순서, 0부터 시작해서 1씩 증가
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
const a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] // 배열 선언 및 초기값
a[2]
> 2
["여러가지", 10, true, 1]

 

✅배열에 요소 추가하기

배열 뒤에 추가

push(요소)

const b = [0, 1, 2, 3, 4, 5]
b.push(6)
> 7  // 추가 된 후의 b.length 출력
b
> [0, 1, 2, 3, 4, 5, 6]

 

배열 중간에 추가

splice(시작 인덱스, 추출할 원소 개수(0~), 추가할 요소)

const c = [0, 1, 2, 4, 5]
c.splice(3, 0, 3)
> []  // 추출된 요소 출력
c
> [0, 1, 2, 3, 4, 5]

 

배열의 요소 추출하기

splice(시작 인덱스, 추출할 원소 개수(0~)

const d = [0, 1, 2, 3, 3, 4, 5]
d.splice(3, 1)
> [3] // 추출된 요소 출력
d
> [0, 1, 2, 3, 4, 5]

 

배열 내부에서 값의 위치 찾기

  • indexOf(요소)
  • 찾는값이 없으면 -1 반환함
const e = [0, 1, 2, 3, 4, 5]
e.indexOf(3)
> 3 // 요소가 위치한 인덱스 번호 출력

 

값으로 배열의 요소 제거하기 indexOf() + splice() 활용

const f = [0, 1, 2, 3, 3, 4, 5]
const index = f.indexOf(3)
> 3
f.sprice(index, 1)
> [3] // 추출된 요소 출력
f
>[0, 1, 2, 3, 4, 5]

 

배열의 요소값으로 정렬하기

문자형 배열

sort() 함수
오름차순 (단, 원본 배열의 순서도 변경되니 주의할 것!)
reverse() 함수
내림차순 (단, 원본 배열의 순서도 변경되니 주의할 것!)

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.sort()          // 배열요소 오름차순 정렬
document.write(fruits) // Apple,Banana,Mango,Orange
document.write("<hr>")

fruits.reverse()       // 배열요소 내림차순 정렬
document.write(fruits) // Orange,Mango,Banana,Apple
document.write("<hr>")

 

숫자형 배열

sort() 함수를 이용하여 오름차순, 내림차순 표현 (단, 원본 배열의 순서도 변경되니 주의할 것!)

const points = [40, 100, 1, 5, 25, 10];

points.sort(function(a, b){ return a - b }) // 오름차순 정렬
document.write(points)                      // 1,5,10,25,40,100
document.write("<hr>");

points.sort(function(a, b){ return b - a }) //내림차순 정렬
document.write(points)                      // 100,40,25,10,5,1
document.write("<hr>");
반응형

'Front-End > JavaScript' 카테고리의 다른 글

자바스크립트 예제 (4)  (0) 2023.02.14
자바스크립트 예제 (3)  (0) 2023.02.13
JavaScript(3)  (0) 2023.02.13

댓글