본 게시글은 유튜브 생활코딩 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.
생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.
생활코딩
일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다.
www.youtube.com
생활코딩
hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠. 온라인 강의 소개 입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은
opentutorials.org
"어떤 문제가 우리 삶에서 중요하고 심각할 수록
그 문제를 해결해 주는 공부는 문제로부터 우리를 해방시켜줄겁니다."
(생활코딩 : Web1 -1 수업소개. 중)
#0. 함수 예고
코드가 많아지면 코드를 잘 정리하여야 할 필요성이 생깁니다.
바로 이 때 함수라는 도구가 매우 유용하게 작용할 수 있습니다.
조금 더 넓은 의미로는 '객체'라는 도구도 있지만, 이 부분은 나중에 살펴보도록 하겠습니다.
함수는 코드를 보관하는 일종의 수납상자이라고 생각하시면 이해하시기 편하실 겁니다.
만약, 우리가 같은 코드를 1억개이상 등록하여야 하고, 그것을 관리하여야 하며
필요에 따라 일부분의 코드만 원하는 내용으로 바꾸어주고자 할 때,
함수라는 도구가 없다면 매우 절망스러운 상황에 닥칠 것입니다.
웹페이지가 커지고 복잡해질 수록, 여러개의 똑같은 코드가 있는 것인지 ,비슷한 코드가 존재하는 것인지
사람의 육안으로 관리할 수 있는 영역을 넘어서는 한계점은 분명히 올 것입니다.
바로 이러한 상황에서 우리를 구원해주는 것이, 코드의 수납상자 '함수'입니다.
#1. 함수
이번 시간에는 함수의 기본과 parameter, argument, return에 대하여 학습할 것입니다.
기본적으로 생활코딩 사이트의 동영상의 내용을 리뷰하는 방식으로 포스팅을 진행해 왔으나,
이 주제에 있어서는 생활코딩의 동영상 사이트 보다 다양한 자료를 소개해드리는 것으로 대체하고자 합니다.
(생활코딩 사이트 및 유튜브에서도 함수에 대하여 친절하고 자세히 설명해 놓았습니다.
굳이 저와 학습 흐름을 같이 하시려 안하셔도 되니 편하신 대로 학습해 주시면 되겠습니다.)
#1-1. 함수의 기본
'함수 예고'에서 함수란 코드의 수납상자라 비유드린 바 있습니다.
먼저 아래와 같은 코드가 있다고 가정해봅시다.
<script>
document.write('1');
document.write('2');
</script>그리고 아래와 같은 웹사이트가 있다고 가정햐봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<ul>
<script>
document.write('<li>1</li>');
document.write('<li>2</li>');
document.write('<li>3</li>');
document.write('<li>4</li>');
document.write('<li>5</li>');
</script>
</ul>
</body>
</html>들여쓰기 간격은 무시해주세요..
코드가 조금 더럽지만, 단순히 1,2,3,4를 h2의 크기(형태)로 리스트의 모양으로 출력해주는 화면일 것입니다.
여러분들이 저 4줄의 스크립트를 아래의 웹사이트에 삽입하여야 하는데, 3번 삽입하여야 합니다.
그렇다면 어떻게 구현할 수 있을까요? 네, 아마 반복문을 사용하고자 할 것입니다.
그런데 반복문으로 구현할 수 없는 경우가 있습니다.
어떤 경우일까요? 연속적으로 반복되는 것이 아닐 때입니다.
가령, 1과 3과 5등의 홀수 번호 뒤에 스크립트를 삽입하고자 한다면, 반복문을 통해 극복하기 어려울 것입니다.
바로 이러할 때 함수, 코드 수납상자를 이용하여 이러한 문제를 극복할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<ul>
<script>
function example(){
document.write('1');
document.write('2');
}
document.write('<li>1</li>');
example();
document.write('<li>2</li>');
document.write('<li>3</li>');
example();
document.write('<li>4</li>');
document.write('<li>5</li>');
example();
</script>
</ul>
</body>
</html>어떠신가요?
함수를 코드 수납상자라 표현한 것에 대하여 조금 감이 잡히시나요?
#1-2. Parameter & Argument
파라미터는 매개변수, 어거먼트는 전달인자라 표현합니다.
자칫 헷갈릴 수 있는 개념이기에 이 둘의 차이점을 잘 아는 것이 중요합니다.
| Parameter | 매개변수 | 함수(메서드) 입력 변수 명 |
| Argument | 전달인자, 인자 | 함수(메서드)의 입력 값 |
이 게시글에서 잘 설명해 놓았으니 참고하시면 좋을 것 같습니다.
"Parameter" vs "Argument"
I got parameter and argument kind of mixed up and did not really pay attention to when to use one and when to use the other. Can you please tell me?
stackoverflow.com
#1-3. return
return에 관해서는 이 게시글을 살펴보도록 하겠습니다.
JavaScript Function Parameters
JavaScript Function Parameters A JavaScript function does not perform any checking on parameter values (arguments). Function Parameters and Arguments Earlier in this tutorial, you learned that functions can have parameters: function functionName(parameter1
www.w3schools.com
x = sumAll(1, 123, 500, 115, 44, 88);
function sumAll() {
var i;
var sum = 0;
for (i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}여기서 sumAll함수는 입력받은 모든 매개변수의 합을 출력해주는 기능을 합니다.
함수 내부를 살펴보면 sum이라는 변수를 선언하고,
그 변수에 반복문을 활용하여 매개변수를 더한 값을 저장하고 있습니다.
그 이후 'return sum'을 통해 변수 sum을 반환하는데,
즉 함수의 결과가 표현되는 값을 return으로 지정해 주는 것입니다.
'오픈튜토리얼스 > 생활코딩 : Web1' 카테고리의 다른 글
| [생활코딩|WEB_JavaScript#7] 반복문 下 : 배열과 반복문, 배열과 반복문의 활용 2020.02.06 (0) | 2020.02.06 |
|---|---|
| [생활코딩|WEB_JavaScript#7] 반복문 上 : 배열, 반복문 2020.02.03 (0) | 2020.02.03 |
| [생활코딩|WEB_JavaScript#6] 리팩토링(refactoring) 2020.02.01 (0) | 2020.02.01 |
| [생활코딩|WEB_JavaScript#5] 조건문下 : 조건문, 조건문의 활용 2020.01.31 (0) | 2020.01.31 |
| [생활코딩|WEB_JavaScript#5] 조건문 上 : 조건문 예고, 비교 연산자와 Boolean 타입 2020.01.30 (0) | 2020.01.30 |
최근댓글