1
function 함수이름(매개변수A, 매개변수B) {
2
  return 매개변수A + 매개변수B // 결과값 반환
3
}
4

5
함수이름(1, 2) // 함수 호출, 인자를 넘겨준다.

1
// 함수의 이름 add는 함수 오브젝트가 담겨있는 메모리 주소를 가지고 있음
2
function add(a, b) {
3
  return a + b
4
}
5

6
// 또 다른 변수에 함수 이름을 할당하면, sum이라는 변수는 동일하게  add가 가리키고 있는 주소를 가리킴
7
const sum = add
8

9
console.log(sum(1, 2)) // 3
10
console.log(add(1, 2)) // 3

1
function sum(a, b) {
2
  console.log('function')
3
  return a + b
4
}
5
const result = sum(1, 2)
6
console.log(result) // 3
7

8
// 사용예제 2
9
function fullName(firstName, lastName) {
10
  return `${firstName} ${lastName} ✋`
11
}
12
let lastName = '김'
13
let firstName = '지수'
14
console.log(fullName(firstName, lastName)) // 지수 김 ✋
15

16
let lastName2 = '박'
17
let firstName2 = '철수'
18
console.log(fullName(firstName2, lastName2)) // 철수 박 ✋

1
// return문을 명시하지 않으면 자동으로 undefined이 반환됨!
2
function add(a, b) {
3
  //return a + b;
4
  return undefined // return문을 명시하지 않으면 자동 생성됨
5
}
6
const result = add(1, 2)
7
console.log(result) // undefined
8

9
// return을 함수 중간에 하게 되면 함수가 종료됨
10
// 사용예: 조건이 맞지 않는 경우 함수 도입부분에서 함수를 일찍 종료함!
11
function print(num) {
12
  if (num < 0) {
13
    return
14
  }
15
  console.log(num)
16
}
17
print(12) // 12
18
print(-12) // undefined

1
// 매개변수의 기본값은 무조건 undefined
2
// 매개변수의 정보는 함수 내부에서 접근이 가능한 arguments 객체에 저장됨
3
// 매개변수 기본값(Default Parameters) : a = 1, b = 1 / 외부에 값이 들어오면 외부값 사용
4
function add(a = 1, b = 1) {
5
  console.log(a) // 1
6
  console.log(b) // 2
7

8
  // arguments 변수는 잘 사용하지는 않음
9
  console.log(arguments) // 전달된 매개변수들을 '키:값'형태로 출력하는 변수
10
  console.log(arguments[1]) // 1번쨰 매개변수 출력
11
  return a + b
12
}
13
add()
14

15
// Rest 매개변수(Rest Parameters) : 얼마나 많은 수의 매개변수가 전달될지 모를 떄 사용
16
function sum(a, b, ...numbers) {
17
  console.log(a) // 1
18
  console.log(b) // 2
19
  console.log(numbers) // 그 외 나머지 숫자, [3, 4, 5, 6, 7, 8]
20
}
21
sum(1, 2, 3, 4, 5, 6, 7, 8)

1
// (1) 함수 선언문 function name() { }
2
// (2) 함수 표현식 const name = function () { }
3
// 이는 함수가 객체이기 때문에 가능한 것임!
4
let add = function (a, b) {
5
  return a + b
6
}
7
console.log(add(1, 2)) // 3
8

9
// (3) 화살표 함수 const name = () => { }
10
add = (a, b) => a + b // 값만 리턴하면 중괄호{} 생략 가능
11
console.log(add(1, 2))
12

13
// (4) 생성자 함수 const object = new Function(); // 뒷장 객체편에서 다룸
14

15
// (5) IIFE (Immediately-Invoked Function Expressions, 즉각적으로 호출되는 함수 표현식)
16
// 함수를 정의하면서 호출하고 싶을 떄 사용
17
// 많이 사용하지는 않음
18
;(function run() {
19
  console.log('😍')
20
})()

1
// 콜백함수(callback) : 나중에(back) 호출되는(call) 함수
2
const add = (a, b) => a + b
3
const multiply = (a, b) => a * b
4

5
// 전달된 action은 콜백함수이다.
6
// 전달될 당시에 함수를 바로 호출해서 반환된 값을 전달하는 것이 아니라
7
// 함수를 가리키고 있는 함수의 레퍼런스(참조값)가 전달된다.
8
// 그래서 함수는 고차함수안에서 필요한 순간에 호출이 나중에 됨
9
function calculator(a, b, action) {
10
  // action은 콜백함수
11
  if (a < 0 || b < 0) {
12
    // a 또는 b가 0보다 작다면 undefined 반환
13
    return
14
  }
15
  let result = action(a, b) // add함수가 오면 add, multiply함수가 오면 multiply
16
  console.log(result)
17
  return result
18
}
19

