Notice
Recent Posts
Recent Comments
Link
«   2026/02   »
일 월 화 수 목 금 토
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
Tags
more
Archives
Today
Total
관리 메뉴

AI와 데이터 사이언스의 이론과 실전

JavaScript - 자료구조(배열, 프러퍼티), 사용자 정의 함수 본문

HTML과 CSS/JavaScript

JavaScript - 자료구조(배열, 프러퍼티), 사용자 정의 함수

큐트아리 2023. 11. 2. 17:27

1. [배열(array)] 

- 리스트와 비슷
- 이름과 인덱스로 참조되는 정렬된 값의 집합
- 배열요소는 배열을 구성하는 각각의 값을 의미

- 인덱스는 배열에서의 위치를 가리키는 숫자를 의미

let 배열명;
배열명 = [요소1, 요소2, 요소3]

혹은

const 배열명 = Array(요소1,요소2,요소3,...)

 

1.1. 배열의 접근

let arr = [100,200,300]
console.log(arr[0]) // 100
console.log(arr[1]) // 200
console.log(arr[2]) // 300

1.2. 배열의 특징

  • 배열 요소의 type이 고정되어있지 않다
  • 배열 요소의 인덱스가 연속적이지 않아도 된다
    let arr
    arr[0] = 1
    arr[1] = 100
    arr[4] = 10 // 인덱스 2 3은 undefined임
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배열1</title>
</head>
<body>
    <h2>배열1</h2>
    <script>
        const user = [1,'apple','김사과',20,'서울 서초구']
        console.log(user)
        console.log(user[0])
        console.log(user[1])
        console.log(user[2])
        console.log(user[3])
        console.log(user[4])

        user[4] ='서울특별시 강남구'
        console.log(user[4])

        console.log(user.length)
        console.log('-----------')

        user[6] = 'A형'
        console.log(user[5])
        console.log(user[6])
        console.log(user.length) // 7 undefined도 세준다

        for(let i=0;i<user.length;i++){
            console.log(user[i])
        }

    </script>
</body>
</html>

※프러퍼티(property) : 변수, 함수(프러퍼티메서드라 부를 수 있음) 모두 통틀어 프러퍼티라 부름

1.3. 배열의 (프러퍼티)메서드

  • push(): 배열의 요소를 추가
  • pop() : 배열의 마지막 값 제거
  • shift() : 배열의 첫번째 인덱스 번호에 있는 값을 제거(그리고 땡김)
  • concat : 두 배열을 합침
  • join : 배열 요소 사이에 원하는 문자를 삽입
  • reverse() : 배열은 역순으로 배치
  • sort() : 배열을 오름차순으로 정렬(내림차순이 없음 ㅜㅜ)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배열2</title>
</head>
<body>
    <h2>배열2</h2>
    <script>
        const user = [1,'apple','김사과',20,'서울 서초구']
        user.push('여자') // 값추가
        console.log(user)
        console.log('--------')

        let result = user.pop()
        console.log(user)
        console.log(result) // 사라진 녀석이 result에 저장되어있는 것을 확인 가능

        result = user.pop()
        console.log(user)
        console.log(result)

        const profile = ['여자','A형','isfp']
        result = user.concat(profile)
        console.log(result)

        result = user.join('😊')
        console.log(result)
        console.log(typeof(result)) // object 아니라 string

        const arr = ['a','z','c','f','r']
        arr.sort()
        console.log(arr) // 오름차순
        arr.reverse()
        console.log(arr) // 내림차순
    </script>
</body>
</html>
이번아니라걍자러가요

2. 배열을 이용한 반복

2.1. for in 문

변수에 배열의 인덱스 또는 객체의 key가 저장되며 반복
    for(변수 in 배열 또는 객체){
        배열의 요소 또는 객체의 프러퍼티 개수만큼 반복할 문장
    }

예시코드

    const arr = [10,20,30]
    const user = {userid : 'apple', name:'김사과',age=20}


    for(let i in arr){ // i = 0, 1, 2
        .....
    }

    for(let i in user){ // i에 userid, name, id가 들어감
        .....
    }

