javascript 공부 정리 [Sessac 바닐라 Javascript + Vue.js 과정]

https://sesac.seoul.kr/course/active/detail.do

 

제가 요즘 듣고 있는 강의는 '바닐라 Javascript + Vue.js 과정'이에요.

react도 관심이 있는데 sessac에서는 react강좌가 없어서 그 다음으로 관심이 있는 vue를 선택했어요.

 

아래 링크에서 무료로 이 강의를 들을 수 있습니다!

https://sesac.seoul.kr/course/active/detail.do

꿈꾸는 개발자 데뷔코스, 새싹

---

 

js 간단한 건 알아서 여기서부터 정리했습니다.

 

[ forEach ]

arrayName.forEach(function(parameter){

})

 

parameter(인자)는 각각의 요소다.

const coronaCases = [
    {city : 'Seoul', case : 1000},  
    {city : 'Daejeon', case : 500},  
    {city : 'Dargu', case : 300},
    {city : 'Busan', case : 100},
    {city : 'Gwangju', case : 50}
]

- 여기서 { }가 요소이다. 

 

 

arrayName.forEach(function(parameter,index){

})

 

- index는 배열의 index 가져온다.

const coronaCases = [
    {city : 'Seoul', case : 1000},  << index 0
    {city : 'Daejeon', case : 500},  << index 1
    {city : 'Dargu', case : 300},
    {city : 'Busan', case : 100},
    {city : 'Gwangju', case : 50}
]

- 위에서 부터 index는 0로 시작한다.

map
- 어떠한 배열을 가공하여 새로운 형태의 배열을 만들때 

filter
- 배열에서 특정한 값을 가진 데이터를 필터링할 때 (조건을 다는 것)

reduce
-배열의 값을 이용하여 특정 값을 도출하거나 재가공할 때
- acc : 지금까지 쌓여있는 값
- cur : 현재 반복문을 수행할 때 현재 값

arrayName.reduce((acc,cur,index)=>{
    return ~~~
})

 

- return된 값이 acc에 넣어짐

 

const totalCases = coronaCases.reduce((acc,cur)=>{
    return acc + cur.case;
},0) 

console.log(totalCases);

- 0 : 배열의 요소가 object{} 일 경우에 property의 숫자를 가져오려면 값을 초기화 시켜줘야 함 0으로 시작


OOP 객체 지향 프로그래밍
- 틀을 만들어 놓고 값만 넣으면 됨
js : 멀티패러다임 => 함수형/OOP

prototype에 메소드 추가

Song.prototype.getInfo = function(){
    return `이 노래는 ${this.singer}의 노래이고 제목은 ${this.title}입니다.`;
}

 

js 공부 파이팅~!!