[4기] 11일차 Java Script 배우기3(객체,배열,This,객체 지향,DOM)

오늘의 학습 Java Script 배우기3...
 
오늘은 객체, 배열, this, 객체지향, dom 까지 
 
다양한 것들을 공부하였는데...
 
솔직히..................ㅜ

 
이해안가는 부분이 대부분이다..........
 
 
비전공자다 보니 아직 익숙하지 않은 용어들도 있어서 
 
더 와닿지 않는거 같다는 생각이 들었다... 
 
 
오늘은 조금 수업을 들으면서 
 
살짝의 현타와 머엉------- 이게무슨말인교 .......하는 생각이 들었다..
 

 

 
 
당연히 전 처음 듣는 내용이고 다른 학생들은 
전공자도 있고 이미 공부를 시작한지 꽤 되신 분들도 있다보니 
 
비교가 되는 거 같아 조금 현타가 온거같다....
 
그래두,.,,, 강사님께서 ,,,비교 하지 말고 자신만 생각하랬으니,,,,,,,
 
 
ㄱ,,,괜찮아,,,, 더 열심히 하자,,,,,,,,
무한 반복으로 읽고 공부하다보면 되,,,되겠죠?ㅎ,,ㅎ,ㅎ,ㅎ,ㅎ,ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
 
이해한 부분만 작성하고 
이번 주말에 다시 공부할려고 계획을 짜보았다.
 
일단, 배열!
 
배열은 한마디로 여러개의 데이터를 하나의 변수에 저장하는 것인데 
 

const myArray = [1, 2, 3, 4, 5];

 
이렇게 myArray 라는 변수에 [] 안에 있는 값을 저장한다.
 
배열의 가장 큰 특징은 
 
숫자를 이용하여 값에 접근할 수 있는데 여기서 필요한 것이 인덱스(index)!
 
인덱스는 [] 안의 값들을 순서대로 0,1,2,3,4 라고 표기한다.
 
1,2,3,4,5 지만 인덱스로는 0부터! 
 
0,1,2,3,4 ㅎㅎㅎㅎ
 

const arr2 = [
    [1, 2],
    [3, 4],
    [5, 6]
];
console.log(arr[0][0]);
console.log(arr[2][1]);

 
그럼, 이런 문제는 arr[0][0] 이니 1번째에 1번째 1이 될것이고,
arr[2][1] 이니 3번째 2번째 6이 될것이다. 
 
 
실행해보면! 짜잔 
 
 

 

const arr = [
    [
        [1, 2],
        [3, 4]
    ],
    [
        [5, 6],
        [7, 8]
    ]
];
console.log(arr[0][1][0]);
console.log(arr[1][0][1]);

이렇게 배열안에 배열이 들어간것을 3차원 배열이라고 하는데,
 
큰배열을 0,1 로 보고 안에 있는 작은 배열들을 각각 0,1 안에 원소들도 각각 0,1로 생각하면?
 
arr[0][1][0] 이면 1번째가 0이니 첫번째 큰배열 
2번째가 1이니 작은배열은 [1, 2], [3, 4] 중에서  [3, 4]  해당하고,
3번째는 0이므로 3,4 는 각각 0,1 이니 0인 3이 나온다! 
 
이렇게 실행해보면?
 

 
3,6 이 나오게된다!
 
배열의 메소드
 
push() 와 pop()
 
push의 경우 배열의 끝에 요소를 추가하며,
pop의 경우 마지막 요소를 꺼내어 반환한다! 꺼내서 배열에서 제외!
 

 
실행하면?
 

 

push를 통해 4를 넣었으니 [1,2,3,4] 과 되었고, 
여기서 pop을 이용하였더니 마지막 요소를 꺼내버려서 [1,2,3] 이 되었다.
 
shift()와 unshift()
 
shift()은 첫번째 요소를 꺼내고 반환하고,  unshift()은 첫번째 요소에 새로운 것을 추가한다.
 
그럼, 예시로 

const myArray = ["사과", "바나나", "수박"];
myArray.shift();
console.log(myArray);
myArray.unshift("오이", "배");
console.log(myArray);

 
이걸 실행하면?
 
myArray 에 사과 바나나 수박 저장
shift를 사용하면 사과가 꺼내진다. 
그럼, 바나나 수박만 남을 것이고, 
 
unshift로 다시 오이 배를 넣으면?
 
오이 배 바나나 수박 이 될것이다! 
 
실행하면?
 

 
 

이렇게 나온다! ㅎㅎ
 
splice() 
 
splice()메소드는 배열의 요소를 추가, 제거 또는 교체한다.
 
splice(1, 0, 4) 1번째는 시작할 인덱스 2번째는 삭제 개수 3번째는 추가 요소이다.
 
예시로 보게 되면,
 

const arr = [1, 2, 3];
arr.splice(1, 0, 4);
console.log(arr);
arr.splice(2, 1, 5);
console.log(arr); 

 
 
일단, 처음 splice(1, 0, 4)의 경우,
 
