[JavaScript] 기초 - 변수, 타입, 함수

1. 변수 (variable)

변수를 선언한다는 것은 데이터 보관함(메모리)에 데이터를 넣을 공간을 확보하는 것을 의미한다.
이떄, 변수란 각 데이터 보관함(메모리)에 붙인 이름을 의미하며 보관함의 크기는 동일하다.
변수를 선언하고 할당하는 가장 큰 이유는 반복적으로 사용하는 값을 데이터 보관함에 넣어 두었다가 편하게 꺼내서 사용하기 위함이다.

let age // let 키워드로 변수 age 선언 (선언은 한번만 한다!)
age = 25 // age 변수에 값 할당

let fruit = "딸기";
// let 키워드로 변수 fruit을 선언하고 문자열 "딸기"를 할당한다.
// 여기서 등호(=)는 '같다'라는 의미가 아닌 '할당하다'의 의미이다.

let sum = 1;
sum = sum + 2; // 1 + 2 (재할당)
sum = sum + 3; // 3 + 3 (재할당)
sum = sum + 4; // 6 + 4 (재할당)

console.log(sum); // 10

2. 타입 (type)

변수에는 숫자, 문자열, 불리언, 배열 객체 등 다양한 타입이 있다. (undefined, 함수도 타입이다.)
typeof 연산자를 사용하면 값의 타입을 알 수 있다.

let int = '0124';
console.log(typeof int); // 변수 int의 타입은 string(문자열)이다. ('',"",``)
let hello;
console.log(hello); // undefined (변수에 할당된 값이 없기 때문)

console.log(typeof 1); // number
console.log(typeof '1'); // string
console.log(typeof (1 < 2)); // boolean (true)

3. 함수 (function)

"작은 기능의 단위"로 어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록이다. 일련의 코드를 묶어서 저장한 후 필요할 때마다 호출할 수 있으며 함수는 반드시 return 된다. 또한 함수에는 구체적인 입력값과 출력값이 존재한다.

const base = 3;
const height = 4;
const triangleArea = (base*height) / 2;
console.log(triangleArea) // 6
// 이렇게 반복적으로 실행되는 일이 필요한 경우 함수로 만들 수 있다.
// 함수 선언식, 함수 표현식, 화살표 함수로 함수를 선언할 수 있다.

// 1. 함수 선언식
function getTriangleArea(base, height) {
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

// 2. 함수 표현식
const getTriangleArea = function (base, height) { // 변수에 익명 함수 할당
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

// 3. 화살표 함수
const getTriangleArea = (base, height) => {
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

// 만약 함수의 body에 return문만 있는 경우, 화살표 함수는 return과 중괄호({})를 생략할 수 있다.
const getTriangleArea = (base, height) => base * height / 2; // (O)
// return 문에서 소괄호를 사용할 수 있다
const getTriangleArea = (base, height) => (base * height / 2) // (O)
const getTriangleArea = (base, height) => {base * height / 2} // (X), undefined

// 만약 함수 내 현식이 2줄 이상인 경우, return과 중괄호({})를 명시적으로 쓰는 것이 좋다.
// Bad
const getStudentAvg = arr => arr.filter(person => person.job === 'student').reduce((sum, person) => (sum + person.grade), 0)

// Good
const getStudentAvg = arr => {
  return arr
  .filter(person => person.job === 'student')
  .reduce((sum, person) => (sum + person.grage), 0)
}

filter(), reduce() MDN에서 찾아보기

Array.prototype.filter()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);
console.log(result) // ["exuberant", "destruction", "present"]

arr.filter(callback(element[, index[, array]])[, thisArg])

매개변수

• callback : 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버린다. 다음 세 가지 매개 변수를 받는다.
• element : 처리할 현재 요소
• index : 처리할 현재 요소의 인덱스
• array : filter를 호출한 배열
• thisArg : callback을 실행할 때 this로 사용하는 값

테스트를 통과한 요소로 이루어진 새로운 배열을 반환하고 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환한다.

( 출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter )

Array.prototype.reduce()

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial); // 10

리듀서 함수는 네 개의 인자를 가진다.
1. 누산기 (acc)
2. 현재 값 (cur)
3. 현재 인덱스 (idx)
4. 원본 배열 (src)

리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 된다.

arr.reduce(callback[, initialValue])

매개변수

• callback : 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받는다.

• accumulator : 누산기는 콜백의 반환값을 누적한다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값이다.

• currentValue : 처리할 현재 요소

• currentIndex : 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작한다.

• array : reduce()를 호출한 배열

• initialValue : callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 ㅇ낳으면 배열의 첫 번째 요소를 사용한다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생한다.

  누적 계산의 결과 값을 반환한다.

( 출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce )