Study/JavaScript

제로초 JavaScript 강의 - 배열 메서드, 함수

posey 2023. 2. 17. 21:00

 

  • 제로초 JavaScript 강의 - 배열 메서드, 함수



Review

 

 

 

 

 

 

 

  • 제로초 JavaScript 강의 - 배열 메서드, 함수

 

 

<배열에서 요소 찾기>

 

 

: 배열에 특정 요소가 있는지 찾아보자. 일종의 검색 기능이라고 보면 되는데, includes 기능을 사용한다.

 

> const target = ['가', '나', '다', '라', '마'];
  const result = target.includes('다');
  const result2 = target.includes('카');
  console.log(result);
  console.log(result2);

  true
  false

 

includes에 주어진 값이 배열에 존재하면 true가 되고, 존재하지 않으면 false가 된다.

true, false가 나오는 것들은 보통 조건문이나 반복문에 많이 넣는다. 

 

검색하고 싶은 값이 몇 번째 인덱스에 위치하는지도 알 수 있다. 

indexOf와 lastIndexOf 기능을 사용해보자.

 

> const target = ['라', '나', '다', '라', '다'];
  const result = target.indexOf('다');
  const result2 = target.lastIndexOf('라');
  const result3 = target.indexOf('가');
  console.log(result);
  console.log(result2);
  console.log(result3);

  2
  3
  -1

 

배열 안에 ‘라’와 ‘다’가 두 개씩 있는 것에 주목하자. 

indexOf는 앞에서부터 주어진 값이 있는지 찾고, lastIndexOf는 뒤에서부터 찾는다.

따라서 ‘다’가 인덱스 2, 4에 위치하지만, indexOf는 앞에서부터 찾으므로 결괏값이 2가 된다.

‘라’는 인덱스 0, 3에 위치하지만, lastIndexOf는 뒤에서부터 찾으므로 결괏값은 3이 된다. 

result3도 눈여겨봐야 한다. 배열 안에 존재하지 않는 값의 인덱스를 찾으면 결괏값은 -1이 된다.

같은 값으로 includes 기능을 사용했다면 false가 됐을 것이다.

 

 

 

 

<배열 반복하기>

 

 

: 배열은 값들을 나열한 것이기 때문에 반복문과 같이 사용하는 경우가 많다. 배열의 모든 요소를

console.log 해 보겠다. while 문이나 for 문 모두 사용할 수 있다.

 

> const target = ['가', '나', '다', '라', '마'];
  let i = 0;
  while (i < target.length) {
    console.log(target[i]);
    i++;
  }

  가
  나
  다
  라
  마

 

변수 i가 배열의 인덱스라고 생각하면 된다. 처음에 0으로 시작해서 1씩 증가하며 console.log 

하게 된다. i가 target.length일 때 중단되므로 마지막 요소까지 모두 출력된다.

for 문으로도 표현해 보겠다.

 

> const target = ['가', '나', '다', '라', '마'];
  for (let i = 0; i < target.length; i++) {
    console.log(target[i]);
  }

  가
  나
  다
  라
  마

 

배열에서 반복 기능을 제공하는 것이 아니라 반복문에 의해 반복되기 때문에 다른 기능을 추가하고

싶다면 반복문의 코드를 수정해야 한다.

 

 

 

<1분 퀴즈>

다음 배열에서 ‘라’를 모두 제거하세요. indexOf와 splice를 사용하세요.

const arr = ['가', '라', '다', '라', '마', '라'];

힌트 반복문을 사용하면 모두 제거할 수 있다.

 

 

컴퓨터는 한번에 찾아내는 것이 힘들다.

우선 이런 식으로 쭉 절차를 적은 다음 공통점과 규칙을 찾아내는 것도 괜찮은 방법이다.

'라'를 하나하나 제거한 다음 indexOf의 결괏값이 -1이 아닐 때까지 반복시키는 반복문을 만들거나

아니면 indexOf의 결괏값이 -1보다 클 때까지 반복시키는 반복문을 만들면 된다.

값이 들어있으면 -1보다 항상 큰 값이 나오기 때문이다.

 

반복문의 핵심은 조건이 내가 반복시키는 동안은 true가 되게 하고, 반복을 멈추고 싶을 때는 false가