20
calculator(1, 1, add) // 3, add함수를 콜백함수로 보냄
21
calculator(1, 2, multiply) // 2, multiply함수를 콜백함수로 보냄

1
arr.forEach((item, index, thisArr) => {})
2
/*
3
 * item : 배열 요소 값
4
 * index : 배열 인덱스
5
 * thisArr : 참조한 배열
6
 * 리턴값 없음
7
 */

1
const numberArr = [1, 2, 3, 4, 5]
2
let total = 0
3

4
numberArr.forEach(item => {
5
  total += item
6
})
7

8
console.log(total) // 15

1
arr.map((currentValue, index, array) => {}, thisArg)
2
/*
3
 * currentValue : 현재 배열 요소 값
4
 * index : 배열 인덱스
5
 * array : 참조한 배열
6
 * thisArr : 콜백함수에서 this로 사용할 값
7
 * 리턴값 : 반환 타입은 찾은 요소의 타입 / 없다면 undefined
8
 */

1
const numberArr = [1, 2, 3, 4, 5]
2

3
const numberMapArr = numberArr.map(item => {
4
  return item % 2 === 0 ? 'even' : 'odd' // 연산한 결과값을 넣어 배열 반환
5
})
6

7
console.log(numberMapArr) // ['odd', 'even', 'odd', 'even', 'odd']

1
// map 메서드는 콜백 함수를 호출하면서 3개(요소값, 인덱스, this)의 인수를 전달한다.
2
;[1, 2, 3].map((item, index, arr) => {
3
  console.log(`요소값: ${item}, 인덱스: ${index}, this: ${JSON.stringify(arr)}`)
4
  return item
5
})
6
// 요소값: 1, 인덱스: 0, this: [1,2,3]
7
// 요소값: 2, 인덱스: 1, this: [1,2,3]
8
// 요소값: 3, 인덱스: 2, this: [1,2,3]

1
arr.find((element, index, array) => {}, thisArg)
2
/*
3
 * element : 현재 배열 요소 값
4
 * index : 배열 인덱스
5
 * array : 참조한 배열
6
 * thisArr : 콜백함수에서 this로 사용할 값
7
 * 리턴값 : 반환 타입은 찾은 요소의 타입 / 없다면 undefined
8
 */

1
const numberArr = [1, 3, 3, 5, 7]
2
const objectArr = [
3
  { name: 'Harry', age: 20 },
4
  { name: 'Kim', age: 30 },
5
  { name: 'Steve', age: 40 },
6
]
7

8
// 해당조건에 부합하면 item값 반환
9
console.log(objectArr.find(item => item.age === 20))
10
// { name: 'Harry', age: 20 }
11

12
// find는 하나만 찾음. 뒤에서 배울 filter은 여러개를 배열로
13
console.log(numberArr.find(item => item === 3)) // 3
14
console.log(numberArr.filter(item => item === 3)) // [3, 3]

1
arr.findIndex((element, index, array) => {}, thisArg)
2
/*
3
 * element : 현재 배열 요소 값
4
 * index : 배열 인덱스
5
 * array : 참조한 배열
6
 * thisArr : 콜백함수에서 this로 사용할 값
7
 * 리턴값 : 요소가 테스트를 통과하면 배열의 인덱스 / 그렇지 않다면 -1
8
 */

1
const objectArr = [
2
  { name: 'Harry', age: 20 },
3
  { name: 'Kim', age: 30 },
4
  { name: 'Steve', age: 40 },
5
]
6

7
// 해당조건에 부합하면 item의 인덱스를 반환
8
console.log(objectArr.findIndex(item => item.age === 20)) // 0
9
console.log(objectArr.findIndex(item => item.name === 'Kim')) // 1

1
arr.filter((element, index, array) => {}, thisArg)
2
/*
3
 * element : 현재 배열 요소 값
4
 * index : 배열 인덱스
5
 * array : 참조한 배열
6
 * thisArr : 콜백함수에서 this로 사용할 값
7
 * 리턴값 : 테스트를 통과한 요소로 이루어진 새로운 배열
8
 * - 어떤 요소도 테스트를 통과하지 못했다면 빈 배열 반환
9
 */

1
const numberArr = [1, 2, 3, 4, 5]
2

3
const numberFilterArr = numberArr.filter(item => {
4
  return item % 2 === 0 // 해당조건에 부합으면 item을 넣어 배열 반환
5
})
6

7
console.log(numberFilterArr) // [2, 4]

