함수(2) / 배열

기멜·2021년 11월 8일
0

자바스크립트 독학

목록 보기
43/44

14.Function(함수) - 데이터 반환하기(2)

여태까지는 데이터를 받는 함수에 대해 알아보았습니다.
이번 시간에는 return(리턴,반환) 해주는 함수에 대해 알아보겠습니다.

14-1. return 함수 정의

return이라는 것은 함수를 호출했을 때, 함수가 값을 반환한다는 뜻입니다.

function multiplyTen(myNumber) {
  return 10 * myNumber;
}

위에 multiplyTen함수의 정의 -> 받은 인자에 10을 곱하여 반환한다!

14-2. return 함수의 호출

함수를 호출해야겠죠! 아래와 값이 여러번 호출할 수 있습니다.

multiplyTen(3); 
multiplyTen(6); 
multiplyTen(12);  

14-3. return 함수의 호출 결과 확인

호출은 했지만, 어떤 값을 리턴했는지 알 길이 없습니다. 즉, 호출된 함수의 return값을 변수에 저장하는 수 밖에 없습니다. 아래와 같이 함수의 반환을 변수에 저장해서 console로 확인해볼 수 있습니다.

let result1 = multiplyTen(3); 
let result2 = multiplyTen(6); 
let result3 = multiplyTen(12);  

console.log(result1); 
console.log(result2); 
console.log(result3);

변수에 저장하기 귀찮다면, 결과값을 바로 console로 확인해도 됩니다.

console.log(multiplyTen(0)); 
console.log(multiplyTen(3)); 
console.log(multiplyTen(2));

14-4. 함수와 return 키워드

사실 함수는 모두 return을 합니다. '음.. 아닌데' 하고 생각이 드셨을 수도 있습니다. 분명 return이 없는 함수를 보신 적이 있을테니까요. 그 경우에도 return이라는 키워드를 생략했을 뿐 함수는 리턴을 합니다. return을 생략하면 함수는 undefined를 반환합니다.

function consoleSuccess(month, name) {   
  console.log(month, name); 
}  

let result = consoleSuccess("3", "김개발"); // 함수를 호출한 결과를 result에 담아서
console.log("consoleSuccess 호출 값은" + result); // 어떤 값이 리턴 되는지 직접 확인해보세요

14-5. 함수 내부에서 다른 함수 호출하기

조금만 더 복잡하게 함수를 사용해보겠습니다.

function getTax(price) {
  return price * 0.1;
}

function calculateTotal(price) {
  return price + getTax(price);
}

const result = calculateTotal(3500);
console.log(result);

이렇게 함수 안에서 또 함수를 호출 할 수 있습니다.
calculateTotal 함수 내부에서 getTax를 또 호출했습니다. 함수가 실행되는 시점은 함수를 호출하는 순간이겠죠? 위 코드에서 function으로 함수를 선언하는 부분은 "이런 함수가 있다"고 선언해준 것 뿐입니다. 함수가 실행되는 시점은 바로 calculateTotal(3500)으로 호출 했을 때 입니다.

코드 해석

function getTax(price) {
  return price * 0.1;
}

에서 price에 3500이 들어가고 return해서 350이 나온다.

function calculateTotal(price) {
  return price + getTax(price);
}

역시 price에 3500이 들어가는데 getTax(price)= 350과 더해진다.

const result = calculateTotal(3500);
console.log(result);

마지막으로 result라는 변수를 만들어서 calculateTotal(3500) 함수를 넣어주고,
console.log로 result 변수를 가져오면 된다.

Array (배열)

15-2. 배열의 정의 및 특징

배열을 사용하면 몇 천 개의 변수를 생성하지 않고, 하나의 변수에 모든 데이터를 갖고 있을 수 있습니다. 배열은 대괄호([])로 감싸져 있습니다.

위에 배열은 데이터가 하나도 없는 빈 배열입니다. 이제 데이터가 있는 배열을 만들어 보겠습니다.

let cities = ["서울", "대전", "대구", "부산", "광주", "제주도"];
let KOSPI = [2062.82, 2053.2, 2045.92, 2058.82, 2053.12, 2055.7]; 


Element: "서울", "대전"과 같은 배열의 값, 하나하나를 Element(요소)라고 부릅니다.

요소와 요소 사이에는 쉼표로 구분합니다. 요소 자리에는 이제까지 배운 String,Number,Array 모두 가능합니다.

let anything = ["대전", 1987, ["하나", "둘", 3]];

15-3. 배열의 Index

배열의 요소는 순서(index)를 갖고 있습니다. 주의해야 할 특징이 있다면 이 index는 1이 아니라 0부터 시작합니다.

anything 배열을 다시 볼까요.

var anything = ["대전", 1987, ["하나", "둘", 3]];

String형인 "대전"은 index가 0, Number형인 1987은 index가 1, Array형인 ["하나", "둘", 3]은 index가 2입니다.

15-4. 배열 데이터의 접근

index를 사용하면 해당 배열의 요소를 가져올 수도 있습니다.

배열이름[index]

Assignment

  1. 아래 조건을 읽고 이행해주세요.
    getElement 함수안에 arr 변수를 선언했습니다.
    arr 변수는 배열을 할당했고요, 배열에는 다양한 데이터 타입의 요소가 들어있네요!
    배열이 담긴 arr 변수에 접근하여 getElement 함수가 "array" 라는 문자열을 return 할 수 있도록 해주세요.
  2. addFirstAndLast 함수를 작성해주세요.
    addFirstAndLast 함수에 주어진 인자 myArray는 숫자 값으로만 이루어진 array 입니다.
    addFirstAndLast 함수에 주어진 인자 myArray 의 첫번째 element와 마지막 element의 값을 더한 값을 리턴해주세요.
    만일 myArray에 한 개의 요소만 있다면 해당 요소의 값을 리턴해 주시고 요소가 없는 비어있는 array라면 0을 리턴해주세요.
function getElement() {
  let arr = [3, [4, ["array", 9], 2+3], [0]];
  return arr[1][1][0];
}
function addFirstAndLast(myArray) {
if (myArray.length === 1){
  return myArray[0];
} else if (myArray.length === 0){
  return 0;
} else if (myArray) {
  return myArray[0] + myArray[myArray.length-1];
}
}
myArray = [3, 2, 5];

1. 코드리뷰
[3, [4, ["array", 9], 2+3], [0]] 에 [1]인 [4, ["array", 9] 의 [1]인
["array", 9]의 [0]번째인 "array"를 찾을 수 있습니다.

2. 코드리뷰

if문으로 만일 myArray에 한 개의 요소만 있다면 해당 요소의 값을 리턴해 주시고 요소가 없는 비어있는 array라면 0을 리턴해주세요. 를 먼저 만들었다. myArray.length === 1 myArray길이가 1이라면 return myArray[0] 하나의 요소라도 있으면 return myArray[0] 하나라도 요소를 내놔라. else if myArray.length === 0 길이가 없으면 (비어있는 array 라면) 0을 리턴을 해주는 코드이다.
addFirstAndLast 함수에 주어진 인자 myArray 의 첫번째 element와 마지막 element의 값을 더한 값을 리턴해주세요. 라고 해서 else if (myArray) {
return myArray[0] + myArray[myArray.length-1];
else if 가 myArray와 같다면 첫번째요소와 마지막요소를 더해주어라

profile
프론트엔드 개발자를 꿈꾸는 도화지 위를 달리는 여자

0개의 댓글