$$config title: [개인]더 찾아보고 공부할 것들 keywords: - Note $$ # Function? ![링크](https://i.imgur.com/H6bpcrd.png) [참고 블로그1](https://velog.io/@surim014/%EC%9B%B9%EC%9D%84-%EC%9B%80%EC%A7%81%EC%9D%B4%EB%8A%94-%EA%B7%BC%EC%9C%A1-JavaScript%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-part-6-Function) [참고 블로그2](https://learnjs.vlpt.us/basics/05-function.html) # Return? [참고 블로그](https://velog.io/@surim014/%EC%9B%B9%EC%9D%84-%EC%9B%80%EC%A7%81%EC%9D%B4%EB%8A%94-%EA%B7%BC%EC%9C%A1-JavaScript%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-part-6-Function) - return 명령문은 함수 실행을 종료하고, 주어진 값을 호출 지점으로 반환한다. ## Return의 기능 - 함수 종료 ```js function doSomething () { console.log('start!'); var a = 3; var b = 2; if (a > b) { console.log('a is bigger than b!'); return; } console.log('I am the last console.log!'); //실행되지 않음 } doSomething(); // 결과 : start!, a is bigger than b! ``` if 구문 내부가 실행되면서 return 명령문이 실행됐기 때문에 return 명령문은 해당 함수를 종료시키게 된다. 현재 return 명령문이 속해있는 함수는 doSomething이기 때문에 doSomething함수의 모든 코드 실행이 종료됨으로 세번째 콘솔 메시지는 나타나지 않는다. ## Return의 기능 - 값 반환 ```js var a = 1; consol.log(a); // 결과 : 1 ``` a라는 변수에 1이라는 값을 담아서 콘솔에 나타나도록 로그하였다. 위 코드는 아래와 같이 표현할 수 있다. ```js function getA () { return 1; } var a = getA(); console.log(a); // 결과 : 1 ``` 위 예제에서 우리는 getA라는 함수를 선언했다. 그리고 변수 a를 선언하고 getA()라는 값을 대입해주었다. 그렇다면 getA()라는 표현의 값은 무엇일까? getA()라는 함수 실행문을 살펴보자면 getA가 함수여야 한다. 실제로 우리 예제 코드에서는 getA라는 함수가 존재한다. 함수 실행문이 있는 자리는 해당 함수의 return값으로 대체된다. return이라는 단어 뒤에 어떤 값을 작성해주게 된다면 해당 값이 함수에서 반환된다. 따라서 현재 getA라는 함수의 return값은 1이다. ```js function doSomething () { var a = 3; var b = 2; if (a > b) { return; } return 3; } var a = doSomething(); console.log(a); // 결과 : undefined ``` return이라는 단어 뒤에 어떤 값도 지정해주지 않은 경우, 기본적으로 undefined가 반환되게 된다. 이와 마찬가지로 return되는 값을 지정해주지 않고 종료되는 함수 또한 기본적으로 undefined가 반환되게 된다. # null / undefined - null : 값이 없음(empty)을 의미 - undefined : 값이 설정되지 않음을 의미 # JS map 함수 : [참고 블로그](https://velog.io/@daybreak/Javascript-map%ED%95%A8%EC%88%98) - 배열을 가지고 원본 배열에는 상관하지 않으면서 가공된 새 결과값을 가져옴. ## map 함수 예제 1 ```js const days = ["Mon", "Tue", "Wed", "Thus", "Fri"]; const smilmingDays = days.map(day => `? ${day}`); console.log(smilmingDays); ``` >Result ```js ``` [코드펜 링크](https://codepen.io/ahcoo/pen/oNqEpOp?editors=0012) ## map 함수 예제 2 ```js var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]; var newNumbers = numbers.map(number => number * 2); console.log(newNumbers); ``` >Result ```js [2, 4, 6, 8, 10, 12, 14, 16, 18] ``` ## map 함수 예제 3 ```js var students = [ {id:1, name:"james"}, {id:2, name:"tim"}, {id:3, name:"john"}, {id:4, name:"brian"} ]; var names = students.map(student =>student.name); console.log(names); ``` >Result ```js ['james', 'tim', 'john', 'brian'] ``` ### student.name → student.id로 바꾸면? ```js var students = [ {id:1, name:"james"}, {id:2, name:"tim"}, {id:3, name:"john"}, {id:4, name:"brian"} ]; var names = students.map(student =>student.id); console.log(names); ``` >Result ```js [ 1, 2, 3, 4 ] ``` ## map 함수 예제 4 ```js var testJson = [{name : "이건", salary : 50000000}, {name : "홍길동", salary : 1000000}, {name : "임신구", salary : 3000000}, {name : "이승룡", salary : 2000000}]; var newJson = testJson.map(function(element, index){ console.log(element); var returnObj = {} returnObj[element.name] = element.salary; return returnObj; }); console.log("newObj"); console.log(newJson); ``` >Result ```js 1. console.log(element); { name: '이건', salary: 50000000 } { name: '홍길동', salary: 1000000 } { name: '임신구', salary: 3000000 } { name: '이승룡', salary: 2000000 } 2. console.log(newJson); [{ '이건': 50000000 },{ '홍길동': 1000000 },{ '임신구': 3000000 },{ '이승룡': 2000000 }] ``` ## map 함수 예제 5 : Reverse ```js var numbers = [1,2,3,4,5,6]; var numbersReverse = numbers.map(number => number *2).reverse(); console.log(numbersReverse); ``` >Result ```js [ 12, 10, 8, 6, 4, 2 ] ``` ## map 함수 예제 6 : Array 안의 Array ```js var numbers = [[1,2,3],[4,5,6],[7,8,9]]; //array안에 array가 있는 경우 var newNumbers = numbers.map(array => array.map(number => number *2)); console.log(newNumbers); ``` >Result ```js [ [ 2, 4, 6 ], [ 8, 10, 12 ], [ 14, 16, 18 ] ] ``` # 더 찾아보기
## Props : [관련링크](https://react.vlpt.us/basic/05-props.html) - react : 불변성을 지켜줘야 한다? → - int, float double같은 원시값들은 상관이없음 - [참고](https://ko.javascript.info/object-copy)
![링크](https://i.imgur.com/8lVpWpR.png) ## [useState()](https://react.vlpt.us/basic/07-useState.html) ### prevNumber는 선언하지 않았는데 어떻게 쓸 수 있는 것인가? - 개발자가 정의한 것. ```js const [state,setState] = useState(); ``` - 일 때, `setState`란 함수에 파라미터로 함수를 넘겨주면 이전 값을 넣어주는 것이 됨. 파라미터명은 뭘 쓰던 상관 없음. - onClick - isChecked - alertMsg - 삼항연산자 - Document.querySelectorAll() - forEach - addEventListener - 프로그래머스 js부분 복습 - while문 (백준 A+B -4) - js로 counter 작성 - react - time-converter - placeholder - onChange - - !!! '배열 비구조화 할당' 검색해보기. !!! - !!! 동기 방식, 비동기 방식 검색해보기. !!! - async - await [유튜브 : CPU에 대한 이해](https://www.youtube.com/watch?v=Fg00LN30Ezg)