배열
배열도 객체의 한 종류이다.
key -> 인덱스 값
value -> 인덱스 번째의 값
객체에는 속성과 메소드가 항상 존재한다. youknow?
array 에는 length 속성이 있다 !!
let testArr = [];
testArr[200] = 3;
console.log(testArr.length);이랬을때 length는 몇이 나올까?
1?
200?
정답은.. 201이다.. (헉)
왜냐면 인덱스는 0 부터 시작하기 때문.
그리고 length에는 비밀이 있다...
사실 length 는 마지막 인덱스 +1 을 반환하게 되어있다. (충격적)
심지어 배열 안에는 여러가지 무언가들이 다 들어간다.
let testArr = [
3,
"sam",
function () {
return "sam";
},
[2, 3, 4],
];
console.log(testArr);이런식으로 숫자, 문자, 함수, 배열안의 배열까지.. 다 들어간다.. (이게 들어가네)
배열에 값을 추가하는 것은 push, 빼는것은 pop 을 쓰면 된다.
let testArr = [];
testArr.push(3);
console.log(testArr);
testArr.push('sam');
console.log(testArr);
testArr.pop();
console.log(testArr);이런식으로 코드를 썼을 때, 콘솔로 찍히는 것은
[3]
[3, 'sam']
[3]
나온다.
pop에 아무 값도 넣지 않았는데? (헉)
pop은 맨 마지막에 넣은 것이 빠져나왔다
이는 배열 -> 스택 이라는 것!!!! (충격)
이것이 STACK (배열은 Queue가 아니라는 것!)
근데 우린 Queue 도 구현해보고 싶다!
사용되는 것 -> 무려 [shift, unshift]
let people = ["하나", "둘", "셋"];
console.log(people);
people.shift();
console.log(people);
console.log(people.shift())- 출력값
["하나","둘","셋"]
["둘", "셋"]
하나
이렇게 나온다 ㄷㄷ
근데 만약 맨 앞에 다시 "하나"를 넣고 싶다면 ??
let people = ["하나", "둘", "셋"];
console.log(people);
people.shift();
console.log(people);
console.log(people.shift())
people.unshift("하나2");- 출력값
["하나","둘","셋"]
["둘", "셋"]
하나
["하나2","둘","셋"]
이렇게 쓰면 된다..
근데 shift,unshift 는 너무나도 비 효율적이다.
맨 앞을 빼거나 추가하면 뒤에있는(기존에 있던) 모든 값을 다 건드려버리기 때문에...
그러니까 우리는 push, pop만 잘 사용하자.. (가능하다면!)
반복문
배열을 많이 쓰는 이유?
-> 반복문에 최적화 되어있기 때문!
대체 왜 반복문에 최적화 되어있지?
-> 배열이 유일(?)하게 가지고 있는 속성이 length!!
let testArr = [1,2,3,4,5];
for (item in testArr){
console.log("in : ",item)
};
for (item of testArr){
console.log("of : ",item)
};- 출력값
in : 0
in : 1
in : 2
in : 3
in : 4
of : 1
of : 2
of : 3
of : 4
of : 5
헉.. in은 사실 key(index값)이 나오고 of는 사실 value 값이 나온 것!!
사실 배열은..
testArr = {
0:1,
1:2,
2:3,
3:4,
4:5
}이런식으로 생겨먹은 녀석이였다 !!!! (이럴수가)
예제들
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h1>오늘의 강의 내용 : 배열</h1> <p>오늘은 배열에 대해 자세히 배웁니다. 배열마스터 하하~</p> <ul></ul> <script src="./sample.js"></script> </body> </html>
JS
let liTag1 = document.createElement("li"); liTag1.textContent = "test1"; document.querySelector("ul").appendChild(liTag1); // let liTag2 = document.createElement("li"); liTag2.textContent = "test2"; document.querySelector("ul").appendChild(liTag2); // let liTag3 = document.createElement("li"); liTag3.textContent = "test3"; document.querySelector("ul").appendChild(liTag3); // // ------------ 배열버전 ------------ // let testArr = ["testA", "testB", "testC"]; let liTag; // 현재는 undefined // for (i = 0; i < testArr.length; i++) { liTag = document.createElement("li"); console.log(testArr[i]); // 찍어보기 liTag.textContent = testArr[i]; document.querySelector("ul").append(liTag); } // // -------------- for of 버전 ------------------ // let testArr2 = ["testX", "testY", "testZ"]; let liTag_2; // for (text of testArr2) { liTag_2 = document.createElement("li"); liTag_2.textContent = text; document.querySelector("ul").appendChild(liTag_2); }
모든 시스템은 input 과 output 이 있다.
in -> [] -> outfunction 도 마찬가지! // let testFunction(이 안이 input){ return 여기가 output }
console.log("test"); // testArr = [ 1, 2, 3, 5, 51, 341, 5, 43121235, 1, 34, 213, 412, 34, 125, 5234, 12312, 2132, 2122, 6654432, ]; // function answer(arr) { let result = []; for (num of arr) { if (num % 2 !== 0) { result.push(num); } } return result; } // console.log(answer(testArr));
시스템간 통신할 때
다 JSON 으로 한다 !!!
-> 보내야하는 데이터를 객체 형태로 보낸다!!! (엥? 전부??)
JSON 은 머냐??
-> 다 object다!! (이게 끝??)
다음시간에는 객체, JSON 에 대해 빠르게 알아보고 서버에서 데이터를 받아 뿌려보는 것을! 할것이다!! (와! 신기해!)
숙제..
