자바스크립트 배열 (JavaScript Array)
배열
- 여러 변수를 하나의 묶음으로 다룬다.
- 인덱스번호로 접근하고 0부터 시작한다.
- 다양한 데이터 자료형이 저장 가능하나 지양한다.
- 배열의 크기는 가변적, 데이터 추가 시 오류 없이 자동으로 저장 공간이 할당된다.
1. 배열 생성과 데이터 접근, 출력
① 배열 생성
※ 주의 let arr; let arr=[1,2,3] 이런 식으로 undefined 배열을 생성하지 말 것
② 배열 확인 : console.log(배열이름), 배열이름을 직접적으로 적어줘도 확인 가능
③ 배열 내 특정 인덱스에 접근 : 배열이름[원하는인덱스번호]
④ 배열 내 전체 데이터 출력 : 배열명.length(배열 전체 길이)를 이용한 for문을 사용해서 전체 데이터 출력
<body>
<script>
// 단순 배열 생성
let member = []
// 초기 데이터를 넣은 채로 생성
let member2 = ['재석','명수','준하','형돈','홍철','하하']
// 배열 확인
console.log(member)
console.log(member2)
// 배열 내 특정 데이터에 접근
// 배열이름[원하는인덱스번호]
console.log('두번째 멤버는',member2[1])
// 배열 내 전체 데이터 출력
// 배열의 길이 확인
console.log('무한도전 멤버 수는',member2.length)
for (let i = 0; i<member2.length; i++) {
console.log('무한도전 멤버 :',member2[i])
}
</script>
</body>
2. 배열 함수
| 배열이름.push() | 마지막 인덱스에 값을 넣어 주기 |
| 배열이름.pop() | 마지막 인덱스에 값을 빼기 |
| 배열이름.includes('찾을데이터') | 해당 데이터가 배열 안에 포함이 되어 있는지 확인 |
| 배열이름.indexOf('찾을데이터') | 해당 데이터의 인덱스 번호를 확인 |
| 배열이름.slice('시작인덱스','끝인덱스+1') | 기존의 배열을 건드리지 않고 배열을 추출해서 만들기 |
| 배열이름.splice('시작인덱스','제거개수','대체값') | 기존의 배열에 접근해 특정 값을 제거하고 대체 |
| 배열이름.at(인덱스번호) | 음수 인덱스 번호를 이용해 뒤쪽에서부터 데이터 접근 |
<body>
<script>
let group = ['재석', '명수', '홍철']
// 1. 마지막 인덱스에 값을 넣어준다 : 배열이름.push()
group.push('준하')
console.log('push를 통한 결과 : ', group)
// 2. 마지막 인덱스에 값을 빼준다 : 배열이름.pop()
group.pop()
console.log('pop을 통한 결과 :', group)
// 3. 해당 데이터가 배열 안에 포함이 되어있는지 확인 : 배열이름.includes('찾을데이터')
let hdcheck = group.includes('형돈')
console.log('includes를 통한 결과 : ',hdcheck)
// 4. 해당하는 데이터의 인덱스 번호를 확인 : 배열이름.indexOf('찾을데이터')
let jscheck = group.indexOf('재석')
console.log('indexOf를 통한 결과 :', jscheck)
// // 5. slice() vs splice()
group.push('형돈')
group.push('준하')
group.push('하하')
console.log('최종 멤버 : ',group)
// 5-1 silce() 추출 : 배열이름.slice('시작인덱스','끝나는인덱스+1')
let unit = group.slice(0,3)
console.log('slice를 통해 생성된 배열 :',unit)
// 5-2 splice
// 기존의 배열에 접근해 특정 값을 제거하고 대체할 수 있다.
group.splice(1,2,'세찬')
console.log('splice를 통해 변경된 내용 :',group)
// +) 마지막부터 at
console.log('at을 통한 결과 :',group.at(-2))
</script>
</body>
▶ 예제
① 자신이 좋아하는 것을 5가지 담을 배열 생성 (like) → 배열 출력 (제가 좋아하는 것은~)
② 배열이 마지막 요소를 제거 → 배열 출력 (제가 좋아하는 것은~)
③ 배열의 마지막 요소로 '코딩' 추가 → 배열 출력 (제가 좋아하는 것은~)
④ 배열 속 '코딩'이 존재하는지 출력, 배열 속 '코딩'의 인덱스 번호 출력
⑤ 배열 속 인덱스 3, 4번 데이터를 새로운 배열로 생성 → 새로운 배열 출력(새로운 배열은~)
⑥ 기존 배열 속 인덱스 1번부터 3번까지 제거 → 배열 출력 (제가 좋아하는 것은~)
⑦ 최종 배열을 한 개씩 출력
<body>
<script>
// 1. 자신이 좋아하는 것을 5가지 담을 배열을 생성하시오 (like)
// 2. 배열을 출력해보시오 (제가 좋아하는 것은~)
let like = ['술', '무한도전', '잠', '클래식', '코인노래방']
console.log('제가 좋아하는 것은',like)
// step2
// 1. 배열의 마지막 요소를 제거하시오
// 2. 배열을 출력해보시오~ (제가 좋아하는 것은~)
like.pop()
console.log('제가 좋아하는 것은',like)
// step3
// 1. 배열의 마지막 요소로 '코딩'을 추가하시오
// 2. 배열을 출력해보시오 ~ (제가 좋아하는 것은~)
like.push('코딩')
console.log('제가 좋아하는 것은',like)
// Step4
// 1. 배열 속 '코딩'이 존재하는지 출력해보시오
// 2. 배열 속 '코딩'의 인덱스 번호를 출력해보시오
// (배열 속 코딩이 존재하나요? true, n번 )
like.includes('코딩')
like.indexOf('코딩')
console.log('배열 속 코딩이 존재하나요?',like.includes('코딩'),like.indexOf('코딩'))
// Step5
// 1. 배열 속 인덱스 3,4번 데이터를 새로운 배열로 만들어보세요
// 2. 새로운 배열을 출력해보세요
// (새로운 배열은, ~ )
let like2 = like.slice(3,5)
console.log('새로운 배열은 ',like2)
// Step6
// 1. 기존 배열 속 인덱스 1번부터 3개의 데이터를 제거해보세요
// 제가 좋아하는 것은 ~
like.splice(1,3)
console.log('제가 좋아하는 것은',like)
// Step7
// 1. 최종 배열을 한개씩 출력하세요
// (제가 좋아하는 것은 골프입니다.)
// (제가 좋아하는 것은 코딩입니다. )
for(let i = 0; i<like.length; i++) {
console.log('제가 좋아하는 것은',like[i])
}
</script>
</body>
▶ 실습
가위바위보
arr 배열에 '가위', '바위', '보' 데이터 넣기
사용자와 컴퓨터의 선택(랜덤)을 입력 받기
콘솔창에 사용자 선택과 컴퓨터의 선택 출력
가위바위보 결과 출력
더보기
<body>
<script>
let arr = ['가위','바위','보']
let userChoice = prompt('무엇을 내시겠습니까? (가위, 바위, 보)')
let ranNum = parseInt(Math.random()*3)
let comChoice = arr[ranNum]
console.log('유저 선택 :',userChoice)
console.log('컴퓨터 선택 :',comChoice)
result = ''
if (userChoice === comChoice) {
result = '무승부'
} else if (userChoice === '가위') {
comChoice === '바위' ? result = '패배' : result = '승리'
} else if (userChoice === '바위') {
comChoice === '보' ? result = '패배' : result = '승리'
} else if (userChoice === '보') {
comChoice === '가위' ? result = '패배' : result = '승리'
}
console.log(result,'입니다.')
</script>
</body>
'HTML CSS JS' 카테고리의 다른 글
| 자바스크립트 객체 (JavaScript Object) (0) | 2023.01.15 |
|---|---|
| 자바스크립트 함수 (JavaScript Function) (0) | 2023.01.14 |
| 자바스크립트 연산자, 조건문, 반복문 (JavaScript Operator, Conditional Statements, Loop) (0) | 2023.01.14 |
| 자바스크립트 자료형, 형 변환 (JavaScript type, type casting) (0) | 2023.01.11 |
| 자바스크립트 입출력, 변수 (JavaScript input, output, variable) (0) | 2023.01.11 |
댓글