배열 기초
- index, element 에 대해 정확히 이해하기
- 배열 요소(element)의 조회, 추가, 삭제, 복사, 분리 하는 법을 이해하기
arr[0], push, pop, unshift, shift, slice, length
대괄호[] 를 이용해서 배열을 만들어 줌.배열은 순서가 있는 값. 값=요소(element) 순서 = index
- 배열에 있는 값에 접근할 때는 인덱스를 이용해 접근
let myNumber = [ 73, 98, 86, 61, 96];
'myNubmer 라는 배열의
-> 3번째 인덱스에 접근 하려면 : myNumber[3] = 86;
-> 3번째 인덱스의 값을 변경 하려면 : myNumber[3] = 200; -> [ 73, 98, 86, 200, 96];
-> index를 벗어나면 undefined
-> 배열안에 배열은 []중첩으로 가능 : myNumber[1][2]
-> 배열의 길이 : myNumber.length;
-> 배열 끝에 값을 추가하려면 : myNumber.push(96);
-> 마지막 배열은 삭제 하려면 : myNumber.pop();
배열의 반복
- for 문과 배열을 이용해 반복적으로 코드를 실행
- 기본적인 for 문 for (let i = 0; i < 5; i++) 을 응용하여 다양한 for 문을 만들 수 있어야 함
- 반복문에 조건문을 응용하여 특정 조건에서만 코드를 실행시킬 수 있어야 함
- 이중 포문이 무엇인지 이해하고 활용할 수 있어야 함
- 문자열과 배열의 형태 변환을 돕는 메소드를 알아야 함
- 띄어쓰기 (" ") 로 문자열을 구분하여, 배열로 바꿀 수 있어야 함.
-> str.split(" ") : string 을 배열로 바꿔주는 method
-> array.join(" ") : array 를 string 으로 바꿔주는 method - 위의 배열을 다시 문자열로 바꿀 수 있다.
배열인지 확인하기
- Array.isArray() : trye or false 로 결과
-> 이렇게 하는 이유가, typeof 로 확인하면 typeof 는 객체(object)와 배열(array)을 구분하지 못하고 모두 객체로 출력한다.
배열 요소 추가 및 삭제
- console.table(array 이름) 으로 실행하면 아예 table 로 결과를 보여 줌
- 아래 두가지는 배열 끝에서 추가/삭제하는 방법
-> array.push() : 추가
-> array.pop() : 삭제 - 이건 배열 앞에서 추가/삭제
-> array.shift() : 앞에꺼 삭제
-> array.unshift() : 제일 앞에 추가
**
배열을 더하고 빼는 작업은
arr.concat : 배열 + 배열할 때 사용
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];
num1.concat(num2, num3);
// 결과: [1, 2, 3, 4, 5, 6, 7, 8, 9]arr.slice 쓰면 됨 : 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환함. 원본 배열은 바뀌지 않는다.
이유는 저 두개를 사용해야 배열로 리턴이 됨.
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"] end point 를 따로 넣지 않는 경우, 괄호 안의 숫자는 시작점으로 인식하고 배열의 끝까지 출력함
console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]
console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]push, pop
unshift, shift는 그냥 넣는 작업. 배열 생성과는 무관
**
배열 요소 포함 여부 확인
- array.indexOf(찾고자 하는거) -> 인덱스(자리 번호)를 알려줌. 이걸 통해 요소 포함 여부를 확인할 수 있다. 대소문자 구분해야 함.
- array.includes(찾으려는 값, 어느 인덱스부터) 로 찾을수도 있다. ex) array.includes('word')
- 둘 중에서는 인덱스오브를 더 추천. 왜냐하면 includes 는 internet explore 를 호환되지 않는다.
그 외
- str.split 할 때 str.split(요 괄호안에 들어가는 게 나누는 기준임) : string 을 배열로 바꿔주는 method
str.split(' '); // 띄어쓰기를 기준으로 나눔
str.split(,); //콤마를 기준으로 나눔객체
배열 및 객체 구조와 사용법을 이해해야 함.
-
객체는 주소록 같은거를 다룰때 좋다.
-
객체는 키와 값의 쌍으로 이루어져 있다. (key-value pair)
ex) let user = {last name(key) : 'Lee'(value) } -> 중괄호로 전체를 감싸고, 짝끼리는 : 로 묶이고, 짝과 짝은 중간에 콤마로 구분 -
delete 를 써서 삭제 가능 : delete tweet.createdAt;
-
추가도 가능 : dot/bracket notation 2가지 형식 모두 가능
tweet['category'] = '잡담'; -
객체의 값을 사용(출력)하는 방법은 두가지
방법.1 : Dot notation -> 객체의 속성을 가져오는 방법
-> user.first name; // 'Steve'
user.city; // 'Seoul'
방법.2 : Bracket notation
키값이 변할 때(변수로 넣어야 할때) 이 방법을 쓰면 좋다.
-> user['first name']; // 'Steve'
user['city']; // Seoul
Key 를 ''로 감싸서 넣어야 함 -> 이거 주의할 것!! 따옴표''를 넣지 않으면 키값이 아닌, 변수로 인식함.
하지만, 늘 ''로 넣어야 하는 것은, 아니고 []안에 변수를 넣어야 하는 경우도 생긴다. 그때 bracket notation 을 쓰면 된다.
-
in 을 통해 해당 키가 있는지 확인도 가능
ex) 'content' in tweet; //true -
for ... in 문 예시
for (let i in obj) { ...- typeof 로 속성을 확인하면 숫자도 따옴표 끼고 보여 준다
console.log(typeof 42);
// expected output: "number"