되게 하는 것이다.

 

이렇게 반복문을 작성하면 '라'를 못 찾을 때까지 '라'를 배열에서 제거하라는 뜻이다.

 

arr.indexOf('라')가 반복되기 때문에 이를 요약하기 위해 index 라는 변수를 하나 만들었다.

이것은 상당히 어려운 방법인데, 반복문 마지막에 index = arr.indexOf('라'); 를 한번 더 적지

않으면 원하는 결과가 나오지 않게 된다.

기존 index가 사라지기 때문에 다시 재할당을 해야 하는 것이다.

 

 

이건 강의에서 다른 분이 질문하신 건데 상당히 똑똑한 질문을 하셔서 놀랐다.

말 그대로 조건문을 이용할 때 본디 false를 출력하는 것들을 항상 주의해야 한다.

 

 

 

 

<함수 알아보기>

 

 

: 수학 시간에 y = f(x) 같은 함수를 배운 적이 있을 것이다. 프로그래밍에서도 함수라는 개념이 있다.

수학의 함수와 비슷하기도 하지만, 다른 점도 있다.

프로그래밍에서 함수(function)는 특정한 작업을 수행하는 코드를 의미한다.

함수를 미리 만들어 두고 원할 때 실행해 정해진 작업을 수행하게 할 수 있다. 

 

함수를 만들 때는 보통 function 예약어를 사용하거나 =>(화살표) 기호를 사용한다.

화살표 기호를 사용한 함수를 화살표 함수(arrow function)라고 한다.

 

function() {}  // 옛날 방법
// 또는
() => {}  // 요즘 방법

 

이 함수에는 이름이 없으므로 다른 곳에서 사용할 수 없다.

함수에 이름을 붙이면 다른 곳에서 사용할 수 있다. 함수에 이름을 붙여 보자.

 

function a() {}
const b = function() {};
const c = () => {};

 

세 개의 함수에 각각 a, b, c라고 이름을 붙였다. 두 번째와 세 번째 함수는 각각 상수 b와 c에

대입했다. 이렇게 대입하면 상수 또는 변수의 이름이 함수의 이름이 된다.

 

함수 a만 특별하게 상수에 대입하지 않았다.

이처럼 함수를 상수에 대입하지 않고 function 키워드 뒤에 함수 이름을 넣는 방식을 함수 선언문

(function declaration statement)이라고 한다.

반대로, 함수 b와 같이 상수나 변수에 대입하는 방식을 함수 표현식(function expression)이라고 한다.

(변수에다가 함수를 넣어서 변수 이름으로 대신 쓰는 방식)

여기에 화살표 함수까지 포함해 함수를 만드는 방식은 크게 세 가지라고 보면 된다.

(화살표 함수는 변수의 이름으로 대신 쓰는 방식밖에 없음)

 

셋 사이에는 큰 차이가 있다. 이 차이점은 여기서 한 번에 다루지는 않고, 앞으로 새로운 개념이 등장할

때마다 다룰 것이다. 변수와 마찬가지로 함수를 만드는 행위도 선언한다(declare)고 표현한다.

 

만든 함수를 사용해 보겠다. 함수를 사용하는 행위를 호출한다(call)고 표현한다.

 

> function a() {}  // 함수를 만들고 (선언)
  a();  // 호출 or 실행

  (없음)

 

함수 a를 선언한 후 a 뒤에 ()를 붙이면 함수가 실행된다.

지금은 함수 내부에 어떤 작업도 정의하지 않아서 실행결과가 아무것도 나오지 않는다.

 

지금까지 console.log나 parseInt 같은 명령 뒤에 ()를 붙여 사용했는데, console.log와 parseInt도

함수이기 때문이다.

 

이번에는 함수 안에 실행문을 넣어보자. 함수의 중괄호 안에 실행할 코드를 넣으면 된다.

 

> function a() {
    console.log('Hello');
    console.log('Function');
  }
  a();

  Hello
  Function

 

console.log도 함수이기 때문에 이렇게 함수 안에서 다시 함수를 호출할 수 있다.

함수 a를 호출하니 내부의 console.log들이 호출된다.

 

실행하려는 코드를 함수로 만들어 두면 좋은 점은 재사용하기가 쉽다.

