추상화란 무엇일까?

사람이 생각하고 표현하는 방식은 모두 다르다.

그래서 소통을 원활하게 하는 일은 쉽지 않다. 

 

너무 세세한 표현은 집중력을 흐리기도 하고 시간도 오래걸린다. 

 

원활한 소통을 위한 표현 방식 중 하나로 '추상화'가 있다. 

 

추상화(Abstraction)  
'구체적인 정보는 숨기고 꼭 필요한 핵심만을 표현하는 것'
'복잡한 것들을 목적에 맞게 단순화 하는 것'

 

그래도 아직 추상적이다. 

 

현실 세계에서 살펴보면 책, 영화, 지도도 모두 추상화의 결과물이다. 

 

장황한 스토리를 한 권의 책으로, 한 편의 영화로 축약하여 나타낼 때 '추상화'가 꼭 필요하다.

 

길거리의 쓰레기, 아스팔트 또는 흙길등의 정보 등 세세한 정보를 제외하고 길을 찾을 수 있게 만든 지도도 '추상화'가 들어간다. 

 

프로그래밍에서도 추상화를 사용한다. 

 

프로그래밍을 통해 자신과의 소통, 동료와의 소통, 사용자와의 소통을 원활하게 하는 데 '추상화'가 도움을 준다.

 

프로그래밍은 추상화의 연속이라고 할 수 있다. 

 

우리가 사용한 프로그래밍 언어 자체가 '추상화'의 결정체이며

 

프로그래밍의 주요 개념들(예를 들어 변수, 함수 등)에도 '추상화'가 들어있다. 

 

---

 

 

'변수(Variable)'는 무엇일까?

코드를 읽고 실행하는 것은 컴퓨터가 잘하지만 코드를 작성하는 일은 결국 사람이 하게 된다. 

사람이 코드를 작성할 때는 실수를 할 수 있는데 '추상화'된 코드를 통해 실수를 줄일 수 있다. 

 

 

카페 알바생이 주문을 받아 계산한다고 생각해보자.

아메리카노 3천원, 라떼 4천원, 카페모카 5천원

컴퓨터에 숫자를 입력할 때 아래처럼 가격을 잘못 입력했다면? 모든 계산 흔적으로 가서 가격을 수정해주어야한다.

console.log(3000 * 2);
console.log(4200 * 4 + 4800 * 2);
console.log(4200 + 4800);

반복 입력하는 구체적인 숫자는 오타를 만들 수 있고, 또한 숫자에 대한 의미는 카페 알바생 외 다른 사람이 모른다. 

 

프로그래밍에서는 값에 이름을 부여하기 위해 '변수'를 활용한다.

변수는 이름이 붙은 상자라고 생각할 수 있다. 

//변수선언
let americano_price = 3000;
let latte_price = 4000;
let cafemocha_price = 5000;

consloe.log(americano_price * 3);
console.log(latte_price * 4 + cafemocha_price * 2);

변수 이름을 잘못 입력했다면 오류창이 떠서 쉽게 확인할 수 있고

가격이 변동되면 변수로 가서 가격을 수정해주면 된다. 

다른 사람에게 보여준다고 했을 때도 변수 이름으로 각 숫자의 의미를 설명할 수 있어서 이해도 쉽다.

그래서 '변수 이름'을 잘 작성하는 것도 프로그래밍의 능력이다!

 

 

 

---

스타일 가이드/코딩 컨벤션

 

※변수를 만들 때 꼭 지켜야 하는 룰 

1) JavaScript식별자는 '문자(a-z, A-Z)', '밑줄(_)' '달러기호($)'로 시작해야한다. 두번째 글자부터는 '숫자(0-9)'도 가능하다.

2) 대문사좌 소문자는 구별해야한다. cafemocha와 cafeMocha는 다르다.

3) 기존 JavaScript에 있는 예약어는 사용 불가능하다. if, for, let 이런 것들은 변수 이름으로 정할 수 없다.

 

 

※변수를 만들 때 지키면 좋은 룰

1) 의미 없는 이름 보다는 의미 있는 이름으로!

2) 너무 추상적인 이름보다는 좀 더 구체적인 이름으로!

3) 변수이름은 camelCase로 작성하면 좋다. 

띄어쓰기가 있는 각 단어의 첫 문자를 대문자로 표현하는 방식이다.

 

 

---

 

그렇다면

 

함수(Function)이란 무엇일까?

 

 

쓰다 지워짐... 휴...

 

 

함수의 파라미터(Parameter)

 

여러 개의 파라미터를 쓸 때는 콤마로 구분해준다.

introduce함수 파라미터는 name, birth, nationality, job 4개이다.

console창에 4개의 파라미터가 잘 나타있다.

return문

다시 돌려준다, 반환한다 는 의미이다. 

함수 호출 부분 line17,18,19 확인

line17, line18, line19 호출 결과 

return은 파이썬을 배울 때도 매우 헷갈렸던 개념이다. 

특히 파이썬에서는 console.log()가 아니라 print를 썼는데

 

함수 안에 print가 들어 있는지, 함수 밖에서 print로 호출한 함수를 보여주는지에 따라 보여지는 결과가 달랐다. 

JavaScript도 마찬가지로 console.log()가 print라고 생각하면 된다.

console.log()를 써줘야 console창에서 확인이 가능하다.

 

따라서 line17은 getTwo(number)함수를 불르긴 했는데 파라미터가 없기 때문에

NaN(숫자가 아니라는 얘기)이 떴고

line18은 함수 getTwo(5)와 getTwo(2)가 각각 x, y 변수로 되었고 

console.log(x, y)를 통해 console창에 결과가 보여졌다. → 10, 4

 

line19는 getTwo(2)를 호출했지만 console.log(getTwo(2))로 쓰지 않았기 때문에 아무것도 안보인다. 

값이 return만 되었지 보여주라는 명령은 안했기 때문에 아무것도 안보이는 것이다. 

 

return을 이용하면 함수를 훨씬 더 다양한 방식으로 활용할 수 있다. 

return은 변환해준다는 의미를 염두하고 변환한 값을 보여주고 싶을 때는 console.log를 쓴다고 생각하면 덜 헷갈린다. 

 

return예시

함수interstCalculator에 return으로 값을 변환

변수를 이용해 console.log에 변수를 넣음

 

---

 

 

프로그래밍은 추상화의 연속이다. 

 

추상화 - 패턴을 찾는 것, 핵심을 찾는 것, 기호화 시키는 것

 

좀 어려운 것;;;;

 

그래도 중요한 것!

 

추상화 능력을 기르는 것이야말로 SW교육에서 꼭 필요한 교육인 것 같다.