[Javascript] 배열 함수를 활용한 로또 번호 생성기 만들기

배열(Array) 함수

javascript를 포함한 여러 언어 부분에서 배열은 필수적으로 사용된다. 이때 사용하면 유용한 함수들이 있으니 꼭 익혀 두자.

 

• push() : 배열에 요소를 추가
• shift() : 배열에 맨 처음 요소 제거
• pop() : 배열의 맨 뒤 요소 제거
• indexOf() : 지정된 요소가 배열에서 처음으로 나타나는 위치를 반환
• find() : 지정된 함수가 반환하는 첫번째 요소 값을 반환
• findIndex() : 지정된 함수가 true인 첫번째 요소의 인덱스를 반환
• filter() : 배열 내의 원하는 요소가 포함되어있는 요소를 검색
• map() : 배열에 있는 값 중 조건에 만족하는 인덱스를 true로 반환. 나머지는 false
• forEach() : 배열을 반복시켜 작업해야할 경우 사용
• join() : 배열을 문자열로 변경할 때 사용. 배열에 들어갈 값들을 무엇으로 구분할지 매개변수로 입력받아 전달
• split() : 나누는 기준을 매개변수로 전달하여 문자열을 배열로 변경
• sort(), reverse() : sort()는 배열의 순서를 오름차순 정렬해주고 reverse()는 배열의 내용을 거꾸로 출력. sort는 앞자리 1자리만 인식하여 정렬하기 때문에 두자리 수 부턴 함수를 사용해야함
• Array.of() : 전달된 인자를 요소로 가지는 배열을 만들어줌. 배열을 생성할 때 사용하는 메소드
• concat() : 배열에 push, pop 등을 사용하면 배열의 원본에 요소가 더해지거나 빠지는데 concat을 사용하면 원본 배열은 그대로 있고 새로운 배열을 반환
• includes() : 배열에 요소가 있는지 확인하고 있으면 true, 없으면 false를 반환
• fill() : 전달 받은 값으로 배열을 채움. 배열의 개수는 유지하되 값을 초기화할때 사용
• flat() : 중첩배열을 평면화
• splice() : 배열의 중간 요소를 제거하거나 추가

 

 

push()

let fruit = ["사과", "복숭아", "배", "감"];
fruit.push("딸기");
console.log(fruit);

맨 마지막에 요소가 추가된 것을 확인

shift()

const arr3 = [1, 2, 3, 4, 5];

// 배열의 첫번째 요소 제거 (원본 수정)
arr3.shift();
console.log(arr3);

pop()

fruit.pop();
fruit.pop();
console.log(fruit);

push로 추가 하여 5개의 요소가 있었지만 pop()을 2번 사용하여 맨 마지막 요소 2개가 제거된것을 볼 수 있다.

indexOf()

let pp = ["이몽룡", "이춘향", "홍길동", "사또"];

# pp 배열 0번 인덱스의 요소 출력
console.log("indexOf 1번째 출력값 : ", pp[0]);

# "사또"가 몇번 인덱스에 있는지 출력
console.log("indexOf 2번째 출력값 : ", pp.indexOf("사또"));
# pp 배열에 "오또"가 없으니 -1 출력
console.log("indexOf 3번째 출력값 : ", pp.indexOf("오또"));

find()

let cont = ["한국", "미국", "중국", "일본"];

# cont 배열내의 "한국"이 있는지 찾기
let tfind = cont.find(function (i) {
  # 배열 내에 "한국"이 있으면 값을 return
  return i == "한국"; # true가 되면 값을 반환
});

let ress = cont.find((num) => num === "일본");

# 찾는 값이 없으면 undefined 출력
console.log(tfind);
console.log(ress);

findIndex()

let verg = ["가지", "상추", "깻잎", "양파"];

# 인덱스 요소 중 "가지"가 몇번째 있는 인덱스인지 출력
let vergfi = verg.findIndex(function (i) {
  return i == "가지";
});

# 인덱스 요소 중 "상추" 가 몇번째 있는 인덱스인지 출력
let vergfi2 = verg.findIndex((i) => i === "상추");

console.log(vergfi);
console.log(vergfi2);

filter()

let nfruit = ["1사과5", "2복숭아6", "3배7", "4감8"];
let numbers = [1, 2, 3, 4, 5];

let nff = nfruit.filter(function (i) {
  return i[0] == "2";
});
let nff2 = nfruit.filter((ff) => ff[0] == "1");

let nff3 = nfruit.filter((ff) => ff.length > 3);

let nfn = numbers.filter(function (num) {
  return num > 2;
});

let nfn2 = numbers.filter((num) => num > 1);

console.log(nff);
console.log(nff2);
console.log(nff3);
console.log(nfn);
console.log(nfn2);

