JavaScript의 정의

웹페이지의 구조를 정의하는것은 HTML입니다. 그런데 HTML만 있다고 해서 웹페이지가 돌아가지는 않지요. 만약 텍스트만 가득한 하나의 페이지만 괜찮지만, 우리가 알고있는 거의 모든 페이지에는 JavaScript 코드가 들어가 있습니다.
JavaScript는 웹 페이지와 상호작용하도록 만들어진 언어입니다.
프론트앤드 개발자의 역할이 여러 가지 있겠지만, 가장 큰 역할은 JavaScript를 사용하여 웹페이지를 다이나믹하고 인터렉티브하게 만드는 일입니다.

---

Variables(변수)

1. 변수의 생성

다양한 값(value)를 각각의 변수에 저장합니다.

• 제 이름은 성정민 입니다.

라는 문장을 봅시다. "이름"과 같은 역할을 하는것을 변수라고 하며 "성정민"과 같은 값은 value(값)이라고 합니다.
변수선언은 변수 이름 앞에 var, let, const라고 쓰고 값을 할당해주면 됩니다.

<script>
   let name = "성정민";
</script>

2. 변수 값 수정

변수를 생성할 때 값을 저장하고, 이후에 값을 수정할 수 있습니다.
값을 수정할 때는 변수 앞에 적어주었던 var, let, const를 빼야만 수정 가능합니다.

<script>
   let name = "성정민"; //변수 생성
   name = "김봉팔";     //변수 수정
</script>

❗️ TIP

• 같은 변수 이름을 중복해서 생성하면 안 됩니다!
• 변수를 선언만 하고 할당은 그 후에도 할 수 있습니다

<script>
   let name;
   name = "성정민";
</script>

• 변수가 아닌 값은 얼마든지 중복 가능합니다.
• const 키워드로 선언한 변수는 값을 바꿀 수 없습니다.

---

Function(함수)

1. 함수의 정의

함수란? 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록입니다.

2. 함수의 호출

변수가 이름이 있듯이, 함수도 이름이 있습니다.
누군가가 여러분을 부르면 뒤돌아보겠죠? 함수도 마찬가지로 불러줄 때까지 기다리고 있다가 호출하면 반응합니다. 이것을 앞으로 "함수를 호출한다"라고 표현하겠습니다.

<script>
function sayHi(){ // 함수를 생성
   let hi = "안녕하세요";
   return hi;
}
sayHi(); // 이름을 불러 호출할 수 있습니다.
</script>

3. 함수의 형태

4. 함수의 데이터 반환하기(return)

모든 함수는 반환(return)을 합니다.
하긴 하는데, return을 생략할 수도 있습니다.

함수 내부에 return 키워드가 보이지 않으면 반환을 생략했다는 말입니다.
이렇게 반환을 생략하면 undefined라는 값을 반환합니다.

함수를 호출하여 반환한 값을 저장할 수 있습니다.

<script>
console.log('======== 파라미터가 없는 함수 ========')
function noParameter() {
  return 10;
}
console.log(noParameter());    // 함수를 호출한 것을 바로 확인할 수도 있고
const result4 = noParameter(); // 변수에 담아서도 확인 가능합니다
console.log(result4);
</script>

• 이와같이 변수에 저장할 수도 있고, 다른 로직에 사용할 수도 있습니다.

❗️ 주의사항

• 함수 내부에서 인자로 받은 변수에 새로운 값을 넣으면 안된다.

<script>
function alertSuccess(name){
   let name="성정민";
   alert(name + "님 로그인 성공");
}
//위와 같이 함수 내부에서 인자로 받은 변수(name)에 새로운 값("성정민")을 넣으면 안됩니다.
//인자(parameter)에 실제로 어떤 데이터가 전달될지는 호출할 때 결정하는 것입니다. 아래를 확인해주세요

alertSuccess("김두팔") // 인자 전달은 호출할 때 결정하는 것
</script>

5. 매개변수(parameter)와 인자(argument)

위에서는 return 키워드를 통해 함수를 호출할 때 데이터를 "반환" 하는 법을 배운 것입니다.
이제는 함수가 실행될 때 데이터를 "받는" 법을 배우려고 합니다.

(1) 매개변수란

매개변수(媒介變數), 파라미터(parameter), 모수(母數)
매개(媒介) 란? :
1. 둘 사이에서 양편의 관계를 맺어 줌.
2. <논리> 서로 떨어져 있는 두 명사 사이에서 두 명사의 관계를 맺어 주는 중간 항의 명사를 부여하는 작용.
3. <철학> 헤겔의 변증법에서, 어떤 사물이 존재할 조건이 되는 일. 모든 사물이 따로 독립하여 존재하는 것이 아니고 타자(他者)와의 관계 속에서 존재한다고 보았다.

