출처
- 생활코딩
https://opentutorials.org/course/3085/18825
https://opentutorials.org/course/743/4736
- Nomad Academy
www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK
1. Array (배열)
연관된 데이터를 리스트에 담아두는 방식.
변수가 하나의 데이터를 지정하기 위한 것이라면
배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이다.
1). 기본문법
<script>
const 배열명 = ['element1', 'elemet2'];
</script>
- 배열을 하고 싶으면 대괄호 []안에 따옴표로 각각의 원소명을 쓰면 된다.
: 원소(element) = value (각각의 데이터)
- 각각의 원소는 순서대로 고유의 자리값(0부터 시작)을 갖는다.
이것을 색인(index)라고 한다.
- 요소로 string값이 아닌 값을 넣을 땐 따옴표 없이 입력하면 된다.
- index태그를 여러 개 입력하고 싶으면 쉼표로 구분지으면 된다.
2). 변수명 지정 방식 : Camel case
ex). const dayOfWeek = ["Mon" "Tue" "Wen" "Thu" "Fri" "Sat" "Sun"];
배열명을 dayofweek라고 적지 않는다.
- Camel case
: 낙타의 등과 같이 산처럼 높낮이가 있게 보이는 이름 부여 방식.
소문자로 변수명을 시작해서 스페이스가 필요한 경우
스페이스 대신 대문자를 써주고 다음 단어를 써준다.
3). 기본 예제
<body>
<h1>Array</h1>
<h2>Syntax</h2>
<script>
var coworkers = ["index1", "index2"];
</script>
<h2>get</h2>
<script>
document.write(coworkers[0]);
document.write(coworkers[1]);
</script>
<h2>추가로 뒤에 index를 추가시키고 싶을 때</h2>
<script>
coworkers.push('index3');
coworkers.push('index4');
</script>
<h2>count</h2>
<script>
document.write(coworkers.length);
</script>
</body>
- 변수명.push('index명')을 하면 새로운 요소(예시에선 index3, index4)를 앞에 써둔 배열 맨 뒤에 추가할 수 있다.
- 변수명.unshift('index명')을 하면 새로운 요소(예시에선 index3, index4)를 앞에 써둔 배열 맨 앞에 추가할 수 있다.
- document.write(coworkers[0]);을 하면
첫 번째로 배열된 coworker 요소 이름이 불러와진다. : index1
주의할 점은 자리를 0부터 세어 나간다. 그래서 첫번째 자리는 0이다.
2. 배열과 자주 쓰이는 속성 (추가, 제거, 정렬 등..)
(var 배열명 = [나, 너, 우리];
라는 배열이 있을 때를 예로 들어 설명한다)
- 배열명.pop();
: 배열의 맨 뒤에 있는 요소를 제거할 수 있다.
- 배열명.shift();
: 배열의 맨 앞에 있는 요소를 제거할 수 있다.
- 배열명.unshift(호우);
: 배열의 맨 앞에 '호우'라는 요소를 추가할 수 있다
- 배열명.length;
: 배열 요소의 갯수
- 배열명.join('/');
: 배열 요소를 /로 다 연결해서 보여준다.
- 배열명.reverse();
: 배열 요소의 순서를 역순으로 바꾼 뒤 그 순서대로 보여준다.
var 배열명 = [우리, 너, 나];
이렇게 바뀐다는 것이다.
- 배열명.sort();
: 배열 요소를 가,나,다 순으로 보여준다.
- 배열명.sort(function(a,b){return b-a;});
: 배열 요소를 가,나,다 역순으로 보여준다.
(배열 하나를 더 추가해서
var 배열명2 = [우, 왕, 굿];이 있다고 하자)
- 배열명.concat(배열명2);
: 배열과 배열2의 요소가 합쳐져 모두 나온다.
배열2자리엔 배열 대신 요소가 와도 된다.
예시의 결과값으로는 너, 나, 우리, 우, 왕, 굿이 나온다.
- 배열명.slice(1,2);
: 괄호 안의 숫자 자리를 참조하여 배열명 일부만 결과값으로 가져온다.
그렇다고 원본 배열이 바뀌는 것은 아니다.
예시의 (1,2)라는 숫자의 의미는
1번자리 요소부터 2번자리 앞까지의 요소가 나오는 것이다.
결과값으론 너가 나온다.
- 배열명.splice(1,2);
: 괄호 안의 숫자 자리를 참조하여 배열명 일부를 원본 배열에서 잘라온다.
즉, 잘라 가지고 간만큼 원본 배열의 요소가 사라진다.
또한 slice랑 다르게 1번 자리 요소부터 2번자리까지의 요소가 잘라진다.
따라서 var 배열명=[나];
배열명.splice(1,2)로 불러온 결과값은 너, 우리가 되는 것이다.
splice는 괄호 안을 여러 가지 방법으로 쓸 수 있는 것 같다.
쓸 때마다 내가 어떤 기능을 원하는지 보면서 하는 것이 좋다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 큰 따옴표를 쓸 것인가 작은 따옴표를 쓸 것인가? (0) | 2020.06.03 |
|---|---|
| [JavaScript] Function (함수) (0) | 2020.06.03 |
| [JavaScript] 데이터 타입 (1) - 기본타입 (0) | 2020.06.03 |
| [JavaScript] Variable (변수) (0) | 2020.06.03 |
| [JavaScript] Nomad Academy, 바닐라 JS로 크롬 앱 만들기 - Variable (let, const, var), Array, Object / 20.06.02 (0) | 2020.06.02 |