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) // ["유민상", "박나래", "김숙", "지석진"]
