Javascript / 기초 / 배열, 반복문

1. 반복문

 

1-1. for문

 

if문과 같은 형태로 사용하면 되는데, 대신 조건문에 차례대로 '초기화; 조건식; 증감문'을 작성해주어야 한다.

 

>> 초기화, 조건식 다음에 ';(세미콜론)'을 써야함을 기억하자. ',(comma)'가 아님.

 

for(초기화; 조건식; 증감문){
조건식을 만족하기 전까지 반복적으로 실행하고 싶은 문구;
}

ex)

let sum = 1;

for(let n = 1; n <=10; n = n+1) {

   sum = sum + n;

}

 

1-2. while문

 

for문과 같은 형태이지만, '초기화는 while문 바깥에, 조건식은 while문의 조건문에, 증감문은 while문 안에' 작성해주어야 한다.

초기화나 증감문이 필요없는 상황일때는 while문을 쓰는 것이 더 편리하다.

 

초기화를 위한 변수 선언;
while(조건식){
조건식을 만족하기 전까지 반복적으로 실행하고 싶은 문구;
증감문;
}

 

ex)

let sum = 1;

let n = 1;

 

while( n <= 10) {

  sum = sum + n;

  n = n+1;

}

 

 

1-3. 반복문 관련 팁

 

>> 만약 초기화문에서 let을 안쓰면, 자동적으로 변수 n을 var n 으로 잡아준다.

js에서는 let, var, const 등이 있는데, 지정하는 것에 따라 사용하는 범위가 달라진다.

추후에 자세히 배울 수 있다.

 

>> 반복문에서 continue를 쓰면, 다음 if문을 무시하고 다음 증감문으로 넘어가라는 뜻이 되고,

break을 쓰면 break를 만나는 즉시 for문이 끝나게 된다.

 

ex) 결과값으로 return 되는 count는 몇일까?

  ans) count === 10

let count = 0;
function howMuchCount(){
 for(i = 0; i < 10; i++){
 if(i < 5){
count = count + 1;
 continue;
}
 else if(i < 10){
count = count + 5;
 break;
}
}
 return count
}
console.log(howMuchCount())

2. i=0, count=1 이 되고, continue가 되므로 다른 else if문은 무시하고 for문을 진행한다(i=1)

3. i=4, count=5 가 되기까지 첫번째 if문만 실행된다.

 

4. i=5, count=5 인채로 두번째 else if문(i<10)이 실행된다.

5. i=5, count=10 이 되고, break이 나왔으므로 for문을 즉시 멈춘다.

6. count값을 return 한다.

 

 

>> 반복문을 조건식까지 실행하고 난 뒤, 증감문을 실행하고 조건식을 비교한 뒤 for문이 종료된다.

for(var i = 0; i < 3; i++) {
}
 
console.log(i)  // 결과 : 3// for문 안에서 아무것도 실행하지 않지만, i값은 1씩 증가한다.// i = 2가 되어 for문은 0, 1, 2까지 총 3번 실행되고,// 최종적으로 i++이 되어 i = 3이 된 후, 조건식 i < 3을 검사하고 for문이 종료된다.// 따라서 i를 출력하면 3이 나오게 된다.

 

 

 

 

---

 

 

 

2. 배열

 

1. 배열의 구성, 형태

 

기본 형태

배열은 순서가 있는 값이다.

대괄호 '[ ]' 안에 여러 개의 값을 저장할 수 있다.

 

저장되는 값들이 모두 같은 타입일 필요가 없으며, 배열 안에 배열을 저장할 수도 있다.

ex)

let a = [10, [20, 50], NaN, 'egg and spam']

10 이라는 'value(값)'은 'Element(요소)' 라고 하며, '순서'는 'index'이다.

>> index는 가장 왼쪽에서부터 0으로 시작한다.

 

>>배열은 콘솔 창에서 console.table(배열이름) 이라고 입력해주면,

index와 value가 table의 형태로 보기좋게 표시된다.

 

 

 

배열은 Reference type이다.

 

아래 예시를 보자. ref) https://www.dyn-web.com/javascript/arrays/value-vs-reference.php

 

1 2 3 4 5 6 7 8 9 10

