자바스크립트 강의 2편 - 함수와 배열

이번 시간에는 함수(Function)와 배열(Array)을 살펴보겠습니다. 실제 서비스를 개발할 때 가장 많이 사용하게 되는 문법들이라는 점에서 확실하게 익혀두시면 좋습니다.

함수 작성하기

기본적인 함수 문법부터 보겠습니다.

function add(a, b) {
  return a + b;
}

console.log(add(2, 3));   // 5

다만 요즘에는 화살표 함수(Arrow Function)를 더 많이 사용합니다.

const add = (a, b) => a + b;
console.log(add(2, 3));   // 5

한 줄로 끝나는 경우에는 return 을 생략할 수 있습니다. 여러 줄을 작성하셔야 하는 경우에는 중괄호를 사용해주시면 됩니다.

const greet = (name) => {
  const msg = `안녕하세요, ${name}님`;
  return msg;
};

배열 다루기

const nums = [1, 2, 3, 4, 5];

console.log(nums.length);            // 5
console.log(nums[0]);                // 1
console.log(nums[nums.length - 1]);  // 5

배열 메소드 세 가지

기본적으로 다음의 세 가지만 알고 계셔도 대부분의 작업을 처리하실 수 있습니다.

const nums = [1, 2, 3, 4, 5];

console.log(nums.map(n => n * 2));           // [2, 4, 6, 8, 10]
console.log(nums.filter(n => n % 2 === 0));  // [2, 4]
console.log(nums.reduce((sum, n) => sum + n, 0)); // 15

여기에서 중요한 점은 세 가지 모두 원본 배열을 변경하지 않는다는 것입니다. 새로운 배열을 만들어서 반환한다는 점에서 다음과 같이 이어서 작성하실 수 있습니다.

const result = nums
  .filter(n => n % 2 === 1)     // 홀수만 남기기
  .map(n => n * 10)             // 10배로 만들기
  .reduce((a, b) => a + b, 0);  // 전부 더하기

console.log(result);   // 90

리액트(React)로 화면을 그릴 때 이러한 방식을 굉장히 자주 사용하게 되므로 익숙해지시면 좋습니다.

객체(Object) 다루기

const user = {
  name: "동빈",
  age: 30,
  greet() {
    return `안녕하세요, 저는 ${this.name} 입니다`;
  },
};

console.log(user.name);
console.log(user.greet());

존재하지 않는 속성(Property)을 꺼내는 경우에는 오류가 아니라 undefined 가 반환됩니다.

console.log(user.email);        // undefined
console.log(user.email.length); // 오류 발생

한 단계 더 들어가면 오류가 발생한다는 점에서 주의하셔야 합니다. 이런 경우에는 옵셔널 체이닝(Optional Chaining)을 사용해주시면 됩니다.

console.log(user.email?.length);  // undefined

구조 분해 할당

const { name, age } = user;
console.log(name, age);

const [first, second] = [10, 20];
console.log(first, second);

객체나 배열에서 필요한 값만 꺼내어 변수로 만드는 문법입니다. 리액트를 사용하시게 되면 하루에도 수십 번씩 마주치게 되는 문법이라는 점에서 반드시 알고 계셔야 합니다.

연습 문제

1. 이름이 담긴 배열에서 세 글자 이상인 것만 골라내기
2. 숫자 배열의 평균 구하기 (reduce 와 length 활용)
3. 사람 객체가 담긴 배열에서 나이만 뽑아서 배열로 만들기

다음 편에서는 실제로 화면을 조작해보겠습니다.