Published
Edited
Jun 24, 2020
Insert cell
md`# 다음날 이어서 시작하는 배열
와 어제 공부하고 3시 넘어서 잤다가 10시 넘어서 일어나서 실시간 수업 지각한거..T.T
<em>실화냐구요...</em>

---
# # 09 주차 배열을 손에 익혀봅시다
`
Insert cell
//배열으로 값을 설정할 때에는 "대괄호"를 사용합니다.
Favorite = ["동물", "보람", "음악", "의미", "고기"]
Insert cell
Favorite.length // 자바에서처럼 length로 배열의 길이를 출력가능하다는 사.실.!!
Insert cell
{
for (let i in Favorite)
console.log(i) //컨트롤 + 시프트 + i 또는 F12 (= 관리자 도구 !)
} //ES6+에서 배열 요소를 모두 출력하는 방법이에요. console을 사용하여 확인해보아요.
Insert cell
study = ["밤샘", 4.0, "복습", "학습", 3.5] // 자료형이 섞인 배열이지요
Insert cell
typeof study[1] // 인덱스 번호를 넣어서 자료형(typeof)을 확인할 수 있어요
Insert cell
{ // 아래 반복문 형태에서 모든 자료형이 string으로 변신한대요:ㅁ
for (let i of study)
console.log(typeof i)
}
Insert cell
rest = ["꿀잠", "산책"]
Insert cell
balance = study.concat(rest) // concat을 사용하면 기존 배열에 요소를 추가하여 새로운 객체를 생성할수 있다요, 간편하네여
Insert cell
{
for(let i of balance)
console.log(i)
}
Insert cell
//그리고 join을 사용해서 배열 요소 간 연결형태를 지정할 수도 있습니다.
study.join(' - ') // - 기호로 연결하긔. 이해 완료!!
Insert cell
normal = ["순한맛", "보통맛", "매운맛" ,"폭탄맛"]
Insert cell
// 기존의 배열에 변화를 주는 100가지 방법(push로 추가하기)
normal.push("시험은 매운맛 예상")
Insert cell
{
for(let i of normal)
console.log(i)
} // 위의 셀 push를 통해 normal 배열에 "시험은 매운맛 예상"이 추가된 것을 확인했다
Insert cell
{
let count = [10,9,8,7,6,5,4,3,2,1]
console.log(count) // 모두 배열에 잘 들어가 있다요
count.push(-10,-9,-8,-7,-6)
console.log(count)
// count.pop(5,4,3,2,1) pop으로 지정된 요소를 뺄 수는 없더라
count.pop() // 마지막 요소를 하나씩 꺼내오더라
console.log(count)
}
Insert cell
{ // push, pop 외에도 다른것들(unshift, shift)
let score = ["A+", "B-", "c0"]
console.log(score)
score.unshift(1,2,3) // 맨 앞에 끼어들기하여 추가됩니다요
score.shift() // -> 맨앞에 추가한 한 요소만 빼내요
console.log(score)
} // 완벽하다잉
Insert cell
// 배열에 사용할 수 있는 옵션이 참 많아요, 그쵸?
{ // splice 메소드를 사용해보아요.
let today = ["rain", "June", 24, "Wed"]
console.log(today)
let steal = today.splice(1,2) // 숫자는 인덱스 번호를 의미합니다! 2번째 다음부터 2개를 꺼내여
console.log(steal)
console.log(today) // 기존 배열에 영향이 갑니다 !
/* splice로 빼온 자리에 추가도 가능합디다 */
let pen = ["monami", "dongA", "Hitech"]
console.log(pen)
pen.splice(0,2,"samsung","LG") // 0번째 인덱스 다음 2개를 빼고 samsung, LG를 추가합니다
console.log(pen) // 실행 잘 됩니다. :D
}
// 사용할 때 헷갈릴수도 있으니까 유의해야겠슙니다.
Insert cell
// splice와 같은 역할을 하지만, 보여주기만 하고 변화는 주지않는 slice가 있지요
{
let programming = ["web", "intetnet", "mobile", "OS"]
console.log(programming)
let element = programming.slice(2,3) // slice는 개수가 아니가 모두 인덱스 번호이다 : 2번 인덱스부터 3번 인덱스 직전까지를 보여줍니다. -> mobile
console.log(element)
console.log(programming) // 처음 선언된 배열을 유지합니다.(제거되지 않았오요)
}
Insert cell
html`<hr>
<h1>너무 다닥다닥 붙어있으니까<br>한 줄 쉬어가기</h1><hr> + 다음은 배열 정렬
`
Insert cell
{ // 배열 요소를 특정한 기준으로 정렬 해볼 것입니다. 기본으로 sort를 사용합디다.
let arr = [1,10,7,212,-13]
arr.sort()
console.log(arr)
} // 그냥 sort를 이용하면 오름차순(작은->큰)으로 정렬해주네요
Insert cell
{// 위 동작을 함수로 실행하지 않고 직접 코딩하는 방식
let ary = [100, 50, 500, -10, 37] // 무작위 숫자의 배열이지요
ary.sort ( (a, b) => (a===b)? 0: (a<b)? -1 : 1 ) //a,b를 비교(===사용)하여 같으면 유지
// b가 크면 a를 앞 인덱스로 옮기고 b를 뒤 인덱스로 이동시켜요
console.log(ary) // 정렬이 잘 실행되었네요 exelent!(엑설런트 이거 맞나?..)
} // 내림차순 정렬은 원리를 알면 잘 만들 수 있을 거니까 넘어갈거에요.
Insert cell
{ // every 메소드가 있는데, 이건 특정한 함수를 받아서 그걸 모든 요소가 만족하는지 체크해요
let apple = [2,10,4,8,100]
let even = x => x % 2 === 0 // even은 함수를 받아요. x를 받아서 짝수인지 확인하네요
return apple.every(even) // even을 배열의 every로 넘기면 모든 요소가 이를 만족하는지
//알려줍니댜. 반복문이 필요없는 좋은 함수네요.
}
Insert cell
// 아무리 생각해도 너무 많은 것 같슈니다.
{ // filter에 대해 알아보아요
let filt = [1, 5, 10, 28, -40] // filter도 함수를 받을 거에요. 근데 얘는 배열을 만들어
let even = x => x % 2 === 0 // 이전과 같은 짝수 체크 함수입니다.
return filt.filter(even) // 함수를 배열의 filter에 보내서 해당하는 요소만 골라내요
} //일명 편식하는 함수네요. :d
Insert cell
// forEach 메소드는 전에 사용한 적이 있죠. 교수님께서 이건 좀 낯설다고 for로 설명하셨었어요
{ // 핵심만 추리자면, 모든 요소를 인자로 넘겨주어요.
let lol = ["Teemo", "아리", "키아나", "이블린", "블라디미르"]
lol.forEach( x=> console.log(x) ) // 매개변수로 x를 받아 콘솔창으로 보내요 -> 확인!
} // return으로 출력을 시도해보았으나 실행 불가
Insert cell
{ // 이거 특별 문제에서 사용됐었어요..! 못 풀었습죠.. 허허
let numlist = [1,2,3,7,8,9]
return numlist.map( x=> x**2) // map은 결과적으로 배열을 만들어주는데, 요든 요소를 변화
//시켜 새롭게 만들어주어서 일일히 다른 배열을 직접 구성하지 않아도 된다는 편리성을 지니죠
}
Insert cell
// 이제 고지가 눈 앞입니다. 배열 탈출..!!
{ // reverse 메소드를 구현해봅시다.
let star = ["Protos", "Terran", "Zerg"] // 말그대로 배열을 반대로 해주죠
star.reverse()
return star
} // 자꾸 중괄호 닫는걸 잊어버림..
Insert cell
/* 과제로 출제됐던 문제를 다시 풀어봅시다 -> 다시 풀어보면 잘 안 풀리더랍니다 */
{
let persons = [ {name:"홍길동", age:45}, {name:"김연아", age:30}, {name:"이순신", age:54} ]
return persons.sort( (x, y) => x.name===y.name? 0 : x.name<y.name? -1 : 1 )
} // 결국 이전에 제출했던 과제 답 보고 풀음.. 어떻게 푼거지 나
Insert cell
md`<hr>
<h2>reduce 메소드가 꽤나 상세히 설명되어 있다.<br>
중요한 것 같으므로 잘 이해하고 넘어가자<h2>
<hr>
`
Insert cell
// reduce 메소드는 배열의 모든 요소를 합하는 메소드인데 초기값도 설정이 가능합죠
{
let increase = [1,5,7,9, 8000, 486, 1999]
return increase.reduce( (x, y) => x + y )
} // 교수님 강의 자료에서는 return 없어도 출력되는데 저는 안 되네요. 머징.
Insert cell
// 초기값을 지정할 수 있는데, 반점(,)을 사용합니다.
{
let decrease = [10000, 1927, 624, 1010, 2]
return decrease.reduce( (x,y) => x+y, 10000)
} // 잘 실행되었슴다
Insert cell
// 조금 위에서 설명한 이어붙이기 메소드 join 역할도 reduce로 구현할 수 있대요
{
let stick = ary => ( ary.length===0)? "" : ary.reduce( (x,y) => x+"-"+y)
return stick([1,5,8,9,1,2,3]) // 매개변수로는 배열을 넘겨줘야겠죠
} // + 를 이용하여 모든 요소를 더하여 갖다 붙입니다. 기호도 추가할 수 있죠!
Insert cell
// 여기서부터는 강의 자료만 보면 완전 어려워 보이는 파트입니다. 그래서 이해하면 쉬워요.
op = (x, y) => "("+x+"⚝"+y+")" // 별모양은 강의자료에서 가져옴..!
Insert cell
flip = (op) => (x, y) => op(y, x) // 맞다 이부분이 가장 난해하더라구요
// flip은 op를 받는데, 여기서 op의 매개변수 x,y를 반환하고, 이게 op에 반대로 들어가는거요
Insert cell
// array를 응용하여 reduce를 익혀봅시다.
test = ["one" ,"two" ,"three", "four"]
Insert cell
test.reduce(op, "시작")
Insert cell
test.reduce(flip(op), "시작") //=> flip은 x, y의 순서를 바꾸고 오른쪽부터 실행합니다.
Insert cell
test.reduceRight(op, "시작") // reduceRight는 순서를 뒤집고 reduce하나 것과 같습니다.
/* 아니 근데 엄청 헷갈리는 것 이더랍니다 */ // 나중에 다시 한 번 읽고 넘어가든가 할게영
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more