함수를 정의하면서, 함수 선언식의 괄호'( )' 안에 어떤 변수명을 쓰면, 우리는 그것을 매개변수라고 부릅니다.
매개변수는 그 이름처럼 실제로 함수 안쪽에서 변수와 같은 역할을 하게 됩니다.

함수가 호출될 때, 값을 전달받게 되면, 매개변수에 값이 정의됩니다.

(2) 인자란

어떤 함수를 호출하면서, 호출문의 괄호 안에 어떤 값 또는 값이 정의된 변수를 쓰면, 그것을 인자라고 부릅니다.
함수에서 매개변수를 적어둔 상태라면, 호출 시 인자로 전달한 값은 매개변수를 통해 사용 가능하게 됩니다.

함수에 인수가 한 개가 아니라 여러개 전달할 수 있습니다.

<script>
console.log('======== 파라미터를 받는 함수 ========')
function getName(name) {  //()안에 들어간 것을 입력하면 함수에 데이터를 받는다는 뜻
                          //이를 매개변수, parameter라고 합니다.
  return name + '님';     //getName()함수에서 파라미터를 "name"으로 설정
}
const result1 = getName('개발자');   // 값을 보내서 호출, 다른 값을 보낼 수 있습니다.
const result2 = getName('디자이너'); // 이러한 것을 인자 즉 'argument'라고 합니다.
const result3 = getName('기획자');
console.log(result1)
console.log(result2)
console.log(result3)
</script>

• 함수는 입력받은 정보에 따라 다르게 실행되도록 만들 수 있습니다.
  또한 입력받은 정보를 가공해서 리턴하도록 만들 수도 있습니다.

6. 함수 내부에서 다른 함수 호출하기

<script>
function getTax(price) { // 세금을 계산하는 함수
  return price * 0.1;
}
function calculateTotal(price) { //가격+세금을 계산하는 함수
  return price + getTax(price);
}
//assignment
function getTotal(price1, price2) { 
  //매개변수를 2개받고 calcutateTotal함수를 사용해 더해줌
  return calculateTotal(price1) + calculateTotal(price2);
}
getTotal(200,300)
</script>

---

생소한 수학표현

1. ++, --

<script>
let num = 1;
num++;
console.log(num)  // 2
</script>

• num++의 의미는 num = num+1과 같습니다.
  변수의 값에 1을 더하는 기능을 훨씬 더 간략한 코드로 구현해주는 기능릏 합니다.
• ++대신에 --를 쓰면 1을 뺄 수 있습니다
  num--;

이러한 표현식은 변수에 값을 할당할 때도 사용할 수 있습니다.

<script>
let num = 1;
let newNum = num++;
console.log(num);    //2
console.log(newNum); //1
</script>

위의 한줄짜리 코드에서 일어나는 과정을 스텝별로 보면
1. newNum 변수에 num변수를 할당해서 newNum에 1이 할당 되었고,
2. 그 후 num++가 실행되어 변수 num이 2가 되었습니다.

위의 스탭을 풀어서 작성하면 아래와 같습니다.

<script>
let num = 1;
let newNum = num;
num++;
</script>

---

독특한 비교 연산자

비교연산자가 있을 때는 비교연산자 기준으로 왼쪽/오른쪽 나눠서 코드를 실행하게 됩니다.

비교 연산자	설명
== (동등 연산자)	두 피연산자의 자료형이 같지 않아도 같아지도록 변환한 후, 엄격 비교를 수행합니다. 피연산자들이 모두 객체라면, 내부 참조를 보고, 둘 다 메모리의 같은 객체를 바라보는지 판별합니다.
!= (부등 연산자)	피연사자의 자료형이 같지 않아도 같아지도록 변환한 후, 두 피연산자가 같지 않을 경우 참을 반환합니다. 피연산자들이 모두 객체라면, 내부 참조를 보고, 둘 다 메모리의 같은 객체를 바라보는지 판별합니다.
=== (일치 연산자)	두 연산자가 엄격히 같은지 자료형 까지 판별합니다.
!== (불일치 연산자)	두 연산자가 같지 않거나, 같은 자료형이 아닐 때 참을 반환합니다.

---

Array(배열)

몇 천개의 정보를 얻어야 할 때...

let kospi_20200429 = 2029.23;
let kospi_20200430 = 2329.3;
let kospi_20200501 = 2029.23;
.
.
.

1. 배열을 왜 쓰나요?

이렇게 구현하려면 어마어마한 양의 변수가 필요합니다.

