기술(이론)부터 시작하면 안 되는 이유에 대한 고전입니다.
(짧다!)

수요에 따라 배우기

우리가 이론으로 무언가를 배우기 시작할 때, 결정된 주제에 대해 존재하는 정보의 양에 압도당하는 느낌을 받기 쉽습니다.

먼저 문제

먼저 해결해야 할 문제를 찾은 다음 문제를 해결하기 위해 어떤 이론을 공부해야 하는지 파악하게 됩니다.

나는 결과를 얻기 위해 필요한 것을 공부하므로 좌절하지 않고 잘 배울 수 있고 많은 세부 사항을 외울 필요가 없습니다.

지금 막 JavaScript를 배우기 시작했다면 문지기를 더 많이 만들고 진행 상황을 이해하게 만드는 것보다 의욕을 잃게 만들 수 있는 다양한 용어를 접했을 것입니다.

자, 문제를 가지고 배워봅시다.

개 나이 계산기

"1년은 인간의 7년과 같다"는 말이 있습니다.

개의 나이(사용자가 입력)를 인간 나이로 변환하는 함수를 만들 것입니다. 다음 문자열과 같은 출력이 예상됩니다.

"네 개는 사람 나이로 XX살이야"



다음은 기능(블랙 박스)이 작동하는 방식에 대한 한 가지 예입니다.

이 검은색 상자에는 명령어 목록도 들어 있습니다. 여기에서 출력할 내용을 함수에 알려줍니다.

개의 나이가 포함된 입력을 받습니다.

개의 나이를 인간의 나이로 변환하는 루틴을 생성합니다

.

문자열 다음에 출력됩니다.

먼저 함수를 선언하는 방법을 알아야 합니다.

함수 선언

함수는 키워드 function으로 시작한 다음 그 이름으로 가는 표현식으로 생성됩니다.

강아지의 나이를 계산하는 함수를 선언해 봅시다.

function calcDogAgeToHumanYears(dogAge) {
//Function Body
}

키워드 기능을 사용했습니다.

개의 나이를 사람의 나이로 계산하기 위해 설명이 포함된 이름을 지정합니다.

개나이? 괄호 안의 이것은 무엇일까요?

매개변수 및 인수

이해하기 쉽지 않습니다. 코딩을 배우기 시작했을 때 두 용어를 혼동했습니다. 연습을 통해 익숙해질 것입니다.

우리는 함수를 선언할 때 괄호 또는 기술적으로 둥근 괄호라고 하는 것을 사용하여 함수가 기대하는 자리 표시자를 유지합니다.

함수는 0개 이상의 매개변수를 사용할 수 있습니다.

그것은 당신에게 달렸습니다!

일부 매개 변수를 예상하는 JavaScript에는 미리 정의된 함수(메서드)가 있으며 이는 변경할 수 없는 경우입니다.

매개변수 또는 '슬롯'

function calcDogeAgeToHumanYears(dogAge) {};

//dogAge is holding a slot, an input that a function should receive

인수는 함수를 실행하기 위해 제공하는 JavaScript 데이터 유형의 실제 값, 특정 값입니다.

//calling a function
calcDogAgeToHumarYears(3);

>> 'Your dog is 21 years old in human years'

자리 표시자인 슬롯이 실제 데이터인 숫자 3으로 대체되었습니다.

기능 본문

코딩의 한 가지 좋은 점은 정답이 하나만 있는 것이 아니라는 것입니다.

여기에 있는 모든 사람은 동일한 문제를 해결하는 방법에 대해 생각하는 방식이 다를 것입니다.

문제: 개의 1년은 사람의 7년과 같다

내 솔루션:

새 변수를 만듭니다.

dogAge에 7을 곱하고 이 새 변수에 저장합니다.

값이 있는 문자열을 출력합니다.

//keyword function + functionName + (parameter)
function calcDogAgeToHumarYears(dogAge) {
    //coding
    let toHumanYears = dogAge * 7;
    console.log(`Your dog is ${toHumanYears} years old in human years`);
}

//calling the function and using the argument with the number 3
calcDogAgeToHumanYears(3);
//output
>> 'Your dog is 21 years old in human years'

그래? 수행?

예. 이 기능은 그 목적을 달성하고 있습니다.

연습할 시간입니다! return 문으로 이것을 리팩토링하십시오.

이제 공부하고 적용할 새로운 것이 하나 있습니다.

댓글이나 Twitter(@mpfdev)를 통해 코드를 저에게 보내주세요.

HTML/CSS를 배우고 있습니까?

다음은 CSS Floats로 섹션을 수행하는 방법에 대한 마지막 게시물입니다.