1번째니 2 시작점이고, 두번째 0은 삭제할 게 없고 3번째 시작점 앞에 4를 추가한다는 내용이므로,
실행하게 되면 1,4,2,3  이 될것이다!
 

 

이렇게 실행 결과를 보게된다 ㅎㅎ
 
slice()
 
-배열에서 요소들을 추출하여 새로운 배열로 반환하는 메서드!
 
이게 뭔말인교? 보면!
 

const myArray = ["apple", "banana", "cherry", "durian", "elderberry"];
console.log(myArray.slice(1, 4));
console.log(myArray.slice());
console.log(myArray.slice(0, 10));

 
slice(1, 4) 1은 시작점을 의미하고 4는 이전요소 위치를 의미한다. 
즉, 1번째이니 banana 를 시작으로 elderberry이전까지를 선택하여 새로운 배열로 반환한다!
 

 
빠밤!
 
당연히 아무것도 입력하지 않으면 그대로 나오겠죱? ㅎㅎㅎ
 
sort()
 
sort는 정렬!!! 요소를 정렬하는데 사용한다.
 

const avengers = ['아이언맨', '스파이더맨', '헐크', '토르'];
console.log(avengers.sort());

 
이렇게 sort를 주고 실행하면?
 

 
요소들이 정렬되는모습! ㅎㅎㅎㅎ 깔끔해깔끔
 
하지만! 숫자의 경우,
const nums2 = [23, 5, 1000, 42];
이렇게 한자리가 아닌 경우 순서가 이상하게 나오는 결과값을 보이는데 
 
이것은 유니코드 포인트 순서대로 변환하기 때문이다.
 
이것을 해결하고자 비교함수를 사용한다.
 

const num3 = [13, 9, 10];

