코딩테스트 연습 > 코딩 기초 트레이닝
✅ 문제 설명
정수 n과 k가 주어졌을 때, 1 이상 n이하의 정수 중에서 k의 배수를 오름차순으로 저장한 배열을 return 하는 solution 함수를 완성해 주세요.
✅ 제한사항
- 1 ≤
n≤ 1,000,000 - 1 ≤
k≤ min(1,000, n)
✅ 입출력 예
| n | k | result |
|---|---|---|
| 10 | 3 | [3, 6, 9] |
| 15 | 5 | [5, 10, 15] |
✅ 풀이
처음에는 배열의 length를 구해서 map()으로 새로운 배열을 구하려고 했는데, 간단하게 for문을 활용하는 것이 더 나은 것 같다. 다른 사람의 풀이를 참고하니 for문의 증감식을 활용할 수 있었다.
// 나의 풀이
const solution = (n, k) => {
const arr = [];
for(let i = 1; i <= n; i++) {
if(k * i <= n) {
arr.push(k*i);
}
}
return arr;
}
// 다른 사람의 풀이 참고
const solution = (n, k) => {
const arr = [];
for(let i = k ; i <= n; i += k) {
arr.push(i)
}
return arr;
}
✅ 배열 생성 방법 4가지
JavaScript에서 배열은
배열 리터럴,Array 생성자 함수,Array.of 메서드,Array.from 메서드를 통해 생성할 수 있다.
[JS] 자바스크립트의 배열 생성 방법
1. 배열 리터럴
가장 단순하고 직관적인 배열 생성 방식으로, 거의 대부분의 브라우저에서 가장 성능이 좋은 배열 생성 방법이다.
const a = [];
const b = [1, 2, 3];
// 배열 리터럴 내부에서 Spread Syntax(스프레드 문법)을 사용하여
// 기존의 배열을 활용한 새로운 배열을 생성
const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [...a, ...b]; // [1, 2, 3, 4, 5, 6]
// 스프레드 문법은 이터러블을 대상으로 사용할 수 있으므로,
// 배열이 아닌 이터러블로 배열을 생성할 수 있다.
const a = 'Hello World';
const b = [...a]; // ['H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd']
2. new Array() 생성자 함수
대괄호 []를 사용하면 더 짧은 문법으로 배열을 만들 수 있기 때문에 new Array()는 잘 사용되지 않는 편이다. new Array()엔 다루기 까다로운 기능도 있어서 더욱더 그렇다고 한다.
new Array(5)와 같이 숫자형 인수 하나를 넣어서 호출하면, 길이는 인수와 같은 5를 가지게 되지만 요소가 하나도 없는 배열이 만들어진다.
이와 같이 new Array(number)를 이용해 만든 배열의 요소는 모두 undefined가 출력되는데, 이런 뜻밖의 상황을 마주치지 않기 위해 대부분 대괄호를 써서 배열을 만든다.
let arr = new Array(2); // 이렇게 하면 배열 [2]가 만들어질까요?
alert( arr[0] ); // undefined가 출력됩니다. 요소가 하나도 없는 배열이 만들어졌네요.
alert( arr.length ); // 길이는 2입니다.
3. Array.of 메서드
전달된 인수를 요소로 갖는 배열을 생성한다.
Array 생성자 함수와의 차이점은 인수가 1개 일 때에도 해당 요소를 갖는 배열을 생성한다는 점이다.
const a = Array.of(1, 2, 'abc', {}); // [1, 2, 'abc', {}]
const b = Array.of(10); // [10];
const c = new Array(10); // [], c.length = 104. Array.from 메서드
Array.from(iterable, mapFn, thisArg)
iterable: 변환할 iterable 객체가 들어온다.mapFn: 각 요소를 변환하는 함수로서, 인자로 element, index를 받는다. (optional)
- element : 배열에서 처리되는 현재 요소
- index : 배열에서 처리하기 위한 현재 요소의 인덱스
thisArg: mapFn 실행 시에 this로 사용할 값 (optional)
이터러블 객체(for of)와 유사배열은 배열같은 객체이다. 객체이기 때문에 push 나 pop 등의 메소드를 사용할 수 없다. 하지만 이러한 객체들을 배열처럼 사용해야 할 때, → Array.from() 을 사용한다.
유사 배열 객체(array-like objects) 또는 이터러블을 인수로 전달받아 배열을 생성한다.
Array.from({ 객체: 를 받으면 }) → 요 객체가 이터러블이나 유사 배열인지 확인한다.
Array.from({ 객체: 를 받으면 }, (요 함수) => 를 통해 ) → 새로운 배열을 만들고, 새롭게 만든 배열로 복사한다.
문자열인 경우
보통 이 목적을 위해 주로 사용된다고 한다.
문자열을 각 배열로 쪼개야 하는 경우 아래와 같이 작성할 수 있다.
Array.from("foo");
// ["f", "o", "o"]배열인 경우
2번째 인자를 이용해 배열 요소 각각에 대한 연산 기능을 수행할 수 있다.
Array.from([1,2,3], (x) => x + x);
// [2, 4, 6]또는 아래와 같이 첫 번째 인자로 길이값을 받고, 기본값으로 0부터 길이가 5인 인덱스를 출력시킬 수도 있다.
Array.from({length:5}, (v, i) => i})
// [0, 1, 2, 3, 4]const a = {length: 3, 0: 1, 1: 2, 2: 3}; // 유사 배열 객체
const b = Array.from(a); // [1, 2, 3]
const c = Array.from('abc'); // ['a', 'b', 'c']
// Array.from의 두 번째 인수로 배열의 모든 요소에 대해 호출할 콜백 함수
// 세 번째 인수로 콜백 함수 내부에서 this에 바인딩할 객체를 전달받을 수 있다.
const a = 'Hello World';
const b = Array.from(a, v => v.toLowerCase()); // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']아주 간단한 배열을 만들 때,
첫 번째 인자로 {length:__}를 넣어주고, 두 번째 인자로는 (value, index)가 들어가서 => index만 반환하는 함수를 넣어준다.
// length 가 5 이고, v(value)는 예의상 놔두는 undefined 이고, 실제 i(index)로 배열을 만든다.
Array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4]기존 배열을 가공한 새 배열을 만들 때,
첫번째 인자로 [ 기존 배열 ] 을 넣어주고, 두번째 인자로는 ( x를 넣으면 ) = > x + x 가 리턴되는 함수를 넣어준다.
// 배열[1,2,3]을 기반으로 원소를 하나씩 검사해 새 배열을 만든다.
Array.from([1, 2, 3], x => x + x); // [2, 4, 6]✅ 1 ~ N까지 자연수를 나열한 배열 생성
const arr1 = new Array(5) // arr.length -> 5
const arr2 = [...new Array(10)];
아래 코드에서 new Array(10)에 바로 map을 사용하지 않고 배열 내부에 Spread Operator를 사용한 이유는 new Array(10)은 length 프로퍼티 값만 10이고 실제로 내부에 든 요소가 없기 때문이다.
// Array 생성자 함수
const a = [...new Array(10)].map((item, idx) => idx + 1); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// Array.from 메서드
const b= Array.from({length: 10}, (item, idx) => idx + 1); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]const a = new Array(5).map((item, idx) => idx + 1); // []
const b = [...new Array(5)]; // [undefined, undefined, undefined, undefined, undefined]
const c = [...new Array(5)].map((item, idx) => idx + 1); // [1, 2, 3, 4, 5]
// Array.from 메서드에 length 프로퍼티만 가진 유사 배열 객체를 전달하면
// 해당 길이 만큼의 undefined를 요소로 갖는 배열을 반환한다.
const d = Array.from({length: 5}); // [undefined, undefined, undefined, undefined, undefined]
const e = Array.from({length: 5}, (item, idx) => idx + 1); // [1, 2, 3, 4, 5]파라미터 정수 n 으로 10을 받았을 때, 길이가 10인 배열이 만들어지고 아래와 같이 1이상 10 이하의 정수를 구할 수 있다.
const solution = (n, k) => {
const arr1 = [...new Array(n)];
const arr2 = arr1.map((item, idx) => idx + 1 )
}
✅ 1 ~ N까지 규칙적인 수를 나열한 배열 생성
for문의 증감식을 활용한 규칙적인 배열 생성하기
++연산자는++1+=1의 축약 버전이므로,+=2라고 작성하면2씩 증가되며, 이는2의 배수와 마찬가지이다. 2 말고 다른 숫자를 넣으면 그 만큼 증감된다.
for문에서 i가 2씩 증가하는 방법
1 ~ 30까지 숫자 중에 짝수만 배열에 담아 출력하기
// for문의 초기화문에서 index가 2부터 시작
function addEvenNumber() {
let result = [];
for(let i = 2; i < 31; i+= 2){
result.push(i)
} return result
}
console.log(addEvenNumber());
/*[
2, 4, 6, 8, 10, 12,
14, 16, 18, 20, 22, 24,
26, 28, 30
]*/1 ~ 30까지 숫자 중에 홀수만 배열에 담아 출력하기
// for문의 초기화문에서 index가 1부터 시작
function addOddNumber() {
let result = [];
for (let i = 1; i<31; i+=2){
result.push(i)
} return result
}
console.log(addOddNumber());
/*[
1, 3, 5, 7, 9, 11,
13, 15, 17, 19, 21, 23,
25, 27, 29
]*/