2.2.for of문

- 변수의 배열의 value 또는 객체의 value가 저장되며 반복

    for(변수 of 배열 또는 객체){
        배열의 요소 또는 객체의 프러퍼티 개수만큼 반복할 문장
    }

코드 예시

    const arr = [10,20,30]
    const user = {userid : 'apple', name:'김사과',age=20}
    
    for(let i of arr){ // i = 0, 1, 2
        .....
    }

    for(let i of user){ // i에 'apple', '김사과', 20이 들어감
        .....
    }

2.3. forEach문

- 일반 객체에서는 사용 불가능하고 배열에서만 사용 가능함
- 요소의 개수만큼 반복
- 변수는 최소1개부터 최대 3개까지 쓸 수 있음

    배열명.forEach(function(변수1,변수2,변수3)){
        요소 개수만큼 반복할 문장
    }

코드 예시

    const arr = [10,20,30]
    const user = {userid : 'apple', name:'김사과',age=20}
    arr.forEach(function(v,i,ar)){

        -> v=10,i=0,ar=[10,20,30]
        -> v=20,i=1,ar=[10,20,30]
        -> v=30,i=2,ar=[10,20,30]
        이렇게 반복됨
    }

 

반복문 예시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배열2</title>
</head>
<body>
    <script>
        const userArr = [1,'apple','김사과',20,'서울 서초구']
        const userObj = {userid : 'apple', name:'김사과',age:20}
        //배열 사용하기
        for(let i in userArr){
            console.log(`i:${i},userArr[${i}]: ${userArr[i]}`)
        }
        //객체 사용하기
        console.log(`--------------`)
        for(let i in userObj){
            console.log(`i:${i},userObj[${i}]: ${userObj[i]}`)
        }
        console.log(`--------------`)
        //배열 사용하기
        for(let v of userArr){
            console.log(`v:${v}`)
        }
        // forEach
        userArr.forEach(function(v,i,arr){
            console.log('hi')
            console.log(`v:${v},i:${i},arr:${arr}`)
        })

    </script>
</body>
</html>

3. 사용자 정의함수

- 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록
- 필요할 때 마다 호출하여 해당 작업을 반복하여 수행할 수 있음
- 코드를 재활용

 

3.1. 함수 선언식

    function 함수명(매개변수1,매개변수2,..){
        실행할 문장
        return 값
    }

    [사용법]
    변수 = 함수명(값1,값2,..)

 

3.2. 함수 표현식

    const 상수명 = function(매개변수1,매개변수2){
            실행할 문장
            return 값
        }

    [사용법]
    변수 = 상수명(값1,값2)

 

 

3.3. 나머지 매개변수

- 생략 접두사(....)을 사용하여 특정 위치의 인수부터 마지막 인수까지 한번에 지정할 수 있음

    function 함수명(매개변수1,...매개변수2){
        실행할 문장
        return 값
    }

    함수명(값1,값2,값3,값4,값5)
    매개변수1 <- 값1
    매개변수2 <- 값2, 값3, 값4, 값5(배열이 들어감)

3.4. default 매개변수

- 매개변수의 값을 설정하는 것
- 매개변수의 값을 정해주지 않으면 기본값을 변수에 저장

    function 함수명(매개변수1 =값1,매개변수2=값2,..){
        실행할 문장
        return 값
    }

    [사용법]
    변수 = 함수명() // 디폴트값이 있으니까 가능
    변수 = 함수명(값1,값2,..)

'HTML과 CSS > JavaScript' 카테고리의 다른 글

JavaScript - 폼(form), Location, history, navigator객체  (0) 2023.11.05
JavaScript - 호이스팅, 화살표 함수, 객체, 프로퍼티, 상속, 프로토타입  (0) 2023.11.03
JavaScript - 연산자(산술, 비교, 대입, 증감, 논리, 비트, 삼항)  (0) 2023.11.01
JavaScript - 변수(let, var)와 상수(const)  (0) 2023.10.29
JavaScript - 특징, 콘솔 출력  (1) 2023.10.27
'HTML과 CSS/JavaScript' Related Articles more