본문 바로가기
웹/JavaScript

자바스크립트(배열/함수)

by 코낄2 2023. 10. 21.

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