공부했던 내용 한 번에 정리
배열 (Array)
// 배열 : array
// ⭐️배열도 객체의 한 종류이다.⭐️ key:value
// array에는 length 속성이 있다. (길이)⭐️
// ⭐️ 배열의 length 속성은 배열의 최대 인덱스 + 1을 의미할 뿐이다. ⭐️
// 배열을 많이 쓰는 이유는?
// ==> ⭐️⭐️반복문에 최적화되어있기 때문이다. 배열이 유일하게 가지고 있는 'length' 속성 때문임.⭐️⭐️
// 다른 언어에서 배열은 요소가 모두 동일한 데이터타입을 가져야 한다. 하지만 자바스크립트에서는 배열에 모든 데이터타입이 들어간다.
let arr = [];
let arr1 = ['apple', 'banana'];
console.log(arr1[0]); // 접근⭐️
arr1[0] = 'test'; // 제어⭐️
console.log(arr1[0]);
// method는 호출의 주체가 명확하다. obj.open()
// 함수는 호출의 주체가 없다. open()
// 객체에는 '속성'과 '메서드'가 항상 존재한다.
// push, pop (stack)
// push, pop으로 구현하는 것은 stack이다.
let testArr = [];
testArr.push(3);
console.log(testArr);
testArr.push('sam');
console.log(testArr);
testArr.push([1, 3, 5, 7, 9]);
console.log(testArr);
testArr.pop(); // .pop() 메소드는 배열의 가장 마지막에 들어온 요소를 뺀다.⭐️
// 해당 코드에선 9를 뺀다
console.log(testArr);
testArr.pop(); // .pop() 메소드는 배열의 가장 마지막에 들어온 요소를 뺀다.⭐️
// 해당 코드에선 7을 뺀다. 앞에서 9를 빼고, 7이 제일 마지막 요소이기 때문.
console.log(testArr);
// Queue 구현 ==> using [shift, unshift]⭐️
// .shift() 메소드는 맨 앞에 있는 인덱스를 빼버리고, 기존 요소들의 인덱스를 하나씩 앞으로 땡겨버린다.
let people = ['다영', '성민', '민규', '규민', '채영' ];
console.log(people);
console.log('ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ');
console.log(people.shift()); // 빠진 다영의 값을 반환한다.
people.shift();
console.log(people);
people.unshift('다영2') // 배열의 맨 앞 인덱스에 값을 채워준다. 기존의 인덱스들은 한 칸씩 뒤로 밀려난다.
console.log(people);
// ⭐️ pop, push vs shift, unshift ⭐️
// pop과 push가 더 효율성이 좋음. 기존 인덱스의 자리를 건드리지 않기 때문에 안전하다. 웬만한 상황 아니고서야 shift, unshift는 사용하지 말 것
let numArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// 일반적인 for문
for(let i = 0; i < numArr.length; i++) {
if (numArr[i] % 2 === 0 ) {
// console.log(numArr[i]);
}
}
// ⭐️객체만의 for문 => 2개⭐️
// 1. for ~ in⭐️
for(key in numArr) { // index가 나온다.
console.log(numArr[key]);
}
// 2. for ~ of⭐️⭐️⭐️
for(value of numArr) { // 실제 배열 값 자체가 나옴. 배열에선 for ~ of 쓰는게 훨씬 좋다.
console.log(value);
}
연습문제
// 1. 함수를 만듦
// 2. 배열을 입력으로 받게끔, () 사이에 매개변수를 입력해준다.
// 3. 함수 내부에 새로운 배열(빈 배열)을 만들어요.
// 4. 함수 내부에 for문을 이용해서 요소 하나씩 돌아가게 한다. (for ~ of)
// 5. 그 요소가 2의 배수이면 skip하고, 2의 배수가 아니면 새로운 배열에 넣어줘요.
// 6. 만들어진 새로운 배열을 return 해요.
// 7. 함수 바깥에서 그 함수를 '호출'해서 그 값을 로그로 남긴다.
function test (arr) {
let result = [];
for(item of arr) {
if(item % 2 !== 0) {
result.push(item);
}
}
return result;
}
const testInput = [2, 3, 1, 5, 6, 7, 8, 9, 10, 122,123]
console.log(test(testInput));
- 자바스크립트를 활용하여 HTML에 li 요소 적용시키기
<!DOCTYPE html>
HTML5
<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>Javascript
console.log('로딩 완료');
// ⭐️.append()는 DOM에서 제공하는 API다.⭐️
// li태그를 3개 만들엇거 ul 태그 밑으로 넣어줄 것이당.
// 1. li태그 3개 만들기
// 1-1. li태그에 이름 넣ㄱ디
// 2. li태그를 ul태그에 넣기
let people = ['김민정', '정동하', '혜리', '지민', '한석봉', '오바마', '이경영']
let liTag; // undefinded 상태. 변수명 선언만 해줌.
for(let i = 0; i < people.length; i++) {
liTag = document.createElement('li');
// console.log(people[i]);
liTag.textContent = people[i];
document.querySelector('ul').append(liTag);
}
for(person of people) { // 실제 배열 값 자체가 나옴. 배열에선 for ~ of 쓰는게 훨씬 좋다.
liTag = document.createElement('li');
liTag.textContent = person; // li태그에 person값들을 text로 넣어줌
document.querySelector('ul').append(liTag); // ul태그에 접근함
}
// 1.
let liTag1 = document.createElement('li');
liTag1.textContent = '김도훈';
document.querySelector('ul').appendChild(liTag1);
let liTag2 = document.createElement('li');
liTag2.textContent = '박휘인';
document.querySelector('ul').appendChild(liTag2);
let liTag3 = document.createElement('li');
liTag3.textContent = '한지은';
document.querySelector('ul').appendChild(liTag3);
⭐️⭐️
// for ~ in => key 반환
// for ~ of => value 반환
⭐️⭐️
console.log('text');
// ⭐️함수는 input과 output이 분명하게 존재한다.⭐️
// 이번주 느낀점 : 배열 공부가 제일 기억에 남는다. 근데 요즘 왜이렇게 의욕이 사그라드는지 모르겠는데, 몸 상태도 별로여서 그런가 싶다. 하루종일 우울하기도 하고, 자꾸만 처지는데 스스로 이런 기분을 잘 견뎌서 22년 마지막 12월을 잘 보냈음 좋겠다.
우울해지는 이유는.. 아마 실력이 잘 안 늘어서 그런가 .. ㅋㅋ ㅠ 8할은 맞는 듯 하다.
열정 열정 열정.
- 우울함 ㄱ7ㅓ져
- 배움에는 끝이 없다.
마지막 팩트...억 ㅎㅎ
분명 늘고 계신건데 기대치가 높아서 그러실거에요
제일 지칠 시기입니다만 초심을 잊지말고 화이팅입니다!