2024.01.23 35일차 수업: Java Script 기초(2)

함수 function

특정한 일을 수행할 수 있도록 코드 묶음
특정 작업을 재사용해야하는 경우 함수로 코드를 묶어두고 필요할 때 그 함수를 호출해서 사용함.

함수 선언식

1. function 함수를 선언하는 키워드와 함수명(함수명은 변수명을 작명하는 법과 같다) 추후 함수를 실행할 때 이 함수명을 사용하여 호출하게 된다.
2. 매개변수 parameter 함수를 호출할 때 함수로 전달해야할 값이 있을 때 매개변수를 이용하여 값을 전달하고 사용한다. (필수 요소는 아님. 전달 값이 있을 때만 만들어준다.) 매개변수의 정보는 함수 내부에서 접근 가능한 arguments 객체에 저장된다.
3. 실행해야하는 코드를 작성한다.
4. return: 함수를 호출한 곳에 결과값을 전달해야할 경우 return 키워드를 이용해 값을 전달한다. return을 만나는 순간 함수는 종료된다.(리턴값이 있으면 리턴값을 전달하고 종료, 없다면 바로 종료됨)

function sum (a,b) { 
	let value = a+b ;
	return value;
}

let result = sum(20 , 40)
console.log(result)

함수 표현식

변수에 함수를 할당하여 사용하는 방식

let add = function (a, b) {
  return a + b;
};
console.log(add(1, 2));

화살표 함수

함수표현식을 function 키워드를 삭제하고 좀 더 보기 좋게 사용할 수 있다.

const goodbye = () => {
    console.log('goodbye')
}
goodbye()

즉시 실행 함수

호출 없이 즉시 실행할 수 있도록 한다.

(function num(){
    console.log(100)
})();

콜백 함수

매개변수를 통해 다른 함수의 내부로 전달되는 함수

console.log(cal(plus, 10))
여기서 "plus"가 콜백함수, "cal"이 고차함수

const plus = (num) => {
    return num + 2 ;
}
const cal = (func , numValue) =>{
    return func(numValue)
}
console.log(cal(plus , 10) )

고차 함수

매개변수를 통해 콜백 함수를 전달받는 함수
콜백 함수는 고차 함수에 의해 호출되며, 이 때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.

console.log(cal(plus, 10))
여기서 "plus"가 콜백함수, "cal"이 고차함수

const plus = (num) => {
    return num + 2 ;
}
const cal = (func , numValue) =>{
    return func(numValue)
}
console.log(cal(plus , 10) )

객체 Object

객체(Object)는 복합데이터이다.
object는 key-value 쌍으로 데이터를 저장한다. key값을 이용해서 데이터를 변경하거나 가져올 수 있다.

let c={
        name:'han',
        age:30,
        address:'busan',
        tel:'12345678',
      }
console.log(person.age);
person.address="busan" ;

기본 내장 객체

내장객체는 (Built-in-Object) 는 브라우저의 자바스크립트 엔진에 내장된 객체이다.

나머지는 다음 시간에!! → 내장 객체 - String 객체, 내장 객체 - Number 객체, 내장 객체 - Math 객체

내장 객체 - Object 객체

모든 자바스크립트 객체의 root 객체

Object 생성 방법

//빈 오브젝트 생성
 var person = new Object(); 
 var person = Object();

내장 객체 - Array 객체

Array 메소드	설명
toString()	배열의 열의 모든 요소를 쉼표(,)를 이용해 모두 결합해서 하나의 문자로 반환한다.
join()	배열의 열의 모든 요소를 매개변수에 지정한 문자를 이용해 하나의 문자열로 반환한다.
pop()	배열의 맨 마지막 데이터를 제거하고 제거된 데이터를 반환한다. 대상 배열은 마지막 요소가 제거되므로 배열의 길이가 1 줄어든다.
push()	배열에 새로운 요소를 가장 마지막에 추가한다. 원본 배열은 추가한 요소의 수만큼 길이가 늘어난다.
shift()	배열의 맨 첫 데이터를 제거하고 제거된 데이터를 반환한다. 원본 배열은 첫 요소가 제거되므로 배열의 길이가 1 줄어든다.
unshift()	배열의 맨 앞에 요소를 추가하고 원본 배열은 추가한 요소의 수만큼 길이가 늘어난다.
splice()	새로운 요소를 특정 위치에 추가한다. 또는 기존 요소를 제거 하고 추가 할 수 있다. 첫번째 매개변수 : 새로운 요소를 추가할 인덱스 번호 두번째 매개변수 : 첫번째 매개변수에서 해당하는 인덱스 요소를 추가하기 전 삭제할 요소의 수
concat()	배열의 뒤에 매개변수로 전달받은 배열을 합쳐서 만든 하나의 배열로 결합한다
slice()	첫번째 매개변수를 시작 인덱스로 하고 두번째 매개변수를 종료 인덱스로 해서 종료인덱스 바로 앞까지의 모든 배열 요소를 잘라내서 반환한다. 매개변수가 하나라면 시작 인덱스부터 마지막 배열요소까지 전부 잘라낸다.
sort()	해당 배열의 배열 요소들을 알파벳 순서에 따라 오름차순 정렬한다.
reverse()	배열 요소의 순서를 반대로 바꾼다.
filter()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 true인 요소들만을 새로운 배열에 담아 반환한다. (특정조건에 만족하는 데이터만 추출하기 위해)
map()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 실행 결과를 새로운 배열에 담아 반환한다. (배열의 데이타가 Object일때 배열에 담긴 Object를 새로운 형태의 Object로 반환해서 배열로 반환)
forEach()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한다.
reduce()	해당 배열에 담긴 테이터를 하나씩 순회하며 콜백 함수의 실행 값을 누적하여 결과값으로 반환한다. 누적결과는 숫자, 문자 ,객체 모두 가능(주로 배열에 담긴 합계를 구할때 가장 많이 사용)
find()	주어진 함수의 조건을 만족하는 첫번째 요소의 값을 반환한다. 조건에 맞는 요소가 없으면 undefined 반환한다. 호출되는 배열을 변경하지 않는다.
findIndex()	주어진 함수의 조건을 만족하는 첫번째 요소의 인덱스 값을 반환한다. 조건에 맞는 요소가 없으면 -1 반환한다. 호출되는 배열을 변경하지 않는다.

