안녕 오랜만이야 잼민아 깡깡이형이야
이번엔 자바스크립트에서 배열과 객체를 준비했어 (이 개념을 잘 알면 넌이제 프로 카드게임을 할 수 있지!!)
배열과 객체를
왜 사용해야하는지
둘의 차이점
불변성이 어떤건지
그리고
활용능력을 끌어올려줄 문제풀이까지 함께 해보자 ~~ ㅇㅋ?
배열 Array
배열 개념
[ ] 이렇게 사용해 대괄호 스퀘어 브라켓으로 나타내
코드로 보여줄께
let array = [0,1,2,3,4,5,6,7,9]이렇게 브라켓안에 순서대로 자료를 넣어 이런걸
원시형 자료형 이라고해
그리고 순서를 인덱스(index)라고
그리고 그안에 값을 요소(element)라고 해
물론 숫자말고도 모든게 자료로 들어갈 수 있어~~ 그러니까 보이스피싱 조심해~~(뜨금?)
내가 하고 싶은 말은
순서대로 자료를 잘 정리하고 잘 만들어야해
let array = [0,1,2,3,4,5,6,7,9]그리고 배열을 첫번째 인덱스가 0번째야 ...(뭔말이야 깡깡이형~!!)
ㅋㅋㅋㅋㅋ그럴줄 알고
재미난애기 해줄께
서양애들은 아파트의 1층은 입구가 아냐
0층이 입구야 (더 이해안된다고? ㅋㅋㅋ)
한국은 건물의 시작이 1층부터 시작하잖아 하지만 서양애들은 0층부터 시작해!!
그런 비슷한 개념이야
자바스크립트는 서양애들이 만들었으니....
(사실 0부터해야 수학적으로 좀더 합리적이야!!...왜 그런지 궁금하면 메일보내 )
let array = [0,1,2,3,4,5,6,7,9]
array[0]배열은 그래서 이렇게 나타내 스퀘어브라켓 안에 인덱스를 넣어서 요소를 보여줘
let array = [0,1,2,3,4,5,6,7,9]
array[0] // 0 0번째 인덱스의 요소를 나타내줘 라고 하는거야
여기서 바로 활용 들어가볼께
let array = [0,1,2,3,4,5,6,7,9]
array.length array.length (문자열에 본거 같지?? ㅋㅋ)
배열의 갯수를 알 수 있는 메소드야 이거 정말 많이 쓴다 !!!!
그럼 저 배열의 갯수가 뭘 까?? (댓글로 달아줘) (9가 아니고 10이야)
immutable
이뮤터블은 뜻은 값이 변하지 않다는거고
mutable
뮤터블 뜻은 값이 변한다는거야
!!!형들 딱 물어볼께....
뭔 뜻일까? ㅋㅋㅋㅋㅋㅋㅋㅋ
원본 자료를 변화를 시킬거니 말꺼니!! 이런거야
ㅇㅋ? 이 개념은 정말 중요해!!!!
근데 변경이 좋을까 안좋을까??
당연히 원본자료는 그대로 보존하는게 좋은거야!!!(여기까지만 할께)
문자열은 할당하는게 안됐잖아?! 형들 알지??,,(불안한 눈빛 보내지 말고..)
str[3] = qwe
이렇게 하면 0번째 문자열 순서에 할당이 안되잖아
하지만 배열은 할당이 가능해 변경이 가능한거지
arr[3] = '이거 할당해주세요'
이게 된다는거지 ㅇㅋ?
(그리고 솔직히 배열 메소드 이런거 있어 나열하면 나도 편하고 좋은데
잼민이들 너무 재미없으니~~ 살짝 길게 할께)
딱 8개만 알려줄께.!!! 그걸로 모든걸 할 수 있어!!!
배열 메소드
메소드를 불러올땐 .(dot)쓰고 메소드 명을 입력하면됨 ~~
하다보면 뭔말인지 알꺼야 ~~ ㅋㅋ
mutable 메소드
원본배열을 변환시키는 함수부터 할께
1.push()
arr.push(이거 맨뒤에 넣어줘)
let array = [0,1,2,3,4,5,6,7,9]
array.push(10)
console.log(array)
[0,1,2,3,4,5,6,7,8,9,10]이렇게 됨
푸쉬는 ....진짜 많이 쓴다....거의 매일 쓰니까..pushup 100개 하고와
배열에 차곡차곡 자료를 넣어줄때 이 메소드를 쓰거든
반복문이랑 콜라보해서 잘 쓰니까 꼭 알아둬
2.pop()
arr.pop() <= 배열의 맨 끝 요소를 지워줘~~
let array = [0,1,2,3,4,5,6,7,9]
array.pop()
console.log(array)
[0,1,2,3,4,5,6,7,8]맨 뒤에 값을 지워주세요 ~~ ㅇㅋ? 굳이 괄호안에 값을 굳이 안넣지 ..
3.shift()
arr.shift() <= 배열의 맨 처음 요소를 지워주세요~~~
let array = [0,1,2,3,4,5,6,7,9]
array.shift()
console.log(array)
[1,2,3,4,5,6,7,8,9]맨 앞에 값을 지워주세요 ~~ ㅇㅋ? 굳이 괄호안에 값을 굳이 안넣지 ..
4.unshift()
let array = [0,1,2,3,4,5,6,7,9]
array.unshift(100)
console.log(array)
[100,0,1,2,3,4,5,6,7,8,9]맨 앞에 값에 추가해주세요~~ ㅇㅋ?
이 네가지중에 저 push를 제일 많이 쓰니까!! ㅋㅋㅋ기억하자
5.splice()
splice(새로운요소가 추가 될 위치, 제거할 개수, 새로들어갈 내용) 메소드
let arr = [1, true, "JavaScript", "자바스크립트"];
// 인덱스 1의 요소부터 2개의 요소를 제거한 후, false와 "C언어"를 그 자리에 삽입함.
let removedElement = arr.splice(1, 2, false, "C언어");
arr; // [1,false,C언어,자바스크립트]
removedElement; // [true,JavaScript]
immutable 메소드
1.slice()
잼민아...형이 계속 소리쳤지?
넥슬라이스 너무 중요하다고 ~~!! ㅋㅋㅋ
let array = [0,1,2,3,4,5,6,7,8,9]
let newArray = array.slice(2,7)
console.log(newArray)
[2,3,4,5,6]이렇게 되 잼민아
넥슬라이스는 문자열도 되지만 배열에도 쓰여
그러니까 이해됨? 문자열도 하나의 배열같은거야
다만 문자열은 중간에 할당이 되지 않아 하나하나 다시 이어 붙이기를 해야하지
그리고
slice는 deep copy로 많이 사용해
원본배열을 수정하지 않고 새로운 배열을 만들는데 굉장히 유용해
사용방법은
let array = [0,1,2,3,4,5,6,7,8,9]
let newArray = array.slice(0)
console.log(newArray)
[0,1,2,3,4,5,6,7,8,9]처음 0번째 부터 시작해서 마지막 인덱스를 입력하지 않으면 끝까지 하게 되어 있어
슬라이스는 계속 계속 나오니 문제랑 친해져 보자
2.concat();
배열끼리 합쳐주는걸해
let array1 = [0,1,2,3,4]
let array2 = [5,6,7,8,9]
let newArr = array1.concat(array2)
console.log(newArr)
[0,1,2,3,4,5,6,7,8,9]이건 간단해 배열을 합쳐주는거해 딱 코드보면 이해 빡가지?
3.join();
배열을 문자열로 바꿔주는걸해
var arr = [1, true, "JavaScript"];
arr.join(); // 1,true,JavaScript
arr.join(' + '); // 1 + true + JavaScript
arr.join(' '); // 1 true JavaScript
arr.join(''); // 1trueJavaScript
센스있는 잼민이는 알아봤을텐데
괄호 안에는 배열사이에 넣을거 넣는거야 아무것도 안넣으면 쉼표가 들어감
기억해둬 ~~
여기서 잠깐
변수 키워드를 내가 자꾸 이거 섰다 저거 했다 하니까 당황스럽지?
let
var
const
3가지가 있는데 이 차이점은 깊게 나중에 알려줄께
재선언과 할당 차이가 있음
3.split();
스플릿은 문자열을 배열로 바꿔주는거야
배열에 넣을때 어떻게 나눌까 넣어주고 한계치를 넣어서 몇개까지만 넣을수도 있음 이건 옵션이니까~~ 안넣어으면 전부 배열로 넣는겨 ~~
문자열.split(separator, limit)
이제 객체로 넘어가볼께~~~
객체 objet{}
객체의 표현법
let obj = {
name: max,
age: 20,
hobby: [축구,농구,수영,골프],
결혼: true,
취업: '준비중'
}
혹시 이해 했니? ㅋㅋㅋ
객체는 중괄호 안에 키를 넣고 키에 해당하는 값을 넣는거야
name,age,hobby이런걸 키라고 하는거야
그리고 다음 키값을 넣으려면 쉼표를 마지막에 넣으면됨
이제부터 엑기스 간다 !!!
객체값을 사용하는 방법이얌
1번 dot notation => obj.name // max //
2번 braket notation => obj['name'] // max
위 처럼 두가지 방법이 있어
분명 두가지의 차이점이 있지
형은 바로 알려준다.~!!!
브랏켓 노테이션에
obj[변수] 이렇게 활용있어 보여줄께
function obj(매개변수){
let newObj = {
name: max,
age: 20,
hobby: [축구,농구,수영,골프],
결혼: true,
취업: '준비중'
}
obj[매개변수] // 넣으면 변수에 맞는 키 값을 반환해주고 또한 추가도 가능해 객체나, 배열은 값을 추가가 가능해
이게 왜 그렇냐면 주소값으로 할당을 해주는거거든 따로 저장장치에 넣어주는거야
그래서 주소값을 변경을 시키거나 할당이 가능해
참조 자료형이랑 가능해
깊게 애기할 기회가 있을때 진짜 깊게 다뤄줄께 아주 질리도록 ㅋㅋㅋㅋ
객체 값 추가, 삭제하기
객체 키랑 값 추가는 너무 간단해
obj['새로운키'] = 할당할 값
obj.새로운키값 = 할당할 값
이렇게 추가 가능해
그리고
지울수도 있지
delete obj['name']
이렇게 delet만 넣으면됨
반복(for 키 in 객체)
배열은 순서가 있어서 반복 이해는데 조금 쉬웠지? ㅋㅋㅋ
0번째 부터 배열의 끝까지 반복돌려줘 이게 되잖아
근데
객체는.....젠장 순서가 없네.....(태어나는데 순서가 있지만 가는데 순서가 없네..)
그래도 순서는 눈에 안보이지만 있기 있어
let newObj = {
name: max,
age: 20,
hobby: [축구,농구,수영,골프],
결혼: true,
취업: '준비중'
}
let result = {}
for(let key in newObj){
result +=newObj{key};
} return result;이렇게 쓰면 newObj 이거 반복되서 반환되게 되어 있어
주의주의
객체의 반복문은 for in 만 사용해
for of 는 문자열이나 배열에만 사용해 순서가 있는것들만 ㅇㅋ?
잼민아 알려줄수 있는거 다 알려줬어 ㅋㅋ
그럼 문제 몇개 준비 했어 그거 같이 풀어보자 ~~ 렛츠기릿
