[인프런] Javascript 입문 - 배열과 문자열1 [ 배열, 원소, 인덱스, undefined, typeof, length, immutable/mutable, 객체/속성/메소드, push()/pop(), unshift()/shift() ]

* 이 글은 인프런에서 제공하는 호눅스님의 유료 강의 '쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1'를 듣고 공부하며 정리한 글입니다. 강의 내용에 더해, 제가 필기하고 구글링한 내용이 정리되어 있습니다. 초보인 제가 이해한 대로 정리했기 때문에, 부정확한 내용이 있을 수 있음을 감안해 주시길 바랍니다. 강의를 듣고 내용을 정리한 글이기 때문에 문제가 되지 않는다는 인프런 측 답변을 받은 적이 있으나(https://bibi6666667.tistory.com/37), 저작권상 문제가 된다면 보호 모드(비공개)로 전환하겠습니다.

 

배열과 문자열 1

 

배열 (Array)

자바스크립트에서 "가장 많이 사용하는 자료구조"의 하나.
따라서 굉장히 중요하다! (배열, 해쉬가 가장 중요)
주로 같은 종류의 값 여러 개를 묶어서, 저장하고 관리하기 위해 사용합니다.
(같은 용도, 같은 타입의 값들)

배열 원소/요소(element)

배열을 구성하는 각각의 값.

※참고로 자바스크립트의 배열은 "객체Object"입니다.
(배열객체 array object = 배열이면서 객체이다. 일반 객체와는 약간 다르다.)
객체애 대해서는 뒤에서 다시 배웁니다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array(나중에 다 이해될 내용이니 참고만!)

Array

 

---

 

배열 만들기 1

var arr = []; // 비어있는 배열을 선언함.
typeof arr // "object". 즉 배열도 객체이다.

배열 만들기(선언하기)

대괄호 안에 배열 요소들을 쉼표로 구분해 나열하는 방식.

var arr = [배열요소1, 배열요소2, ...];

var arr2 = [50, 60, 70, 99];
arr2; // ▶ (4) [50, 60, 70, 99]

▶ (4) [50, 60, 70, 99]
(4) 는 배열의 원소가 4개임을 의미.
[50, 60, 70, 99]는 이 배열의 형태를 보여주는 것.

var scores = [50, 60, 70]; 
console.log(scores); 
console.log(scores.length);

 

 

---

 

인덱스를 이용해서 배열의 원소 읽기 (배열의 참조)

인덱스 index = 배열에서의 위치를 가리키는 숫자. 

배열이름[인덱스];
배열의 각 요소를 인덱스로 참조한다.

배열의 첫 번째 요소의 인덱스 = [0]
배열의 두 번쨰 요소의 인덱스 = [1]..

컴퓨터는 항상 0부터 센다. 
즉 0번째 = 1번째, 1번째 = 2번째, 4번째 = 5번째..
없는 값을 찾으려고 하면 undefined (값이 정의되지 않음)가 출력된다.

scores[0]; // 50이 출력된다.
scores[3]; // undefined가 출력된다.  70을 출력하기 위해서는 scores[2];로 입력해야 한다.

 

※ undefined란?

: 대상은 존재하지만 값이 없음. (값이 정의되지 않음)

c // 에러. c is not defined

var c;
c // 에러 대신 undefined. c라는 대상은 존재하지만 값이 정의되지 않음.

 

 

배열에 값 쓰기(배열의 요소 값 생성 & 수정하기)

배열이름[인덱스] = 값;
해당 배열의 인덱스 번호에 우항의 값이 들어간다.

 

scores[0] = 100; 
scores[9] = 50;

var arr3 = [2, 4, 6, 8, 10];
arr3[0] // 2
arr[5] // undefined. '10'은 [4]번째 값이다 (컴퓨터는 0번째부터 시작)
arr[4] // 10

 

배열 만들기 2

var a = []; a[0] = 2; a[1] = 4;

var a = []; 
a[0] = 2; 
a[1] = 4;

비어 있는 배열을 만든 뒤 0번째, 1번째, 2번째 .. 값을 삽입하는 것도 가능하다.

※ a[0] = 10, a[1] = 20, a[4] = 100 을 입력하면 어떻게 될까?
-> a = [10, 20, empty *2, 100]이라는 배열이 생성된다.
정의하지 않은 2번째, 3번째 값은 empty로 들어가고,
a[2] = a[3] = undefined로 출력된다.

 

---

 

배열의 타입 알아보기

typeof 대상;
대상의 타입(자료형)을 알려줌.
숫자 = number, 문자열 = string, undefined = undefined타입 ..

 

typeof scores 
typeof scores[0]

 

배열의 길이 구하기

배열이름.length;
배열의 길이 = 원소의 갯수를 구해 줌.

scores.length;

※  a = [10, 20, empty *2, 100] 의 길이는 어떻게 나올까?
-> a.length; 의 결과는 5이다.
즉 비어 있는 자리도 배열의 원소로 쳐 준다.

※  x = [1]
x.length = 10 으로 정의하면 어떻게 될까?
-> x = [1, empty * 9].
즉 empty로 빈 자리를 채워 배열의 길이가 늘어난다.

 

배열의 마지막 원소를 읽어 오려면?

배열이 매우 길 때, 마지막 원소를 읽어오고 싶다면??

예를 들어 길이가 6인 배열 var a=[1, 2, 3, 4, 5, 6]; 에서 마지막 원소는 a[5] = 6.
즉 마지막 원소의 인덱스인 배열의 길이 -1을 활용한다.
-> 배열이름[배열이름.length -1];

scores[scores.length - 1];

같은 방식으로, 배열의  맨 뒤에서 두 번째 원소를 읽어오고 싶다면??
-> 배열이름[배열이름.length -2];

 

---

 

문자열과 배열

• 문자열과 배열은 비슷한 성질을 많이 가지고 있습니다.
• 애초에 문자열 = '문자의 배열' 이라는 뜻이기 때문. 비슷할 수 밖에 없다.

but 알아둬야 할 문자열과 배열의 차이점 : 

• 문자열: Immutable 바꿀 수 없다.
• 배열: Mutable 바꿀 수 있다.

즉 문자열은 한번 선언해 두면 일부를 인덱스로 수정할 수 없지만, 배열은 일부를 인덱스로 수정할 수 있다.
( 일단은 이런 속성이 있다는 것을 알아두고 넘어가기 )

• 배열의 속성과 메소드를 문자열에도 테스트해보세요.

※테스트 예제

var str = "hello";
str.length // 5
str[0] // "h"

// 이때..
str[0] = "k" // 로 재정의하여 "hello"를 "kello"로 바꿀 수 있는가?

str; // "hello" 
// 안 된다. 문자열은 immutable 즉 변하지 않기 때문.

//////////////////////////////////

var arr = str.split("");
arr = ["h", "e", "l", "l", "o"]; // "hello"의 각 글자를 담은 배열로 만듦.

// 이때..
arr[0] = "k" // 로 재정의하여 "hello"를 "kello"로 바꿀 수 있는가?

arr; // ["k", "e", "l", "l", "o"];
// 된다. 배열은 mutable 즉 변할 수 있기 때문.

 

 

---

 

배열의 메소드들 1

참고 : 객체, 속성, 메소드의 개념 이해 bamtol.net/v5/bbs/board.php?bo_table=pp_js&wr_id=84

객체object는 속성property과 메소드method가 있다.

-모든 객체는 속성(property, 프로퍼티) 을 가진다. 
(ex. window객체는 location등의 속성을, img객체는 width, height 등의 속성을 가질 수 있다.

-객체의 동작과 관련된 것이 메소드(method, 메서드)이다.
(ex. window객체에 alert() 메소드를 추가해 윈도우 창에서 경고창을 열어줄 수 있다.)

예를 들어..
"토끼"라는 객체가 있다면,
이 객체의 속성에는 "색깔=흰색", "귀=길다"  등이 있을 것.
이 객체의 메소드는 "뛰어다닌다", "풀을 먹는다" 등이 있을 것. 

배열도 객체이므로 속성과 메소드를 가진다.
지금은 배열의 메소드 중 유용한 4가지만 알아볼 것.

 

push() <-> pop()

push(value);
맨 뒤에 값을 넣는 메서드.
배열의 마지막 원소로 value를 새로 삽입합니다.

var b = [];
b.push(1)
b; // [1]
// 비어 있는 배열 b에 1이라는 원소를 밀어넣음.

b.push(2)
b; // [1, 2]
// 배열 b의 맨 뒤에 2라는 원소를 밀어넣음.

b.push(3)
b.push(3)
b; // [1, 2, 3, 4]

 

pop();
맨 뒤의 값을 뽑는 메서드.
push()의 반대 개념.
배열의 마지막 원소를 빼서 변수에 넣어 줍니다.
이 때 배열의 길이는 1 감소합니다.

b = [1, 2, 3, 4];
b.pop(); // 4가 출력. 
// b라는 배열의 맨 끝 원소 하나를 뽑아옴.

// .pop()로 뽑아 온 것을 활용하려면, 변수를 새로 정의해 거기에 넣어주면 된다.
b = [1, 2, 3];
var x = b.pop();
x; // 3
b = [1, 2]; 

//문제?
b = []; // 비어 있는 배열.
b.pop(); //의 결과는? undefined 이다. 꺼낼 게 없으므로..

 

스택(접시 더미를 쌓아서 위에서 하나씩 빼는 것)처럼 동작하는데 사용합니다.

스택에 대해 각자 검색해 보세요.

 

shift() <-> unshift()

push, pop과 반대로 동작합니다.

unshift(val);
맨 앞에 값을 넣는 메서드.
배열의 맨 앞에 새로운 값val을 추가합니다.

var b = [100]; // b는 100이라는 원소 하나를 갖는 배열.

b.unshift(50); // 2 (맨 앞에 50을 넣은 뒤 b의 원소의 갯수, 즉 길이를 알려주는 것)
b; // [50, 100]

b.unshift(30); // 3
b; // [30, 50, 100]

b.unshift(10); // 4
b; // [10, 30, 50, 100]

 

shift();
맨 앞의 값을 뽑는 메서드.
unshift()의 반대 개념.
배열의 맨 앞의 원소를 빼서 변수에 넣어 줍니다.

var b = [10, 30, 50, 100];

x = b.shift(); // 10 (맨 앞에서 뽑아온 값 출력)
x; // 10
b; // [30, 50, 100]