11. Function(함수) - 데이터 받기

아래는 alertSuccess 이름을 가진 함수의 정의이다. 로그인이 잘 됐으면, "로그인 성공!"이라는 alert를 띄우는 함수이다.

function alertSuccess() {
alert("로그인 성공!");

함수는 정의했지만, alert가 실행되지 않았다. 그 이유는!? 함수의 내부는 함수가 호출되기 전까지 실행되지 않기 때문이다. 호출하려면 함수의 이름과 ()소괄호를 사용하여 이름을 불러야 한다.

alertSuccess();

를 불러야 alert 창이 나타난다.
alert창에 나오는 메세지를 매번 변화시키고 싶으면 함수를 호출할 때 데이터를 전달하여 전달받은 데이터를 사용하면 된다.

function alertSuccess(msg) {
alert(msg);}
alertSuccess("김개발님 로그인 성공!");

function alertSuccess(name) {
alert(name + "님 로그인 성공!");
alertSuccess("김워크");

Assignment

1. 데이터를 전달 받는 isbiggerThanHundred 이라는 이름의 함수를 만들어주세요.
2. isbiggerThanHundred 함수에서 받은 argument를 myNumber라는 parameter에 저장해주세요.
3. isbiggerThanHundred 함수에서

• myNumber가 100보다 크면 "크다!"라는 문자열을 return 해주세요.
• myNumber가 100보다 작거나 같으면 "작다!"라는 문자열을 return 해주세요.

function isbiggerThanHundred(myNumber) {
  if (myNumber > 100) {
    return "크다!";
  } else {
    return "작다!";
  }
}

12. Function(함수) - parameter, argument

매개 변수(parameter)이란?
매개 변수는 함수를 정의하면서, 함수 선언식의 괄호()안에 어떤 변수명을 쓰는 것을 말한다. 매개 변수는 함수 안쪽에서 변수와 같은 역할을 하게 된다. 함수가 호출될 때 값을 전달받게 되면 매개 변수에 값이 정의된다.
인자(argument)란?
어떤 함수를 호출하면서 호출문의 괄호 안에 어떤 값이 정의된 변수를 쓰면, 그걸 인자라고 부른다. 함수에서 매개변수를 적어둔 상태라면, 호출시 인자로 전달한 값은 매개변수를 통해 사용 가능해진다.

function doubleNumber(myNumber) {
let myResult = myNumber * 2 <- myNumber은 매개 변수
return my Result
}
doubleNumber(3); <- 3은 인자

let someNumber = 42
doubleNumber(someNumber);

Assignment

✔️ Assignment 1

함수 halfNumber 를 선언하고 구현하세요.
1. 숫자로 된 인자 하나를 받습니다. <- 실제로 여기서 인자를 받는 것은 아님
2. 받은 값을 2로 나눈 결과를 리턴합니다.
3. 매개변수 이름은 마음대로 정해서 사용합니다.

function halfNumber(num){
return num /2;
}

✔️ Assignment 2

함수 halfAndAddNumber를 선언하고 구현하세요.
1. 숫자로 된 인자 하나를 받습니다. <- 1번과 같이 실제로 인자값을 받는 것이 아니라 매개변수를 num으로 설정해준다.
2. 1번 문제에서 만들었던 halfNumber를 호출하면서, 인자로 받았던 값을 다시 halfNumber 함수에 전달해줍니다.
3. halfNumber의 리턴결과를 함수 안쪽에서 변수명 result에 정의합니다.
4. result에 1을 더한 값을 리턴합니다.

function halfAndAddNumber(num){
let result = halfNumber(num);
return result +1;}

13. Function(함수) - 여러 인자

함수에 인자가 한 개가 아닌 여러개를 전달 할 수 있다.

function alertSuccess(month, name) {
alert(month + "월의 당첨자는 " + name + "입니다.");
alertSuccess(3, "김개발");

Assignment

• meetAt 함수를 만들어주세요.
• 인자를 세개 받습니다.
  1. 첫번째 인자는 년도에 해당하는 숫자입니다.
  2. 두번째 인자는 월에 해당하는 숫자입니다.
  3. 세번째 인자는 일에 해당하는 숫자입니다.
• 년도 인자만 받았을 경우 → "1234년" 과 같은 형식의 문자열을 리턴 해주세요.
• 년도,월 인자를 받았을 경우 → 년도와 월을 조합해서 "1234년 5월" 과 같은 형식의 문자열을 리턴 해주세요.
• 년도,월,일 인자를 전부 받았을 경우 → 년도,월,일을 조합해서 "1234/5/6" 과 같은 형식의 문자열을 리턴 해주세요.

meetAt(2022); // 결과 --> "2022년"
meetAt(2032, 3); // 결과 --> "2032년 3월"
meetAt(1987, 10, 28); // 결과 --> "1987/10/28"

function meetAt (year, month, date) {
  if (year, month, date) return year + "/" + month + "/" + date;
  if (year, month) return year + "년 " + month +"월";
  if (year) return year + "년";
}

❔ 왜 if 조건문 순서를 거꾸로 써야하는지 모르겠었는데! 답은 연도만 있는 경우에는 경우 1,2,3이 전부 첫번째 조건식에 충족되어서 바로 return되어 버리기 때문에 조건식이 가장 많은 것 먼저 쓴다. 그러므로 코드를 짤때는 조건식 순서가 아주 중요하다!🔥🔥🔥

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

return은 함수를 호출했을 때, 함수가 값을 반환한다는 뜻임

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

함수를 호출 할 때는 여러번 호출할 수 있다.

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

함수의 호출 결과 확인
함수의 반환을 변수에 저장해서 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(3));
console.log(multiplyTen(6));
console.log(multiplyTen(12));

return을 생략하면 함수는 undefined를 반환한다.

function consoleSuccess(month, name) {
  console.log(month, name);}
let result = consoleSuccess("3", "김개발");
console.log("consoleSuccess 호출 값은" + result);
-> return을 생략했기 때문에 'consoleSuccess 호출 값은undefined'가 뜬다.

함수 내부에서 다른 함수를 호출할 수도 있다.
calculateTotal 함수 내부에서 getTax를 호출해보자.

function getTax(price) {
  return price * 0.1;}
function calculateTotal(price) {
  return price + getTax(price);}
var result = calculateTotal(3500);
console.log(result);

Assignment

getTotal 함수를 만들어주세요! getTotal 함수는 가격을 2개 받아서 calculateTotal 호출 반환값을 더해서 리턴하는 함수입니다.

• 1. getTotal 이라는 이름의 함수를 만들어주세요. 가격정보 2개를 인자로 받습니다.
• 2. 인자이름은 원하는대로 지어주셔도 됩니다.
• 3. getTotal 함수에서 인자로 받은 가격으로 각각 calculateTotal 함수를 호출해주세요. 그리고 그 결과값을 더해서 반환해주세요.
     참고)
• getTax 함수는 가격의 tax를 구하는 함수입니다.
• calculateTotal 함수는 상품의 가격에 tax를 더한 값을 구하는 함수입니다.
• getTotal 함수는 두 상품의 가격을 더해서 반환하는 함수입니다.

function getTotal(price1, price2){
return calculateTotal(price1) + calculateTotal(price2);}

15. Array

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

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

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

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

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

배열이름[index]

console.log(anything[0]); <- "대전"
console.log(anything[1]); <- 1987
console.log(anything[2]); <- ["하나", "둘", 3]

alert(anything[0]+"에 오신 것을 환영합니다.");

Assignment

#1.

• getElement 함수안에 arr 변수를 선언했습니다. <-선언 = let
• arr 변수는 배열을 할당했고요, 배열에는 다양한 데이터 타입의 요소가 들어있네요!
• 배열이 담긴 arr 변수에 접근하여 getElement 함수가 "array" 라는 문자열을 return 할 수 있도록 해주세요.

function getElement() {
let arr = ["대전", ["array",2], 3] <- let 함수는 =이 필수
return arr[1][0]
}

#2.

• addFirstAndLast 함수 안에 작성해주세요.
• addFirstAndLast 함수에 주어진 인자 myArray는 숫자 값으로만 이루어진 array 입니다.
• addFirstAndLast 함수에 주어진 인자 myArray 의 첫번째 element와 마지막 element의 값을 더한 값을 리턴해주세요.
• 만일 myArray에 한 개의 요소만 있다면 해당 요소의 값을 리턴해 주시고 요소가 없는 비어있는 array라면 0을 리턴해주세요.
• Hint) array의 길이를 구하는 방법은 다음을 참조하세요
  : https://community.wecode.co.kr/t/js-array/200/2