map()

# nfruit 배열의 2번째 인덱스를 true로 반환
let testmap = nfruit.map(function (i) {
  console.log(i);
  return i[0] == "2";
});

# nfruit 배열의 1번째 인덱스를 true로 반환
let testmap2 = nfruit.map((i) => i[0] == "1");

# 출력값 : [false, true, false, false]
console.log(testmap);
# 출력값 : [true, false, false, false]
console.log(testmap2);

forEach()

let fortest = [1, 2, 3, 4, 5];
for (let ftest = 0; ftest < fortest.length; ftest++) {
  console.log(ftest + " 인덱스의 값 : " + fortest[ftest]);
}

let tt = 0;
fortest.forEach(function (i) {
  console.log(`${tt++}` + " 인덱스의 값 : " + i);
});

for문과 동일하게 동작

join()

let coffee = ["아", "메", "리", "카", "노"];
console.log(coffee.join("."));

split()

let splittest = "띄 엄 띄 엄 띄 엄 띄 엄";
console.log(splittest.split(" "));

sort() 와 reverse()

let nnum = [6, 4, 3, 2, 5, 7, 8, 5];

console.log(nnum.sort());
console.log(nnum.reverse());

Array.of()

const arr = Array.of(1, 2, 3, 4, 5, 6);
console.log(arr);

concat()

const arr = Array.of(1, 2, 3, 4, 5, 6);
console.log(arr);

// 배열 원본을 수정하는 메소드
arr.push(2);
console.log(arr);

// 배열 원본이 수정되지 않고 새로운 배열을 반환
const result = arr.concat(5);
console.log(result);
console.log(arr);

첫번째 출력물은 result를 보면 배열에 5를 추가 하였지만 arr를 출력했을때 5는 없는 것을 볼 수있다. 즉, 배열의 원본은 그대로다.

// 배열 2개를 합쳐서 하나로 만들기
const arr4 = [1, 2];
const arr5 = [3, 4];
const arr6 = arr4.concat(arr5);
console.log(arr6);

includes()

const foods = ["apple", "banana", "orange"];

// includes : ES7에 도입. 배열에 요소가 있는지 확인해서 boolean 타입으로 반환
if (!foods.includes("banana")) {
  foods.push("banana");
}

console.log(foods);

if문의 조건이 banana가 없으면 false를 반환하고 없다면 banana를 push. 하지만 banana가 있기 때문에 원래의 배열 출력

fill()

const arr = [1, 2, 3, 4, 5];
console.log(arr.fill(1));

flat()

// flat 메소드 : 배열의 뎁스를 1뎁스씩 올려줌
const arr13 = [1, 2, 3, 4, 5, [6, 7]];
console.log(arr13.flat());

const arr14 = [1, 2, , [3, 4, 5, [6, 7]]];
console.log(arr14.flat());
console.log(arr14.flat(2));

const arr15 = [[[[[[[[[[[1]]]]]]]]]]];
console.log(arr15.flat(Infinity));

splice()

// 배열의 1,2번 인덱스 제거
const arr = [1, 2, 3, 4, 5];
const res = arr.splice(1, 2);
console.log(arr);
console.log(res);

// splice
const arr = [1, 2, 3, 4];
// 1, 2번 인덱스를 제거하고 20과 30을 추가
const res = arr.splice(1, 2, 20, 30);
console.log(arr);
// 제거된 요소 반환
console.log(res);

 

배열 함수를 이용한 로또 번호 생성기 만들기

// 로또 당첨 번호를 저장 할 공간
let lotto = [];
// 전체번호를 담을 배열 생성
let setnum = [];

function createnum() {
  // setnum 배열에 1 ~ 45 까지 번호를 채움
  for (let i = 1; i < 46; i++) {
    setnum.push(i);
  }
}

function createlotto() {
  // 랜덤한 수 생성 하여 당첨 번호 생성
  for (let x = 1; x < 6; x++) {
    setnum = [];
    createnum();
    for (let j = 1; j <= 6; j++) {
      // 1부터 46까지 숫자를 랜덤으로 생성
      let rannum = Math.floor(Math.random() * setnum.length);

      // 생성된 숫자를 lotto배열에 추가
      lotto.push(setnum[rannum]);
      // lotto 배열에 넣은 숫자 제거
      setnum.splice(rannum, 1);
    }

    // 로또 번호 오름차순 정렬
    lotto.sort(function (a, b) {
      return a - b;
    });

    // 배열을 문자열로 변환
    console.log("로또 번호 : " + lotto.join(", "));
    // 배열 초기화
    lotto = [];
  }
}

// 함수 실행
createlotto();

이번주는 이 번호로 로또 사봐야겟다