배열과 반복문을 함께 자주 사용하는 이유
배열이란, [ ] 안에 요소(element, 데이터)들이 배열을 이루고 있는 자료형
var Array = ['Javascript', 'Python','Html', 'C++', 'Css']
alert(Array[0]); //Javascript
alert(Array[2]); //Html
alert(Array[4]); //Css배열이 위 처럼 몇개 안되는 경우에는 index(배열에서의 위치를 가리키는 숫자)값도 금방 파악 할 수 있고, 요소를 꺼내보기 쉽다.
var Array = ['Javascript', 'Python','Html', 'C++', 'Css', 'C#',
'React', 'Django', 'Git', 'Java', 'Typescript', 'kotlin', 'svelte']
alert(Array[0]); //Javascript
alert(Array[2]); //Html
alert(Array[4]); //Css
alert(Array[6]); //React
alert(Array[8]); //Git
alert(Array[10]); //Typescript
alert(Array[12]); //Svelte하지만 배열의 요소가 위처럼 조금만 늘어나도 코드를 작성하기 번거로워 진다.
반복문이란, 어떤 명령을 어떤 조건 하에 있을 때 까지만 반복 적으로 실행하는 것으로, 대표적으로 for문이 있다.
console.log(1);
console.log(2);
console.log(3);
console.log(4);
.
.
.
console.log(10);
//1 2 3 4 5 6 7 8 9 10위 코드처럼 10줄이나 되는 코드를 반복문을 사용하면,
for(let i=0; i<10; i++){
console.log(i + 1)
}for(let i=0; i<10; i++){
consol.log(i + 1)
}
코드 길이가 확 짧아진다.
이런 반복문의 기능을 이용해, 배열과 함께 사용한다면 어떻게 될까?
반복문을 사용하지 않은 예시
var Array = ['Javascript', 'Python','Html', 'C++', 'Css', 'C#',
'React', 'Django', 'Git', 'Java', 'Typescript', 'kotlin', 'svelte'];
alert(Array[0]); //Javascript
alert(Array[2]); //Html
alert(Array[4]); //Css
alert(Array[6]); //React
alert(Array[8]); //Git
alert(Array[10]); //Typescript
alert(Array[12]); //Svelte배열과 반복문을 함께 사용한 예시
var Array = ['Javascript', 'Python','Html', 'C++', 'Css', 'C#',
'React', 'Django', 'Git', 'Java', 'Typescript', 'kotlin', 'svelte'];
for(i = 0; i < 13; i++){
if (i % 2 === 0){
console.log(Array[i]);
}
}
//Javascript Html Css React Git Typescript Svelte위의 예시만 봐도, 반복문을 사용한 방법이 더 코드가 간결해 진 것을 알 수 있다.
따라서 배열에 저장되어있는 방대한 데이터들을 하나씩 꺼내서 반복 적으로 처리하기 위해 반복문을 쓰고, 이로 인해 코드의 길이가 단축되고, 유지 보수가 쉬워진다.
만약 요소가 셀 수 없을 정도로 많다면 반복문을 쓰려고 해도 전체 길이가 파악이 안돼서 반복문의 조건 부분을 작성 할 수가 없다.
그럴 땐 .length함수를 쓴다.
for(i = 0; i < Array.length; i++){
if (i % 2 === 0){
console.log(Array[i]);
}
}
//Javascript Html Css React Git Typescript Svelte.length 함수는 배열 안에 있는 요소의 총 개수(길이)를 나타낸다. 이 함수를 쓰면 요소의 개수가 변해도 우리가 따로 개수를 파악해서 바꿔줄 필요가 없다.
배열의 메소드 5가지와 사용방법
1.indexOf()
var array = ['사과', '귤', '자몽'];
console.log(array.indexOf('자몽')); //2
console.log(array.indexOf('아몬드')); //-1indexOf함수는 배열 맨 앞에서 부터 ()안에 있는 원소가 배열 안에 있는지 탐색해서 있으면 해당 원소의 인덱스를 반환하고, 없으면 -1을 반환한다.
2.forEach()
반복문과 배열을 같이 사용하다 보니 그 목적에만 쓰이는 함수가 만들어진 것.
for문과 마찬가지로 반복 적인 기능을 수행할 때 사용한다.
하지만 for문과 다르게 index와 조건식, 증감 연산자를 사용하지 않고 callBack함수를 통해 사용할 수 있다.
for문 예제
let names = ['Elon Musk', 'Tim Cook', 'jeff Bezos'];
for(let i = 0; i < names.length; i++){
console.log(names[i]);
}
//Elon Musk
//Tim Cook
//Jeff Bezos.forEach()예제
let names = ['Elon Musk', 'Tim Cook', 'Jeff Bezos'];
function printNames(item){
console.log(item);
}
names.forEach(printNames);
//Elon Musk
//Tim Cook
//Jeff BezosprintNames라는 함수는 바로 실행되지않고, .forEach에 의해 호출되어서야
실행된다. 이런 함수를 callBack함수라고 한다.
.forEach()는 배열 안의 element들을 하나씩 불러온다.
item이 아니여도 아무거나 쓸 수 있다.
3.filter()
hi = ['hello', 'inho', '26'];
function me(element){
if(element.length > 3){
return true;
}
else{
return false;
}
}
var newHi = hi.filter(me);
console.log(newHi);
//["hello", "inho"].filter()메소드는 return값이 true인 요소만 모아서 새로운 배열을 만든다.
위 코드는 callback함수를 써서 요소의 길이가 3보다 큰 요소만 따로 모아서 .filter()로 새로운 배열을 만드는 코드.
4.map()
let names = ['Elon Musk', 'Tim Cook', 'Jeff Bezos'];
let data = names.map((item)=>{
return item;
})
console.log(data)
//['Elon Musk', 'Tim Cook', 'Jeff Bezos']map()메소드는 .forEach()와 달리 출력 결과가 배열로 나온다.
또한 return값을 가지기 때문에 변수를 선언하고 할당해야 한다.
5.reduce()
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var sum = numbers.reduce((a, b) => a + b);
console.log('sum =', sum);
//sum = 55reduce란 이름에 속지 말 것!
실행과정
1번. 1 ⇒ a, 2 ⇒ b ⇒ a + b = 3
2번. 3 ⇒ a, 3 ⇒ b ⇒ a + b = 6
3번. 6 ⇒ a, 4 ⇒ b ⇒ a + b = 10
.
.
. 9번. 45 ⇒ a, 10 ⇒ b ⇒ a + b = 55
10번. 55 ⇒ sum
11번 console.log('sum =', sum); 실행
출력결과 : sum = 55
알아두면 좋은 팁
hi = ['hello', 'inho', '26'];
function callback(element){
if(element.length > 3){
return true;
}
else{
return false;
}
}
var newHi = hi.filter(callback);
console.log(newHi);이 코드를 좀더 간소화 시키면,
hi = ['hello', 'inho', '26'];
function callback(element){
return element.length > 3;
}
newHi = hi.filter(callback);
console.log(newHi);이렇게 되는데,
if(element.length > 3){
return true;
}
else{ = element.length > 3
return false;
}
가 같은 의미기 때문에 가능하다.
또 한번 간소화 시키면,
hi = ['hello', 'inho', '26'];
newHi = hi.filter(function(element){
return element.length > 3;
});
console.log(newHi);이렇게 하면 함수 이름을 임의로 지정해주지 않아도 된다는 장점이 있다.
더 간소화 시키면,
hi = ['hello', 'inho', '26'];
newHi = hi.filter((element)=>{
return element.length > 3;
});
console.log(newHi);이는 화살표 함수(= >)라는 것을 사용해서 function을 없앴는데, 타이핑 하기 귀찮은 개발자들이 만들었다고 한다.
그리고 매개변수가 1개라면 element를 감싸는 ()도 생략할수 있다.
hi = ['hello', 'inho', '26'];
newHi = hi.filter(element=>{
return element.length > 3;
});
console.log(newHi);마지막으로 코드가 1줄이면 {}중괄호와 return도 생략 가능하다.
hi = ['hello', 'inho', '26'];
newHi = hi.filter(element=>element.length > 3;);
console.log(newHi);console.log(1)
console.log(2)
console.log(3)
console.log(4)
.
.
.
console.log(10)