function addFirstAndLast(myArray) {
  let result;
  if (myArray.length > 1) {
    result = myArray[0] + myArray[myArray.length - 1]; <- myArray.length에서 1개 빼주기
  } else if (myArray.length === 1) { <- 1과 같은 건 ===라고 표기하기
    result = myArray[0]; <- result는 =와 함께 쓰기
  } else {
    result = 0;
  }
  return result;
}
                           ```

16. for 문

도시 배열을 살펴보자

let cities = ["서울", "대전", "대구", "부산", "광주", "제주도"];

let home = "서울";
if (cities[0] === home) {
  alert("아, 여기 사시는군요");
} else if (cities[1] === home) {
  alert("아, 여기 사시는군요");
} else if (cities[2] === home) {
  alert("아, 여기 사시는군요");
} else if (cities[3] === home) {
  alert("아, 여기 사시는군요");
}

이렇게 쓰면 도시가 50개일 경우 너무 길어진다.

for (let i = 0; i <= 50; i++) {
if (cities[i] === home) {
  alert("아, 여기 사시는군요");}}

for문을 사용하면 코드를 원하는 만큼 반복시킬 수 있다.
실행 조건에 따라 언제부터 언제까지 반복하게 될 것이라고 알려주기만 하면 된다.

let count =1;
for (let i = 0; i <=5; i++) {
count = count 1;}

for (반복조건) {
//반복조건이 맞으면 실행할 코드
}

• 0부터 5까지 1씩 증가 시키면서 for문의 {}내부를 실행하라는 뜻. i는 1씩 증가하면서 0,1,2,3,4,5까지 증가하고, for문 내부의 코드 총 6번 실행된다. i가 5가 될 때까지 for문의 {} 안을 실행하다가, 6이 되면 i<=5라는 식은 false가 된다. 따라서 {} 내부로 들어가지 못하고, {} 밖으로 벗어나게 된다.
• 조건은 다른데 결과는 똑같은 코드

let count = 1;
for (let i = 0; i <6; i++) {
  count = count + 1;}

• 반복문 내부의 조건문

const home = "대전";
let cities = ["서울", "대전", "대구", "부산", "광주", "제주도"];
for (let i = 0; i <= 5; i++) {
  if(cities[i] === home) {console.log("아, "+cities[i] +" 사시는군요");}}

i가 0일 때는 cities[0]과 home을 비교한다.
"서울" === "대전" 같지 않으므로 if문 {}내부로 들어가지 않게되고 i가 0일때의 for 문은 끝남. 그 다음, i가 1 증가하여 i가 1이 되면, cities[1]과 home을 비교하게 된다.
"대전" === "대전" true 이므로 if문이 실행되었다. 이렇게 i가 5가 될 때까지 if 조건을 확인하며 for문이 실행되고 종료 조건을 만족하며 반복이 마무리된다.
만약 대전이 3번 들어가 있었으면 console.log가 3번 떴을 것임.

for (var i = 2; i <10; i=i+2)
  i는 2부터 시작해서 10보다 작을 때까지. 2씩 증가시키면서 for문을 돌린다. 즉 for문을 총 4번 반복한다. i도 for문을 돌며 계속 변하는 값이다.

for (var i = 10; i > 7; i--)
  i는 10부터 시작해서, 7보다 클때까지 1씩 감소하면서 for문 안의 코드를 실행시키므로 총 3번 for문을 반복한다.

const home = "대전"
let cities = ["서울", "대전", "대구", "부산"];
for (let i = 0; i <=3; i++) {
  if (cities[i] === home) {
    console.log("아, "+cities[i] +" 사시는군요");}}

만약 배열의 길이가 얼마나 되는지 알 수 없다면 length라는 속성을 사용해야 함.

let cities = ["서울", "대전", "대구", "대전", "광주", "대전"];
console.log(cities.length)

for (var i = 0; i < cities.length; i++) {
  if (cities[i] === home) {
    alert("아, 여기 사시는군요");}}

Assignment

• findSmallestElement 함수를 구현해 주세요.
• findSmallestElement 의 arr 인자는 숫자 값으로만 이루어진 array 입니다.
• array 의 값들 중 가장 작은 값을 리턴해주세요.
• 만일 array가 비어있으면 0을 리턴해주세요.
• 예를 들어, 다음과 같은 array이 인자(input)으로 들어왔다면 1이 리턴되어야 합니다.

  [20, 200, 23, 1, 3, 9]

function findSmallestElement(arr) {
  if (arr.length === 0) {
    return 0;
  }
  let result = arr[0];
  for (let i = 1; i < arr.length; i++) {
    if (arr[i] < result) {
      result = arr[i];
    }
  }
  return result ;
}

17. 배열 조작하기

요소가 없는 배열을 선언해보자.

let cities = [];

빈 배열에 아래와 같이 요소를 하나씩 추가할 수 있다.

cities[0] = "서울";
cities[1] = "대전";
cities[2] = "대구";
cities[5] = "제주도";

이렇게 추가하면 4,5번째 요소는 undefined라고 출력된다.
요소를 수정하고 싶을 때는 아래와 같이 하면 된다.

cities[5] = "포항";
console.log(cities[5]);

let cities = [];
cities.push("경주", "전주");
cities.unshift("인천");

push는 array의 마지막 부분, 꼬리에 요소들을 추가함.
unshift는 array의 맨 앞부분, 머리 부분에 요소를 추가함.

let day = ['m', 's', 'w', 't'];
day[1] = 't';
day[4] = 'f';
day[5] = 's';
let month = [1,2,3,4]
month.push(t);

요소를 제거 할 수도 있음.

cities.pop();
console.log(cities)
pop 함수를 사용하면 마지막 요소가 제거되고, 마지막 요소의 값을 반환한다.

Assignment

• divideArrayInHalf 함수를 다음과 같이 구현해주세요.
• divideArrayInHalf 함수의 인자인 array는 숫자 값으로만 구성되어 있으며 정확히 총 5개의 요소(element)로 구성되어 있습니다.
• array의 요소들 중 10과 같거나 작은 값의 element들은 result의 맨 앞으로,
• 10보다 큰 값의 요소들은 result의 맨 뒤로 재구성된 배열을 리턴해주세요.
  중요사항
  이때, 순서는 array의 맨 뒤의 요소 부터 맨 앞의 요소까지 순차적으로 이루어저야 합니다.
  예를 들어, 인자 array 값이 다음과 같을때

[1, 20, 10, 5, 100]

result 배열이 만들어 지는 순서는 다음과 같으며,
[100][5, 100]
[10, 5, 100][10, 5, 100, 20]
[1, 10, 5, 100, 20]
아래와 같은 result가 리턴 되어야 합니다.

[1, 10, 5, 100, 20]

function divideArrayInHalf(arr) {
  let result = [];
  for (i = 4 ; i >= 0 ; i--){
    if(arr[i] <= 10){
      result.unshift(arr[i]);
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}