JS : 5 - 2

동기 와 비동기 프로그래밍

동기와 비동기는 주로 어플리케이션에서 자주 다워지는 개념이며, 다음 작업이 요청되는 시간과 관련있다!

동기(Synchronous)

• 현재 작업의 응답이 끝남과 동시에 다음 작업이 요청
• 함수를 호출하는 곳에서 호출되는 함수가 결과를 반환할 때까지 기다림
• 작업 완료 여부를 계속해서 확인

비동기(Asynchronous)

• 현재 작업의 응답이 끝나지 않은 상태에서 다음 작업을 요청
• 함수를 호출하는 곳에서 결과를 기다리지 않고, 다른 함수에서 결과를 기다림
• 작업 완료 여부를 확인하지 않음

콜백 함수

함수도 하나의 자료형 이므로 매개변수로 전달할 수 있다. 매개변수로 전달하는 함수를 콜백함수
기본 형태

function 함수(매개변수){
	문장
    매개변수()
}

function 함수=매개변수(){
	문장
}

함수(매개변수)

ex)

function total(x){
	for(let i =0; i<3; i++){
    	x(i)
    }
}

function x(i){
	console.log(`${i}번째 함수 호출`)
}

0번째 함수 호출
1번째 함수 호출
2번째 함수 호출

변형

function total(x){
	for(let i =0; i<3;i++){
    	x(i)
    }
}

total(function x(i){
	console.log(`${i}번째 함수 호출`)
})

0번째 함수 호출
1번째 함수 호출
2번째 함수 호출

forEach() 메소드

배열이 갖고 있는 함수(메소드)로써 단순하게 배열 내부의 요소를 사용해 콜백 함수로 호출
기본형태

.forEach(function (value,index,array) { })

ex)

const total = [273,52,103,32,57]

total.forEach(function (value,index){
	console.log(`${index}번째 요소 : ${value}`)
}

map() 메소드

콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수
기본형태

.map(function(value,index,array){ })

ex)

const total = [273,52,183,32,57]

total = total.map(function(value,index,array){
	return value * value
})

total.forEach(console.log)

filter() 메소드