이런 경우를 위해 배열이 있습니다! 배열을 사용하면 몇 천개의 변수를 생성하지 않고 하나의 변수에 모든 데이터를 갖고 있을 수 있습니다.
배열은 [ ] 대괄호로 감싸져 있습니다.
자 그러면 배열을 만들어볼까요

let anything = ["경기", 1995, ["하나", ["하나하고반", 1.5]"둘", 3]];

2. 배열 유의사항

• "경기", 1995 와 같은 배열의 값, 하나하나를 Element(요소)라고 부릅니다.
• 요소와 요소 사이에는 쉼표로 구분합니다.
• 요소는 어떤 type도 가능합니다 [String, Number, Array, Boolean...]
• 배열의 요소는 순서(index)를 갖고 있습니다
  특징은 1에서부터 시작하는 것이 아니라 0부터 시작한다는 것입니다.

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

배열이름[index]

[1] 위의 배열을 활용해볼까요 anything 변수에서 "하나하고반"을 추출해보세요!

<script>
function getElement(){
   let anything = ["경기", 1995, ["하나", ["하나하고반", 1.5], "둘", 3]];
   return anything[2][1][0]
   //anything배열에서 [2]번째 순서 안에 [1]번째 순서 안에 [0]번째 인덱스
}
getElement()
</script>

[2] addFirstAndLast 함수에 주어진 인자 myArray는 숫자 값으로만 이루어진 array 입니다.
addFirstAndLast 함수에 주어진 인자 myArray 의 첫번째 element와 마지막 element의 값을 더한 값을 리턴해주세요.
만일 myArray에 한 개의 요소만 있다면 해당 요소의 값을 리턴해 주시고 요소가 없는 비어있는 array라면 0을 리턴해주세요.

<script>
function addFirstAndLast(MyArray){ // 매개변수로 숫자배열을 받음
  let result; // 결과를 담을 빈 변수 선언
  if(MyArray.length > 1){
    result = MyArray[0] + MyArray[MyArray.length - 1];
    //result변수에 첫 번째 값과 마지막 값을 담음
    //.length는 1부터 요소의 개수만큼 반환하므로 -1을 한다
  }else if(MyArray.length === 1){
    result = MyArray[0]
  }else{
    result =  0
  }
  return result
}
addFirstAndLast([1, 2, 3, 4, 5, 6, 7, 8, 9]) //인자를 넘김
</script>

3. 배열 조작하기(model solution)

1) 배열 추가와 수정

요소가 없는 빈 배열을 선언해보겠습니다.

let cities = [];

그리고 아래와 같이 요소를 하나씩 추가할 수 있습니다.

cities[0] = "서울";
cities[1] = "대구";
cities[3] = "부산";

그리고 나머지는 건너뛰고 6번째 요소에 "제주도"를 할당해볼까요?

cities[5] = "제주도"

이로써 다음과 같이 총 6개의 요소가 있는 배열이 되었습니다.
아무것도 할당하지 않았기에 undefined라고 출력됩니다.

["서울", "대구", "부산", "undefined", "undefined", "제주도"]

요소를 수정하고 싶을 때는 똑같이

cities[5] = "포항"; 

변수 배열 인덱스를 재정의 해주면 됩니다.

2) 배열 추가 push 함수 / unshift 함수

다른 방법으로도 요소를 추가할 수 있습니다.

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

push, unshift 모두 요소를 추가하는 함수인데 추가되는 위치가 다릅니다.

• push : array의 마지막 부분에 요소를 추가
• unshift : array의 맨 앞 부분에 요소를 추가

3) 배열 요소 삭제 pop 함수

요소를 제거할 수도 있습니다

cities.pop();
console.log(cities)

pop함수를 이용하면 마지막 요소가 제거되고, 마지막 요소의 값을 반환합니다

let lastCity = cities.pop();
console.log(lastCity);

배열 조작 방법 정리

1. index 접근하여 수정이나 추가
2. push, unshift로 추가
3. pop으로 마지막 요소 삭제 및 반환

테스트

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]

<script>
function divideArrayInHalf(arrays){
  let result = [] //결과를 넣을 빈 배열 만들기
  for(let i = arrays.length; i >= 0; i--){  //배열의 길이부터 0까지 역순으로 for루프
    if(arrays[i] <= 10){ 		    //만약 array[i] 가 10보다 작거나 같으면
      result.unshift(arrays[i])		    //result 배열에 '맨 앞'부터 추가해라
    }else if(arrays[i] > 10){		    //만약 array[i]가 10보다 크면
      result.push(arrays[i]) 		    //result 배열에 '맨 뒤'부터 추가해라
    }
  }
  return result
}
divideArrayInHalf([1, 20, 10, 5, 100])
</script>