num3.sort(function (a, b) {
    console.log('a: ' + a, 'b: ' + b);
    return a - b;

 
두 인자 a,b를 빼서 음수가 나오면 앞으로 0보다 큰 양수가 나오면 앞으로 위치하게 하는 것이다.
a:9 b:13일떄 -가 되기때문에 a가 앞으로 오고 이런식으로 반복하며 
정렬된다! 
 
forEach()
 
forEach() 메소드는 배열의 각 요소에 대해 주어진 함수를 실행합니다.
 

const arr = ['참외', '키위', '감귤'];
arr.forEach(function(item, index) {
    console.log(item, index);
    arr[index] = index;
});

 
실행될 때 arr[index] = index; arr[]배열의 인덱스를 인덱스에 저장하고
실행하게되면 아이템 즉 원소의 이름 '참외' 와 인덱스 0 이 같이 실행된다.
 
실행해보면?
 

 
이렇게 실행되는 모습이다!
 

const avengers = ['spiderman', 'ironman', 'hulk', 'thor'];

const newAvengers = [];
avengers.forEach(function (item) {
    newAvengers.push('💖' + item + '💖');
});

 
이렇게 forEach를 이용하여 새로운 배열을 만들어 값을 추가 변경할 수 있다. 
 
새로운 newAvengers 변수에 양쪽에 하트를 추가해준다면?
 

이렇게 다른 배열을 만들수 있다.
 
map()
 
배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과를 새로운 배열로 반환합니다.
 

const arr = [1, 2, 3];
const newArr = arr.map(function(item, index) {
    return item * index;
});

console.log(newArr);

 
위와 같이 arr 에 배열 1,2,3을 저장하고
새로운 변수에 맵을 통해 첫 번째 인자로는 배열의 각 요소를 처리할 함수를, 두번째는 요소의 인덱스를 전달한다. 
 
즉 아이템에 1,2,3 인덱스에 0,1,2 를 받아 처리한다. 
 
그럼 실행하게 되면? 
 
1*0, 2*1, 3*2 즉, 0,2,6 이 나올 것이다.
 

 
여기서 forEach 와 map 은비슷하지만 차이점이 존재한다고 한다. 
 
forEach 메소드의 경우 반환값이 없지만 map 메소드는 새로운 배열을 반환한다는 차이가 있습니다.
 
라고 하는데? 이게 무슨말일까?ㅋㅋ,,,,,,,,,
 
흠.....
 

const ages = data.map((item) => item.age);

 
이렇게 맵의 경우는 item에서 age 나이를 빼서 새로운 배열을 반환한다는 뜻인거 같다? 맞나,,,이게?
 
forEach 는 반환값이 없지만 map은 새로운 배열을 만들어 반환한다는 뜻인거 같다!
 

출처 : 챗GPT

 

출처 : 챗GPT

 
 

아! 부수 효과를 일으킬 때 forEach 을 주로 사용되고 map은 새로운 배열을 생성하는데 사용! 
내가 생각한 내용이 맞는거 같다 ㅎㅎㅎㅎ
 
 
멘토님께서 모르는 문제는 쳇gtp 한테 물어보면 예제도 나오고 
잘알려주신다길래 검색해봤는데 
 
 
유익한거 같다 ㅎㅎㅎㅎㅎㅎ 좋네 이거 !!!!
 
filter()
 
filter의 경우 특정 조건을 만족하는 요소들만 추출하여 새로운 배열을 만든다.
 

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const newArr = arr.filter(function(el) {
    return el % 2 === 0;
});

console.log(newArr);

 
arr 변수에 배열들을 저장 - newArr arr의 새로운 변수에 el % 2 를하여 0과 같을 때 반환되는데 
%은 나머지값을 의미하기 때문에 
2를 나눴을 때, 0이면 2의 배수를 의미하니 2의 배수가 실행결과가 나올 것이다!
 

 
빠밤! ㅎㅎㅎ 2의 배수 이쁘게 나왔네 ㅎㅎ
 
객체 (Object)는
- 배열처럼 여러개의 데이터를 한 변수에 저장할 수 있는 자료형!
차이는 배열은 인덱스를 사용하였지만 객체는 특별한 키를 통해 원하는 값을 접근할 수 있다 
 
객체는 {} 중괄호를 사용! / key-value 쌍으로 이루어져 있음 / 콜론으로 구분 
 

const babaYaga = {
    name: "John Wick",
    age: 53,
    from: "벨라루스",
    askingHim: function(){
        console.log("Yeah, I'm thinking I'm back!");
    }
};

 
또한 프로퍼티 값이 함수라면? 메소드라고 부른다! 
 
객체 속성값에 접근하려면?

console.log(`${babaYaga.name} from ${babaYaga.from}`);
console.log(`${babaYaga['name']} from ${babaYaga['from']}`);

 
객체이름 . 값의 키 입력 / 그리고 변수명 규칙을 지키면 대괄호[] 를 사용하여 접근 가능 / delete 를 사용하여 속성 삭제
 
객체안에 잘 존재하는 지 확인하고 싶을땐!
 

console.log('age' in babaYaga);
console.log('mercy' in babaYaga);

 
in을 이용하여 존재여부를 파악할 수 있다!
 
객체의 메소드
 

hasOwnProperty()

- 객체가 특정 프로퍼티를 가지고 잇는지를 나타내는 불리언 값을 반환한다
 
네? 가지고있는지 그냥 알려주는건가요? 싶었다 ㅋㅋㅋㅋ
 

const aespa = {
    members: ['카리나', '윈터', '지젤', '닝닝'],
    from: '광야',
    sing: function(){
        return "적대적인 고난과 슬픔은 널 더 popping 진화시켜!"
    }
};

console.log(aespa.hasOwnProperty('itzy'));
console.log(aespa.hasOwnProperty('from'));

 
진짜 가지고 있는지 없는지를 알려주는 거였다 ㅋㅋㅋㅋㅋㅋㅋ
 
에스파에 itzy의 프로퍼티가 있는지 없는지 알려준다.
 

 
이렇게! 없다고 false로 알려주고 
from 의 프로퍼티는 from : '광야' 라고 존재하기 때문에 true로 보여준다. 
 

출처 : 챗GPT

 

궁금해서 검색해보니 상속 받았을 경우 hasOwnProperty() 는 false로 드는 것을 확인 할 수 있다. 
상속받은 것은 false 반환 직접소유한 것은 true 반환! 
 
( 이걸 보니 강사님께서 hasOwnProperty() 설명해주실 때 이 부분 알려주신게 기억났다 ㅋㅋㅋㅋㅋ
역시 미리 적어놓지 않으면 금방 까먹는게 사람인가보다 ㅋㅋㅋㅋ)
 
for ... in
 
- 객체의 반복을 위해 만들어진 기능! 
 

const person = {
    name: '소희',
    age: 25,
    gender: 'female'
};

for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}

 
이렇게, 작성하고 실행하면?
 

이렇게 뜬다!
 
( 악 25으로 입력했네 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ )
 
이렇게 객체안에 프로퍼티에게 접근해서 어떤 키와 값을 가지는지 살펴보거나 조건에 따라 값을 수정할 때 사용합니다! 
 
이때 순서는 보장이 안되니 순서중요한것은 일반적인 반복문 사용!
 
이렇게 배열과 객체에 대해서는 끝!!!! 
 
나머지 This 부터는 이해하고 글을 올려야겠다! 
 
이해도 안되는데 이렇게 남겨봐야 의미없다고 생각한다... 
 
객체 까진 정말 흥미롭게 들었지만 
 
This 부분 부터  머엉 -- 하면서 들어서 솔직히 모르겠다.. 
 
더 공부하고 추가적으로 일기를 써야겠다! 
 
오늘도 파이팅했고! 
 
이번 주말은 생일이라,,ㅎㅎ,,, 일요일 저녁쯤에 복습하는걸로 ㅎㅎㅎ,,,ㅎㅎ,,,
꾸준히해야하지만 생일은 
나에게 주는 휴식시간이라 생각하자 >_< 
 
그럼 이번 주말 복습도 파이팅하자!