1
arr.reduce((accumulator, currentValue, index, array) => {}, initialValue)
2
/*
3
 * accumulator : 누산기, 순회하면서 계속 더해져서 합쳐지는 값
4
 * currentValue : 현재 값
5
 * index : 배열 인덱스
6
 * array : 참조한 배열
7
 * initialValue : 콜백 최초 호출에서 acc 누산기에 제공하는 값
8
 * - 초기값을 제공하지 않으면 배열의 첫 번쟤 요소를 사용
9
 * - 빈 배열에서 초기값없이 호출하면 에러
10
 * 리턴값 : 누적 계산의 결과값
11
 */

1
const numberArr = [1, 2, 3, 4, 5]
2

3
const sum = numberArr.reduce((previousValue, currentValue, currentIndex, thisArray) => {
4
  console.log(
5
    'Current Index: ' + currentIndex + ' / Previous Value: ' + previousValue + ' / Current Value: ' + currentValue,
6
  )
7

8
  // 연산한 결과값을 누산기previousValue에 넣어 최종값을 얻는다.
9
  return previousValue + currentValue
10
}, 0)
11

12
console.log('Sum: ' + sum)
13
// Current Index: 0 / Previous Value: 0 / Current Value: 1
14
// Current Index: 1 / Previous Value: 1 / Current Value: 2
15
// Current Index: 2 / Previous Value: 3 / Current Value: 3
16
// Current Index: 3 / Previous Value: 6 / Current Value: 4
17
// Current Index: 4 / Previous Value: 10 / Current Value: 5
18
// Sum: 15

1
arr.sort(function (a, b) {}, thisArg)
2
/*
3
 * compareFunction : 정렬 순서를 정의하는 함수
4
 * (이 값이 생략되면, 배열의 element들을 문자열로 취급되어, 유니코드 값 순서대로 정렬)
5
 * (이 값을 사용하면, 반환 값에 따라 정렬된다.)
6
 * 리턴 값: sorting된 값
7
 */

1
let arr = ['red', 'blue', 'green', 'white', 'black']
2
console.log(arr.sort()) // [ 'black', 'blue', 'green', 'red', 'white' ]

1
const arr = [1, 2, 3, 10, 50, 70, 8, 4]
2
arr.sort() // [ 1, 10, 2, 3, 4, 50, 70, 8 ]
3

4
arr.sort(function (a, b) {
5
  console.log(a, b)
6
})
7
/*
8
10 1
9
2 10
10
3 2
11
4 3
12
50 4
13
70 50
14
8 70
15
*/
16

17
const arr2 = [1, 2, 3, 10, 50, 70, 8, 4]
18
arr2.sort(function (a, b) {
19
  if (a > b) return 1
20
  if (a === b) return 0
21
  if (a < b) return -1
22
}) // [ 1, 2, 3, 4, 8, 10, 50, 70 ]

1
const arr = [2, 1, 3, 10]
2

3
arr.sort(function (a, b) {
4
  console.log(a, b)
5
  return 1 // 1(양수)은 그대로 출력, -1(음수)은 역순으로 출력
6
})
7

8
// a는 2번쨰꺼, b는 비교하고 있는 대상
9
arr.sort(function (a, b) {
10
  console.log(a, b)
11
})
12
/*
13
1 2  = -1 | 1
14
3 1  = 2  | 2
15
10 3 = 7  | -7
16
*/
17

18
// sort() : 음수면 자리가 바뀌고, 양수면 그대로
19
// 숫자가 작으면 앞으로, 크면 뒤로
20
arr.sort(function (a, b) {
21
  return a - b
22
}) // [1, 2, 3, 10] 오름차순
23

24
arr.sort(function (a, b) {
25
  return b - a
26
}) // [10, 3, 2, 1] 내립차순

1
const arr = ['banana', 'b', 'boy']
2

3
arr.sort() // ['b', 'banana', 'boy']
4

5
arr.sort(function (a, b) {
6
  if (a < b) return 1
7
  if (a > b) return -1
8
  if (a === b) return 0
9
}) // ['boy', 'banana', 'b'] 내림차순

1
const arr = ['banana', 'b', 'Boy']
2

3
arr.sort() // ['Boy','b','banana']
4
// sort() 함수로 문자열을 정렬하면, 대문자가 소문자보다 앞에 오도록 정렬이 됩니다.
5
// 유니코드가 대문자가 소문자보다 앞서기 때문입니다.
6

7
arr.sort(function (a, b) {
8
  const upperCaseA = a.toUpperCase()
9
  const upperCaseB = b.toUpperCase()
10

11
  if (upperCaseA > upperCaseB) return 1
12
  if (upperCaseA < upperCaseB) return -1
13
  if (upperCaseA === upperCaseB) return 0
14
}) // ['b', 'banana', 'Boy'] 오름차순
15