var ar = ['one', 'two', 'three']; var ar2 = ar; // assign ar to ar2   ar2[1] = 2; // modify element in ar2   // change to ar2 also changes ar console.log( ar ); // ["one", 2, "three"] console.log( ar2 ); // ["one", 2, "three"]   alert( ar === ar2 ); // true (ar and ar2 refer to the same object)

cs

배열 ar을 정의하고, ar2에 ar을 할당 하였다.

이후 ar2[1] 값만 2로 바꿔주었는데, ar[1]의 값도 2로 바뀌었음을 확인할 수 있다.

즉, ar, ar2 라는 배열 2개 모두가, ['one', 2, 'three'] 라는 배열의 주소를 모두 참조(Refer)하고 있는 것이다.

배열은 물리적으로 어떤 값을 만들어내는 것이 아니라, 단순히 참조만 하는 Reference type이다.

Javascript의 자료형 자체가 Primitive type, Reference type을 로 나뉘어져 있다.

자료형에 대한 내용은 Javascript의 자료형(Primitive type, Reference type)에서 살펴볼 수 있다.

 

그리고, 아래 예시를 보면 두 배열의 요소들의 값이 같더라도 각 배열은 주소가 다르므로 동일 비교 시, false가 나오게 된다.

 

1 2 3 4

let ar = [1, 2, 3]; let ar2 = [1, 2, 3];   console.log( ar === ar2)  //결과 : false. 각 요소의 값을 비교하는 것이 아니라,  //요소의 주소값을 비교하게 된다.

cs

 

 

---

 

2. 배열 값의 접근, 배열 값의 변경

 

배열 값의 접근은 String과 동일하게,

배열이름[index]

라고 해준다.

 

 

 

>> 배열의 범위를 넘어서는 값에 접근하려고 하면, undefined가 출력되게 된다.

(Python과 다르게 '-'값을 갖는 index는 허용하지 않는다.)

ex)

a= [10, 20 , 50, 80] 일때,

a[6] : undefined

 

 

 

>> 2차원 배열의 접근은 차수 순서대로 index를 차례로 작성해주면 된다.

ex)

a= [ [10,20], [30,40]] 일때,

a[1][0] = 30

 

  >>> 혹시 배열 안에 string이 있더라도 똑같은 방법을 사용하면 된다.

  ex)

  b = ["apple", "rice"]일때,

  b[0][3] = "l"

 

 

 

>> 배열은 mutable해서 값을 바꿔줄 수 있다. (String은 immutable)

배열이름[index] = new value
: 배열 안의 index에 해당하는 위치에 있는 값을 'new value'로 바꾸어준다.

ex)

a = [10, 20, 50, 80]; 일때,

a[0] = 40; 이라고 하면

a = [40, 20, 50, 80]이 됨.

 

 

 

>> JS 에서는 배열끼리 단순 덧셈이 불가능하다

Python과 같이 a = [1, 2], b = [c, d] 일때,

c= a + b 를 하면

c=[1, 2, c, d] 가 되지 않는다!

   >>>.concat을 활용해야 한다.

배열1.concat(배열2)

그리고 만약, a만 배열이고 b가 element 이더라도 작동한다.

 

 

 

 

---

 

3. 배열 기초 Method

 

배열.length
: 배열의 길이를 구해준다.

 

 

 

배열.push(값)
: 배열의 맨 끝에 값을 추가해준다.

 

 

 

배열.pop()
: 배열의 맨 끝 값을 빼와서 출력해준다.

출력만 해줄뿐, 저장하고 싶다면 어떤 변수에 할당해야 한다.

ex) let a = array.push();

 

 

 

 

Array.isArray('배열명')
: '배열명'이 배열이면 true, 아니면 false를 return한다. 

배열의 type은 object이다.

아직 배우진 않았지만, object의 type을 검사해도, object라고 나온다.

따라서 배열인지 아닌지 구분하기 위해 만들어진 method가 Array.isArray이다.

 

 

 

 

배열.shift()
: 배열의 맨 앞의 값을 빼와서 출력해준다 (pop을 맨 앞쪽에서 하는 것)

 

 

 

 

배열.unshift(값)
: 배열의 맨 앞에 값을 추가해준다.