다음 예제처럼 함수 a를 여러 번 호출하면 호출한 만큼 내부의 실행문이 실행된다.

 

> function a() {
    console.log('Hello');
    console.log('Function');
  }
  a();
  a();
  a();

  Hello
  Function
  Hello
  Function
  Hello
  Function

 

원래대로 한다면 console.log를 6번 해야 하지만, 함수로 만들었기 때문에 함수를 3번만 호출하면

된다. 이렇게 함수로 만들면 코드의 양을 줄일 수 있다.

 

 

 

 

 

<return 이해하기>

 

> function a() {}
< undefined
> a();
< undefined

 

함수를 선언할 때 undefined가 나오는 것은 신경 쓰지 않아도 된다.

함수 a를 호출할 때(a();) 결괏값이 undefined라는 것에만 주목하자. 함수를 호출하면 항상 결괏값이

나오는데, 기본값으로 undefined가 나옵니다. 이 값을 반환값(return value)이라고 한다.

 

console.log를 호출할 때마다 콘솔에 undefined가 출력되는데, 바로 console.log 함수의 반환값이 

undefined여서 그렇다.

 

반환값을 직접 정할 수도 있는데, return 문을 추가하면 된다. 

반환값은 문자열만 되는 것이 아니라 undefined, 숫자, null, 객체 등 모든 값이 된다.

심지어 함수 자체를 반환해줄 수도 있다.

함수와 함수를 반환하는 것을 고차 함수라고 하는데, 그것은 후에 다루도록 하겠다.

 

> function a() {
    return 10;
  }
< undefined
> a();
< 10

 

이제 함수 호출의 반환값으로 undefined 대신 10이 나온다. 명시적으로 return 문을 사용하지 않는다면

항상 함수 실행문 끝에 return undefined가 있다고 생각하면 된다.

 

function a() {}
// 두 코드는 동일함
function a() {
  return undefined;
}
function a() {
  console.log('a');
}
// 두 코드는 동일함
function a() {
  console.log('a');
  return undefined;
}

 

반환값도 값이므로 다른 식이나 문에 넣어 사용할 수 있다.

 

> function a() {
    return 10;
  }
  console.log(a());

  10

 

함수 a의 호출 결과를 console.log에서 사용했습니다. a()의 반환값이 10이므로 console.log(a())는

console.log(10)과 같다. 따라서 콘솔에 10이 출력된다. (그 뒤에 나오는 undefined는 console.log의

반환값)

 

함수의 반환값을 상수나 변수에 대입할 수도 있다. 함수의 반환값도 값이라는 점을 꼭 기억하자.

 

> function a() {
    return 10;
  }
  const b = a();
  console.log(b);

  10

 

return 값을 여러 개로 두고 싶다면 return 1,5 이런 식으로 작성하는 것이 아니라 배열로 묶어서

return 해야 한다. return 값은 원래 하나이기 때문에 여러 개라면 하나 안에 묶어서 return 하는

수밖에 없다.

 

return 문의 기능이 하나 더 있다. 바로 함수의 실행을 중간에 멈추는 역할이다.

return 문은 함수를 종료하면서 반환하는 역할을 한다.

 

> function a() {
    console.log('Hello');
    return;
    console.log('Return');
  }
  a();

  Hello

 

이 예제에서는 Hello만 콘솔에 출력된다. 

console.log('Return')보다 return 문이 더 위에 있기 때문이다. 

return 문이 실행되면 그 아래 코드는 아예 실행되지 않는다. 이를 이용해 조건문과 return 문을

결합해서 함수의 실행을 조작할 수 있다.

 

> function a() {
    if (false) {
      return;
    }
    console.log(‘실행됩니다.’);
  }
  a();

  실행됩니다.

 

이 예제를 실행하면 결과가 조금 의아할 수도 있다. return 문 아래의 코드는 실행되지 않는다고

착각하기 때문이다. 하지만 return 문의 존재가 중요한 것이 아니라 return 문이 실행되는가가

중요하다.

현재 return 문이 위치한 if 문의 실행문이 실행되지 않기 때문에(조건문이 false이므로) return 문도

실행되지 않는다. 따라서 그 아래의 console.log가 정상적으로 호출된다.

 

 

반응형