1. 배열(Array)
배열은 여러 값을 순서대로 저장할 수 있는 데이터 구조입니다. 배열은 원소(element)로 구성되며 각 원소는 고유한 인덱스를 가지고 있습니다. ( 배열을 구성하는 각각의 값을 배열요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 합니다.) 배열은 여러 데이터 타입을 포함할 수 있으며, 배열의 크기는 동적으로 조정됩니다.
1. 배열 선언
let 배열명
2. 배열 초기화
배열명 = [요소1, 요소2, 요소3, 요소4 ...]
예)
let arr;
arr = [100, 200, 300];
const 배열명 = Array(요소1, 요소2, 요소3...)
3. 배열의 접근
let arr = [100, 200, 300]
console.log(arr[0]) // 100
console.log(arr[1]) // 200
console.log(arr[2]) // 300
✔ 자바스크립트 배열의 특징
1. 배열 요소의 타입이 고정되어 있지 않음
let arr = [1, 1.5, '김사과', true]
2. 배열 요소의 인덱스가 연속적이지 않아도 됨
let arr;
arr[0] = 1;
arr[1] = 100;
arr[4] = 10;
(index 2, 3은 undefined)
3. Array 객체의 메서드
- push(): 배열의 요소를 추가
- pop(): 배열의 마지막 인덱스 번호에 있는 값을 제거
- shift(): 배열의 첫번째 인덱스 번호에 있는 값을 제거
- concat(): 두 배열을 합침
- join(): 배열 요소 사이에 원하는 문자를 삽입
- reverse(): 배열을 역순으로 재배치
- sort(): 배열을 오름차순으로 정렬
4. 배열을 이용한 반복
for in 문
변수에 배열의 인덱스 또는 객체의 key가 저장되며 반복됩니다.
const arr = [10, 20, 30]
const user = {userid: 'apple', name:'김사과', age:20}
for(변수 in 배열 또는 객체){
배열의 요소 개수 또는 객체의 프러퍼티 개수만큼 반복할 문장
}
예)
for(let i in arr){ } // i에는 arr의 인덱스 번호가 들어간다.(0,1,2)
for(let i in user){ } // i에는 user의 키가 들어간다(userid,name,age)
for of 문
변수에 배열의 인덱스 또는 객체의 key가 저장되며 반복됩니다.
const arr = [10, 20, 30]
const user = {userid: 'apple', name:'김사과', age:20}
예)
for(let v of arr){
배열의 요소 개수 또는 객체의 프러퍼티 개수만큼 반복할 문장
} // v : 10, 20, 30
forEach문
배열에서만 사용 가능하며, 요소의 개수만큼 반복합니다.
(변수2, 변수3은 생략 가능)
배열명.forEach(function(변수1,변수2,변수3){
반복할 문장
});
예)
const arr = [10, 20, 30]
arr.forEach(function(v,i,ar){
// v: 10, 20, 30
// i: 0, 1, 2
// ar: [[10, 20, 30], [10, 20, 30], [10, 20, 30]]
})
2. 사용자 정의 함수
- 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록입니다.
- 필요할 때마다 호출하여 해당 작업을 반복하여 수행할 수 있습니다.
- 코드를 재활용하기 편리합니다.
1. 함수 선언식
function 함수명(매개변수1, 매개변수2 ...){
함수가 호출되었을 때 실행할 문장
...
return 값
}
변수 = 함수명(값1, 값2,...)
2. 함수 표현식
const 상수명 = function(매개변수1. 매개변수2,...){
함수가 호출되었을 때 실행할 문장
...
return 값
}
변수 = 상수명(값1, 값2,...)
✔️ 함수를 익명으로 정의하고 변수에 할당할 수 있으며, 변수 이름을 변경하거나 재할당 할 수 있습니다. 또한 함수를 객체 프로퍼티로 할당하거나 다른 함수 내에서 선언할 수 있습니다.
디폴트 매개변수
- 매개변수의 값을 설정하는 것
- 매개변수의 값을 정하지 않으면 기본값을 변수에 저장합니다.
function 함수명(매개변수1=값1, 매개변수2=값2 ...){
함수가 호출되었을 때 실행할 문장
...
return 값
}
나머지 매개변수
생략 접두사'...'를 사용하여 특정 위치의 인수부터 마지막 인수까지 한번에 지정할 수 있습니다.
function 함수명(매개변수1, ... 매개변수2) {
함수가 호출되었을 때 실행할 문장
...
return 값
}
매개변수1 <- 값1
매개변수2 <- 값2 ~ 값5
함수명(값1, 값2, 값3, 값4, 값5)
'웹 > JavaScript' 카테고리의 다른 글
Interval, Timeout 함수 (0) | 2023.10.28 |
---|---|
프로토타입/상속 (0) | 2023.10.28 |
자바스크립트(연산자/조건문/반복문) (0) | 2023.10.21 |
자바스크립트(변수/타입) (0) | 2023.10.21 |
자바스크립트 (0) | 2023.10.20 |