push(값)나 pop() 같은 'p'로 시작하는 친구들은 배열의 맨 뒤쪽에서,

shift(), unshift(값) 같은 's'로 시작하는 친구들은 배열의 맨 앞쪽에서 작동한다.

 

pop은 튀어나온다는 거니까, 배열에서 element를 빼는 것. push는 밀어넣기니까 배열에 element 추가.

shift는 이동하는 거니까, 배열에서 element를 빼는것. unshift는 반대니까 배열에 element 추가.

 

 

 

 

 

배열.indexOf(값)
: 배열 안에 있는 값의 index를 출력해준다. String의 method와 동일하다.

>> 배열 안에 없는 값을 넣으면 -1 을 출력한다.

이것을 활용하여 배열에 값이 있는지 검사할 수 있다.

 

>> index값을 아는 것이 아니라 단순히 값이 있는지 없는지 검사만 하고 싶다면 .includes 를 사용하면 된다.

다만 includes method는 Internet Explorer에서 지원 안됨을 기억하자.

 

 

 

 

 

배열.slice(begin, end)
: 특정 배열을 begin 부터 end-1의 index까지 잘라내서 새로운 배열을 반환해준다.

>> begin >= end 일 경우, 빈 배열을 반환한다.

>> end >= 배열.length 일 경우, begin부터 배열.length까지만 존재하는 배열을 반환한다.

>> begin === 배열.length - 1, end >= 배열.length일 경우, 배열의 맨 마지막(배열.length - 1)값만 갖는 배열을 반환한다.

>> slice() : 새로운 배열을 반환해준다.

 

 

 

 

배열.splice(begin, count, additem1, aditem2, ...)
: 배열에서 begin index 부터 count 개수만큼의 element를 빼내와서 새로운 배열로 반환하고,
  additem1, additem2... 등을 begin index 위치에서부터 삽입한다.

>> splice 메소드는 배열에서 요소를 제거하는데에도 사용될 수 있다

ex) MDN web docs. splice 검색: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

 

 

 

 

 

배열.join(seperator)
 : 배열의 각 요소들을 seperator를 기준으로 해서 연결하여 String으로 반환해준다.

ex) MDN web docs.join() 검색:

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join

 

>>seperator를 비운채로 작성하면 각 요소 사이에 ','가 남는다.

각 요소들을 그냥 이어주고 싶다면, seperator로 ''을 작성해주어야 한다.

 

 

>> 배열의 각 요소 사이에 원하는 문자열을 추가 후, 연결된 String으로 반환할 수도 있다.

 

let a = Array(5)  // 길이가 5이고 각 요소가 빈 문자열인 배열 생성
a.join(' '+ 'hehe')  // 배열의 두번째 요소부터(=각 요소 사이에) 공백 한 칸과 hehe라는 문자열을 넣고 연결된 String으로 반환.
 
//  결과 : " hehe hehe hehe hehe"
 
 
let b = ['oh', 'ho', 'ho'];
b.join(' ' + 'hehe');
 
// 결과 : "oh heheho heheho"

 

 

 

 

배열.reverse()
  : 배열의 요소들의 위치를 뒤집은 배열을 반환해준다.

 

 

 

 

---

 

 

4. 배열 관련 팁

 

 

 

빈배열

> 빈 배열이 있다면, 배열 안의 요소는 undefined로 지정된다.

> 빈 배열의 길이는 0이다.

 

 

 

new Array(숫자)

'숫자'에 해당하는 길이의 빈 배열을 만들어준다.

 

 

 

배열이름.length = 숫자

'숫자'에 해당하는만큼 배열을 앞에서부터 자른다.

ex)

let a = ['a', 'b', 'c'];
a.length = 2;

console.log(a)  // 결과 : a = ["a", "b"]

 

 

 

유사배열

object를 각 요소로 갖는 배열을 유사배열이라고 한다.

DOM 문서에서 이런 유사배열의 형태가 많이 나온다.

ex)

arr = [li, li, li]

 

얼핏 보기에는 li(리스트 tag)로 된 배열 같지만, 실제로 console을 이용하여 li의 정체를 살펴보면

각 li = { 0 : 'this', 1 : 'is', 2 : 'not', 3: 'array', length : 5} 와 같이 객체의 형태로 되어있다.