예제

  let color=['red','green','blue']
  color.unshift('yellow') 
	// unshift(): 배열의 맨앞에 추가 
  console.log(color) // ['yellow', 'red', 'green', 'blue']
  color.push('navy');  
	// push(): 배열의 맨뒤 추가 
  console.log(color) // ['yellow','red','green','blue','navy']
  color.pop(); 
	// pop(): 배열의 맨뒤 요소 제거
  console.log(color) // ['yellow','red','green','blue']
  color.shift()  
	// shift(): 배열의 맨앞 요소 제거 
  console.log(color) // ['red','green','blue']
  color.splice(1,0,'skyblue','black')
	// splice(시작인덱스, 삭제할 갯수, 추가될 값)
  console.log(color) // ['red', 'skyblue', 'black', 'green', 'blue']
  let famName = ['철수','영희','순희','길동','영자','동수'] 
  famName.splice(2,1) 
	// splice(2,1): 2번 인덱스부터 1개 자르고 나머지 값 반환 
  console.log(famName)// ['철수','영희','길동','영자','동수'] 
  let newFamName = famName.slice(2,4) ; 
	// slice(2,4): print의 개념. 2번 인덱스부터 4번 인덱스까지의 값 반환
  console.log(famName)  // slice()는 값만 반환함. 값을 삭제하지 않음.
  console.log(newFamName) // ['길동', '영자']

  let arr1 = [1,2,3]
  let arr2 = [4,5,6,7,8,9,10] //concat() 배열끼리 합치기 
  let arrPlus = arr1.concat(arr2)
  console.log(arrPlus)

  let arrReverse = arrPlus.reverse();
  console.log(arrReverse) // 순서 거꾸로 반환

forEach()

JavaScript의 forEach 메서드는 배열을 순회하는 방법 중 하나이며, 실행하는 작업 특징을 고려하여 어떤 메서드를 사용할지 결정해야한다.
forEach()는 return값을 갖지 않는다.

forEach() 기본형

순회할대상배열.forEach((매개변수1,매개변수2,매개변수3)=>{
       처리문 
 }) 
//처리할 현재 요소
//처리할 현재 요소의 인덱스 번호
//forEach 메서드를 호출한 배열

예제

const fruits = ['사과','배','귤','바나나','딸기']
//for 문 사용
 for(let i=0 ; i<fruits.length ; i++){
    console.log(fruits[i])
 }

 //forEach문 사용 
 fruits.forEach((value)=>console.log(value))

예제2

var array = ['a','b','c']
array.forEach((data,index,arr)=>{
       console.log(`데이타: ${data}`)
       console.log(`인덱스: ${index}`)
       console.log(`arr: ${arr}`)
}) 

//결과 
// a 0  ['a','b','c']
// b 1  ['a','b','c']
// c 2  ['a','b','c']

filter()

filter는 대상 배열을 순회하면서 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용한다.

예제

const nums = [1, 2, 3, 4, 5];
const result1 = nums.filter(ele=>ele > 3)
console.log(nums) // [1, 2, 3, 4, 5]
console.log(result1) // [4, 5]

const people = [
  {
    name: "kim",
    point: 50,
    age: 20,
  },
  {
    name: "lee",
    point: 92,
    age: 22,
  },
  {
    name: "park",
    point: 76,
    age: 21,
  },
  {
    name: "han",
    point: 81,
    age: 32,
  },
]

const pass = people.filter((item)=>{return item.age > 30})
console.log(pass) // [{name: "han", point: 81, age: 32}]

map()

배열에 있는 모든 요소들의 값을 변경해서 만든 새로운 배열을 반환 할때 사용한다.

map() 기본형

arr.map(function(element, index, array){  }, this);
// element 처리할 현재 요소
// index 처리할 현재 요소 인덱스 번호
// array map함수를 호출한 대상 배열

예제 #1

let arr = [1,2,3,4,5];

let arrCng= arr.map(function(element){
    return element *2;
});

console.log(arrCng); // [2,4,6,8,10]

예제 #2

const userList = [
  {
    firstName: "민상",
    lastName: "유",
    gender:"male",
  },
  {
    firstName: "나래",
    lastName: "박",
    gender:"female",
  },
  {
    firstName: "숙",
    lastName: "김",
    gender:"female",
  },
  {
    firstName: "석진",
    lastName: "지",
    gender:"male",
  },
];

const userListUpdate = userList.map((ele)=>{
  return{
    fullName: ele.lastName + ele.firstName
  }
})
const userListUpdate2 = userList.map((ele)=>{
  return ele.lastName + ele.firstName
})

console.log(userListUpdate) // [{fullName: "유민상"}, {fullName: "박나래"}, {fullName: "김숙"}, {fullName: "지석진"}]
console.log(userListUpdate2) // ["유민상", "박나래", "김숙", "지석진"]