학습 목표
- 자바스크립트에서 배열의 선언에 대해 알 수 있다.
- 배열에서 요소 (element), 길이 (length)가 무엇을 의미하는지 알 수 있다.
- 배열에 요소를 추가할 수 있다.
- 배열의 길이를 이용해 요소가 몇 개 있는지 확인할 수 있다.배열
배열이란?
= 자바스크립트에서 다수의 값을 한 번에 다룰 수 있는 자료형으로
다수의 값을 담을 수 있는 커다란 상자와 같다.// 대괄호 [ ] 안에 여러 개의 값이 들어가 있는 형태다.
각각의 값을 요소 (element)라고 한다. 요소와 요소는 ','로 구분한다.
// 이전에 공부한 변수를 선언하고 할당하는 방법은 하나의 변수에 하나의 값만 넣었다. (변수에 대한 게시글 참고)
만약, 다수의 값을 하나의 변수에 할당하고 싶다면 '배열'을 사용한다.
// 배열에 변수를 할당하는 것도 가능하며, 변수를 선언하는 방법과 비슷하다.
let 배열이름 = ['🥕', '🍅','🥝','🍓','🍌'];
배열에 요소 추가하기
배열에 요소 추가하기
= 요소(element)를 추가할 때는 'push'를 사용하면 된다.
ex) box.push('🥕') // 변수명.push('할당할 변수')
console.log(box) // ['당근']을 배열한다.Ex)
비어 있는 배열 하나를 'box'라는 변수에 할당하라.
그리고 농작문들을 상자에 담아라.
let box = [];
box.push('🥕')
box.push('🍅')
box.push('🥝')
console.log(box) // ['🥕', '🍅','🥝']
<실습 1>
// 도전! 수확한 작물을 상자에 담아주세요!
// 모든 작물이 상자에 담기면 자동으로 포장이 종료됩니다.
// test 함수 안에 배열을 사용하여 코드를 작성해 봅시다.
// 담아야 할 농작물은 crops 배열 안에 저장되어 있습니다.
// 새로 만들어진 box 배열에 수확한 작물을 넣어보세요!
// TIP push 명령어를 사용해보세요.
// TIP 반복문을 사용해도 좋습니다.
// 👇 그럼, 여기서부터 코드를 작성해보세요 :)
(1) 배열을 사용한 경우
function test(crops) {
let box = [];
box.push("🍓")
box.push("🍓")
box.push("🍓")
box.push("🥕")
box.push("🥕")
box.push("🥝")
box.push("🥝")
return box;
}
let crops = ["🍓", "🥕", "🥝", "🥕", "🍓", "🥝", "🍓"];
test(crops);
export default test;
(2) 반복문을 사용한 경우
function test(crops) {
let box = [];
for(let i = 0; i <7; i++) {
box.push(crops[i]);
}
return box;
}
<결과물 1>
length
length(배열의 길이) 란?
= [배열이름.length]를 사용하여 배열의 요소가 몇 개인지 일일이 계산하지 않아도 쉽게 알 수 있도록 하는 속성이다.// 배열의 요소가 몇 개인지 일일이 셀 필요없이 'push'를 몇 번 했는지 확인하는 방법.
Ex)
let box = []; // 빈 배열을 할당한다.
console.log(box) // [] :빈 배열은 저장된 요소가 없는
비어있는 배열이므로
console.log(box.length); 0 :길이는 0이다.
box.push('감자') // 배열에 요소를 추가한다.
box.push('토마토');
console.log(box) // ['감자', '토마토']차례대로
감자와 토마토를 배열에 넣어기 때문에
console.log(box.length); 2 : 배열(box)의 길이는 2가 된다.<실습 2>
// 도전! 박스에 담긴 농작물의 개수를 찾아야 합니다.
// 정확하게 개수를 맞춰야 합니다.
// test 함수 안에 배열을 사용하여 코드를 작성해 봅시다.
// 박스에 담겨있는 농작물은 crops 배열 안에 저장되어 있습니다.
// TIP 바로 length 명령어를 이용하셔도 됩니다!
// TIP 반복문을 사용해보세요. 박스의 숫자만큼 반복하는것이 중요합니다.
// 👇 그럼, 여기서부터 코드를 작성해보세요 :)
function test(crops) {
let count = 0;
for(let i = 0; i < crops.length; i++) {
count++;
}
return count;
}
let crops = ["🍓", "🥕", "🥝", "🥕", "🍓", "🥝", "🍓"];
test(crops);
export default test;<결과물 2>
developerpyk