16
arr.sort(function (a, b) {
17
  const upperCaseA = a.toUpperCase()
18
  const upperCaseB = b.toUpperCase()
19

20
  if (upperCaseA < upperCaseB) return 1
21
  if (upperCaseA > upperCaseB) return -1
22
  if (upperCaseA === upperCaseB) return 0
23
}) // ['Boy', 'banana', 'b'] 내림차순

1
const arr = [
2
  { name: 'banana', price: 3000 },
3
  { name: 'apple', price: 1000 },
4
  { name: 'orange', price: 500 },
5
]
6

7
arr.sort(function (a, b) {
8
  return a.price - b.price // price 숫자값을 기준으로 정렬
9
})
10
/*
11
{"name":"orange","price":500}
12
{"name":"apple","price":1000}
13
{"name":"banana","price":3000}
14
*/

1
arr.some((currentValue, index, array) => {}, thisArg)
2
/*
3
 * currentValue : 배열 요소 값
4
 * index : 배열 인덱스
5
 * array : 참조한 배열
6
 * thisArr : 콜백함수에서 this로 사용할 값
7
 * 리턴값 : callback이 어떤 배열 요소라도 대해 참인 값을 반환하는 경우 true, 그 외엔 false
8
 */

1
const array = [1, 3, 5]
2

3
// 짝수인지 체크
4
const result = array.some(currentValue => {
5
  return currentValue % 2 === 0
6
})
7

8
console.log(result) // 리턴 값 : false
9
// 그 이유는 array의 3개의 요소 모두 2로 나눌때 나머지가 0이 아니기 때문이다.
10
// 하나라도 부합한 조건에 맞으면 true, 모두 부합하지 않으면 false
11

12
// -----------------------------------------------
13
const array2 = [1, 2, 3, 5]
14

15
const result2 = array2.some(currentValue => {
16
  return currentValue % 2 === 0
17
})
18
console.log(result2) // 리턴 값 : true
19
// 그 이유는 array의 4개의 요소 모두 2로 나눌때 나머지가 0인 요소가 하나라도 있기 때문이다.
20
// 하나라도 부합한 조건에 맞으면 true, 모두 부합하지 않으면 false

1
arr.every((currentValue, index, array) => {}, thisArg)
2
/*
3
 * currentValue : 배열 요소 값
4
 * index : 배열 인덱스
5
 * array : 참조한 배열
6
 * thisArr : 콜백함수에서 this로 사용할 값
7
 * 리턴값 : callback이 어떤 배열 요소라도 대해 참인 값을 반환하는 경우 true, 그 외엔 false
8
 */

1
const array = [1, 30, 39, 29, 13]
2

3
const result = array.every(currentValue => {
4
  return currentValue < 40
5
})
6

7
console.log(result) // 리턴 값 : true
8
// 그 이유는 array의 모든 요소가 40보다 작기 때문이다.
9
// 하나라도 부합한 조건에 맞지 안으면 false, 모두 부합하면 true
10

11
// -----------------------------------------------
12
const array2 = [1, 30, 39, 29, 100, 13]
13

14
const result2 = array2.every(currentValue => {
15
  return currentValue < 40
16
})
17
console.log(result2) // 리턴 값 : false
18
// 그 이유는 array의 1개의 요소 100이 40보다 크기 때문이다.
19
// 하나라도 부합한 조건에 맞지 안으면 false, 모두 부합하면 true

1
const children = [[1], [2], [3], [4]]
2

3
console.log(children.map(x => x * 2).flat()) // [ 2, 4, 6, 8 ]
4
// 위 float과 map 문장을 floatMap을 이용해 만들 수 있다.
5
console.log(children.flatMap(x => [x * 2])) // [ 2, 4, 6, 8 ]

1
// 1. 문자열을 배열로 만드는 예시
2
console.log(Array.from('Hello'))
3
// [ 'H', 'e', 'l', 'l', 'o' ]
4

5
// 2. 유사 배열 객체를 배열로 만드는 예시
6
console.log(Array.from({ 0: '찬민', 1: '희진', 2: '태인', length: 3 }))
7
// [ '찬민', '희진', '태인' ]
8

9
// 3. 함수의 매개변수들을 순서대로 배열로 만드는 예시
10
const funcA = (...arguments) => {
11
  return Array.from(arguments)
12
}
13
console.log(funcA(1, 2, 3, 4, 5))
14
// [ 1, 2, 3, 4, 5 ]

1
// 맵핑 함수의 첫 번째 인자 언더스코어(_) 는 특별한 인자가 아니라,
2
// 불필요한 인자의 공간을 채우기 위한 용도입니다.
3
const arr = Array.from(Array(31), (_, index) => index + 1)
4

5
console.log(arr)

1
const arr = []
2

3
for (let i = 1; i <= 31; i++) {
4
  arr.push(i)
5
}
6

7
console.log(arr)