1. 함수
(1) 함수란 일반적으로 반복되는 코드를 하나로 묶거나, 의미를 부여하고 역할을 나누기 위해 사용한다.
변수 선언이나 조건문과 더불어 가장 많이 사용할 문법이므로 잘 익혀두는 게 좋음
기본 구조는 function 함수이름 (인자 1, 인자 2, 인자 3) { 명령문 }이고 메인 에서 함수이름(인수 1, 인수 2, 인수3)을 출력해 명령문을 실행한다.
인자(parameter)는 매개변수라고도 불리며 함수를 호출할 때 전달 받기 위해 지정한 변수를 뜻하며, 몇 개든 콤마를 이어붙여 입력받을 수 있다.
인수(argument)는 인자에 전달하는 값 그 자체를 일컫는 말이다.
함수는 return 키워드로 값을 반환할 수 있다.
(2) JS에서 함수를 만드는 방법
JS에서 함수를 만드는 방법은 2가지, function 키워드를 사용하는 방식과 Arrow function이다.
두가지 방식은 각각 기능상 차이가 있지만, 우리가 앞으로 배울 React와 Node.js에서는 두 방식에서 큰 차이가 없다. 더 선호하는 방식으로 함수를 만들면 되지만, 최대한 두가지 방식 모두 익숙해지는 게 좋을 것이다.
(3) 함수 선언식/ 표현식 코드
기본적인 방법인 function 키워드를 사용해 함수를 정의한다.
함수를 선언하는 식으로는
function sayHello() { return "hello, world" }
그리고 함수를 표현하는 식으로
const sayHello = function() { return "hello, world" }가 있다.
(4) 화살표 함수 (Arrow function)
- 함수 표현식보다 단순 간결하게 함수를 만들 수 있는 방법
function 키워드를 사용하지 않아 함수 표현식 or 함수 선언식보다 코드가 직관적이다.
또한, 화살표 함수는 간결한 익명 함수와 암시적 반환(implicit return)을 가능하게 해주기 때문에, 앞으로 굉장히 많이 사용하게 될 것
arrow function 기본 구조
const sayHello = () => { return "hello world" }
암시적반환- 함수가 반환하는 값을 한 줄로 표현할 수 있는 경우 return을 생략할 수 있다.
const sayHello = () => "hello world"
익명함수- 모든 함수를 "sayHello"라는 변수에 저장해서 사용했는데, 이름을 가진 함수는 해당 변수명을 호출해 몇 번이든 재사용할 수 있는 장점 있다.
하지만 간단한 함수를 일회성으로만 사용한다면 나중에 호출해 쓸 이름을 붙일 이유가 없다. 이럴 때 화살표 함수에 익명 함수를 사용할 수 있다.
기본적인 함수 표현 방식
const sayHelloOnClick = () => { console.log('hello friend') }
익명 함수의 경우 <App onClick={() => console.log('hello friend')} />
단순히 이름을 선언하는 부분만 제거한다 볼 수 있을 것 같다.
2. 객체와 배열 구조분해 할당
(1) 구조 분해 할당이란?
객체나 배열을 구조 분해해 나타낼 수 있다. 자주 사용하는 패턴이므로 익숙해져야 한다.
배열이나 객체의 속성을 분해해 개별이나 변수에 쉽게 할당할 수 있게 해주는 문법
이 기능은 ES6에서 도입되었다.
이 구조 분해 할당에 대한 부분은
어떻게 이해를 해야 할지 아직 생각이 안들어서 좀 더 공부를 한 뒤에 아티클을 새로 더 써봐야 할 것 같다.
3. spread operator (전개 구문)
전개구문이란 기존에 있는 객체나 배열의 내용을 그대로 가져오거나 새로운 값을 덧붙여 새로운 객체나 배열을 생성 가능하다. 기존 데이터(객체나 배열)에는 전혀 영향 주지 않고 복사해서 새로운 것을 만든다.
예를 들어
const box = {size: "Big", color: "red"}; 라는 객체가 있을 때
const newBox = {...box}라 하면 newBox라는 객체를 box에서 복사해 붙여 넣은 형태라 보면 된다.
그리고
const newBlueBox {...box, color: "blue" };는 box를 복사하고 color를 blue로 바꾼 형태로 보면 된다.
4. ES6는 아니지만, 정말 자주 쓰이는 메소드
ES6 이전에 존재하던 메소드지만 앞으로 정말 자주 활용하게 될 메소드다.
(1) map()
배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
const array1 = [1, 4, 9, 16];
const map1 = array1.map(x=>x*2); -> map1은 [2, 8, 18, 32]로 반환된다.
(2) filter()
주어진 함수 테스트를 통과하는 모든 요소를 모아서 새로운 배열로 반환한다.
const fruits= ['사과', '귤', '배', '감', '바나나', '키위']; 일 때
const result = fruits.filter(fruit => fruit.length > 2); fruits 배열 중 글자 수가 3개인 것만 추출하면
console.log(result); 그 결과를 출력한다 '바나나' 하나만 나온다.
5. 연습 문제
* 함수에서 return을 사용하지 않으면 무엇을 반환할까?
return 키워드가 없는 경우 함수는 아무런 동작도 하지 않는다.
만일 a와 b라는 변수를 선언하고 각 변수에 숫자를 넣고 덧셈을 하는 함수를 만든다 해도 그에 대한 답을 적어 놓지 않으면 아무 의미가 없는 셈인 점을 생각하면 될 것 같다.
* 아래 사례 중 반복문 사용이 가장 적합한 사례는?
① 배열 안에서 특정 값 찾을 때
② 반복 끝나야 하는 정확한 조건 모를 때
③ 1에서 100의 숫자 중 짝수만 카운트 할 때
정답은 ③
* 반복문 이용해 아래 배열의 값을 하나씩 차례대로 출력하라
const example = ['apple', 'banana', 'mango', 'kiwi', 'melon'];
for 문을 이용하고 length를 써서 값을 출력한다.
