일상생활에서의 프로그래밍 - 추상화

모든 프로그래밍 언어에서 절대 빠지지 않는 몇 가지 규칙이 있습니다. "상수", "변수", "반복", "조건" 이 4가지입니다. 이 4가지를 이해하면 일상생활에서 우리가 이용하는 것의 대부분을 소프트웨어화 할 수 있습니다. 이를 프로그래밍에서는 "추상화"라고 하기도 합니다. 몇 가지 예를 살펴보겠습니다.

 

인스타그램 태그 목록

위 이미지는 인스타그램의 태그 탭에서 "바다"라는 키워드로 검색했을 때 나오는 태그 목록들입니다. 이를 코드로 나타내면 다음과 같습니다.

const TAG_LIST = ["바다", "산", "바다다", "바다스타그램", "바다뷰", "산스타그램", "산티아고순례길"];

let result = [];

TAG_LIST.forEach((tag) => {
    if (tag.includes("바다")) {
        result.push(tag);
    }
})

console.log("바다가 들어간 태그 목록들:", result);

result.forEach((tag, index) => {
    console.log("바다가 들어간 태그 목록을 반복문을 돌려서 출력해보자! " + index + "번째:",tag);
})

위 코드를 실행하면 아래와 같은 결과가 나옵니다.

코드 설명

아직 자바스크립트의 문법에 대해서 제대로 배우지 않은 상태기 때문에 익숙지 않은 코드들이 보일 수 있습니다. 문법에 대해서는 추후, 자세히 다룰 예정이기 때문에 너무 신경 쓰지 마시고 저런 식으로 각각의 기능을 구현하는구나 정도로 이해하시면 됩니다.

 

1. const TAG_LIST = [...]

TAG_LIST라는 상수에 인스타그램에 저장된 모든 태그들을 저장하는 것을 가정했습니다. (물론, 실제로는 데이터베이스에 저장되어 있기 때문에 위와 같이 코드를 작성하진 않겠지만, 상수의 개념에 대한 이해를 돕기 위해 위와 같이 작성하였습니다.

 

2. let result = []

우리는 "바다"라는 키워드가 들어간 태그 목록들을 알고 싶기 때문에 이를 저장할 변수를 하나 선언해 주면 좋지 않을까요? 이를 result라는 변수라고 가정하였습니다.

 

3. TAG_LIST.forEach

이는 자바스크립트에서 목록(프로그래밍에서는 리스트, 배열이라고 부릅니다.)을 반복하며 하나씩 하나씩 순회하기 위한 문법입니다.

 

4. if (tag.includes("바다"))

if는 조건문이며, tag.includes("바다")는 태그에 "바다"라는 단어가 포함되어 있는지를 확인하는 문법입니다. tag에는 TAG_LIST에 있는 각 태그들이 반복문을 도는 과정에서 들어오게 됩니다.

 

예를 들어, 위에서는 "바다", "산", "바다다" 끝으로 "산티아고순례길" 이 태그들이 들어오게 됩니다.

 

즉, 첫 번째 반복을 돌 때, 코드를 보면 "바다". includes("바다") 이런 형태가 되기 때문에 결과는 true가 되고 "산티아고순례길". includes("바다")의 경우에는 "바다"라는 키워드가 없기 때문에 결과는 false가 됩니다.

 

5. result.forEach

이것도 위의 3번과 마찬가지로 "바다"라는 키워드가 들어간 태그를 result에 담았고 이를 반복하면서 결과를 출력해 보는 코드입니다.

 

여기서 차이점은, index라는 코드입니다. index는 목록(배열, 리스트)을 돌 때, 몇 번째 항목을 순회하고 있는지를 알려주는 코드입니다.

 

프로그래밍에서는 무조건 모든 index(순서)는 0부터 시작하기 때문에 결과를 보면 0부터 출력되는 것을 확인할 수 있습니다.

 

지갑의 카드 목록

const CARD_LIST = ["토스 신용카드", "토스 체크카드", "삼성 신용카드", "국민 체크카드", "국민 신용카드"];

let result = [];

CARD_LIST.forEach((tag) => {
    if (tag.includes("토스")) {
        result.push(tag);
    }
})

console.log("토스가 들어간 카드 목록들:", result);

result.forEach((tag, index) => {
    console.log("토스가 들어간 카드 목록을 반복문을 돌려서 출력해보자! " + index + "번째:",tag);
})

위 코드를 실행하면 아래와 같은 결과가 나옵니다.

코드에 대한 설명은 위의 인스타그램 태그 목록과 동일하다고 생각하시면 됩니다.