YouTube [코딩앙마] 자바스크립트 기초 강좌

Youtube로 자바스크립트 기초 배우기
출처 : 코딩앙마_자바스크립트 기초 강좌 : 100분 완성 링크

codepen 강의 실습 프로그램 링크

수업 준비 화면!

📌 변수

변수는 문자, 숫자, $, _만 사용.
첫글자는 숫자가 될 수 없다.
예약어는 사용할 수 없다. ex. let class = "A"; (class : 예약어)
가급적 상수는 대문자로 쓰기. ex. const MAX_SIZE = 99;
변수명은 읽기 쉽고 이해할 수 있게 선언. ex. let a=1;(안좋은 예) ex. let userNumber = 1;(좋은 예)

cf)

alert() : 경고창 띄우는 함수

console.log() : 로그창 띄우는 함수

console.log(a,b); -> ,으로 구분을 해서 여러값을 한번에 찍을 수 있음

/* 좋지 않는 방법! 저 변수 명이 유일하다는 보장이 없으니까! 
만약 다른 개발자가 변수name을 사용하게 되면, 마지막에 선언된 내용으로 덮어씌워지게된다.*/
name = "Mike";

name = "Google";

이를 방지하기 위해 2가지 키워드가 존재 (let, const)

let

아~ 다른 개발자가 name변수를 사용하구 있구나!하고 다른 변수이름을 지정할 수 있다.
let은 한번 선언 후에 다시 바꿀 수 있다. 의도적으로 let을 생략하고 적으면 된다.

let grade = "F";

//1000 lines...

grade = "A+";

const

let : 변수 이름이 사용되고 있는지 확인하기 위해 사용

const : 절대로 바뀌지 않는 상수를 입력할 때 사용, const로 선언된 변수를 바꾸려하면 에러 발생(수정X)
보통 파이, 최대값, 생일 등 바뀌지 않은 값을 입력할 때 사용

📌 자료형

문자형 String

문자 작성시 "", '',`` 사용 가능
특수문자 작성시 \특수문자
!! 문자열 내부에 변수를 포함하고 싶으면 ``사용 !!

const message3 = `My name is ${name}`;

`를 사용하지 않으면 위의 실습처럼 변수명이 그대로 노출됨!

🎈 실습 CODE

const name = "Mike"; // 문자형 String
const age = 30;

const name1 = "Mike";
const name2 = 'Mike';
const name3 = `Mike`;
console.log(name1);
console.log(name2);
console.log(name3);

const message = "I'm a boy.";
const message2 = 'I\'m a boy.';
console.log(message);
console.log(message2);

const message3 = `My name is ${name}`;
console.log(message3);

const message4 = `나는 ${30+1}살 입니다.`;
console.log(message4);

문자형도 +를 사용할 수 있다.
숫자형 + 문자형도 가능이지만, 이런 경우에는 문자형으로 변경됨.

숫자형 Number

만약 숫자를 0으로 나누면? -> Infinity

문자열을 숫자로 나누면? -> NaN(숫자가 아니다)

불린형 Boolean

논리적인 요소를 나타내고, True/False로 구분

null과 undefined

변수를 선언만 하고 아무것도 할당하지 않으면 undefined

변수에 null을 할당한다면, 해당 변수는 존재하지 않는다라고 생각하면 됨.

null은 객체가 아님!

객체형, 심볼형

다음 강의에 다시!

typeof 연산자

변수의 자료형을 알아낼 수 있음!

다른 개발자가 작성한 변수의 자료형을 알아야할 때,api통신을 통해 받아온 데이터를 타입에 따라 다른 형식으로 처리해야할때 많이 사용됨!

📌 대화상자

alert : 무언가를 알려주는 역할 (메세지를 보여줌! 확인버튼을 누르면 창 사라짐)

prompt : 무언가를 입력 받는 역할 (메세지를 보여주고, 어떤 값을 입력받을 수 있는 필드를 제공!)

confirm : 무언가를 확인 받는 역할 (사용자에게 확인을 받기 위한 용도로 사용!)

단점
1. 스크립트 일시 정지
창이 떠 있는 동안 이후 동작에 제한을 받음! 일일이 확인버튼을 눌러서 꺼줘야함
2. 스타일링이 불가능함
위치와 모양을 정할 수 없고, 브라우저마다 모양도 다름

alert()

이 함수가 실행이 되면 메세지가 띄워지게 되고, 사용자가 확인을 누르지 않으면 계속 떠있음. 알려주는 효과.

prompt()

이렇게 사용자가 입력할 수 있게함.

만약 입력을 하지 않고 취소를 누르면? -> null값 출력(아무내용도 없다는 뜻)

prompt()는 default값도 입력할 수 있음! 2개의 인수를 받을 수 있음.
prompt("출력될 메세지","입력받을 default값")
default값이 미리 들어가있으면, 무언가를 안내하거나 힌트를 줄때 유용!

confirm()

무언가를 확인받을때 사용!

확인을 누르면 True출력! (취소를 누르면 False출력!)

이 결과값을 사용해서 이후에 작업을 하면 됨.

📌 형변환(Type Conversion)

첫 문자는 무조건 대문자! (String, Number, Boolean)

prompt창에 수학80점, 영어90점을 입력했는데 console창에 4045가 출력.
잉??왜 이러한 오류가 발생했을까??
prompt에서 입력받은 값은 무조건 문자형!!
그러니 숫자 80점이 아니라 문자 80점으로 입력이 된 것이다!
즉, mathScore+engScore은 80(문자형)+90(문자형)으로 입력되어 8090값이 출력되고,
(mathScore+engScore)/2는 8090/2이기 때문에 4045가 출력된 것이다.
그렇다면 8090도 문자형인데, 왜 나누기2가 동작했던 걸까?
숫자형이 아니더라도, 나누기 같은 표현식은 숫자형으로 자동변환되어 계산된다!

이러한 과정을 자동 형 변환이라고 한다.

자동으로 변환된다고 해서 편리하다고 생각할 수도 있지만, 이러한 작업들은 원인을 찾기 힘든 에러를 발생할 수 있으니
항상 의도를 가지고 원하는 타입으로 변환해주는 것이 좋다!
이러한 과정을 명시적 형 변환이라고 한다.
명시적 형 변환을 할 수 있는 방법은 다음과 같다.

String()

괄호 안의 타입을 문자형으로 바꿔준다. S는 무조건 대문자로!

문자형으로("") 변경되어 console창에 출력된 것을 볼 수 있다.

Number()

괄호 안의 타입을 숫자형으로 바꿔준다. N은 무조건 대문자로!

문자열("1234")이 숫자형(1234)으로 변경되어 console창에 출력된 것을 볼 수 있다.
만약 괄호 안에 숫자가 아닌 문자가 포함되어있다면 어떻게 될까? -> NaN이 출력된다.

신기하게 불린형(true, false)를 숫자형으로 전환하면 true -> 1, false -> 0이 출력된다.

Boolean()

괄호 안의 타입을 불린형으로 바꿔준다. B는 무조건 대문자로!
false의 경우만 기억하면 됨.

이 경우 외에는 모두 true가 반환된다.

! 주의사항 !

Boolean(0) // false
Boolean('0') // true
Boolean('') //false
Boolean(' ') //true

숫자0이거나 빈문자열''일때만 false!

📌 연산자(Operators)

우선순위가 있기 때문에 적절하게 ()를 이용하여 계산해야함.

+=, -=, *=, %=

아래와 같이 같은 값이더라도 연산자를 줄여서 쓸 수 있음.

+=,-=,*=,%=로 줄여서 쓸 수 있다.

증가연산자 ++, 감소연산자 --

값을 1만큼 증가 또는 감소시킨다.

++, --를 어디에 쓰느냐에 따라 차이가 있다.

++를 뒤에 쓰자 값에 변함이 없었다. 뒤에 쓰면 증가시키기 전의 값을 result에 넣기 때문에 값이 변경되지 않는다.

++를 앞에 쓰자 값이 증가했다. 앞에 쓰면 증가시킨 값을 result에 넣는다.

📌 비교 연산자

== 동등연산자 : 타입은 비교 안함
=== 일치연산자 : 동등연산자보다 타입까지 비교해주기 때문에 많이 사용

📌 조건문

if문

Q ) 성인인 경우 '환영합니다'를, 아닌 경우 '안녕히가세요'를 보여주세요.

방법1.
const age=30;

if(age>19){
  console.log('환영합니다.');
}
if(age=<19){
  console.log('안녕히가세요.');
}
방법2. (방법1에 비해 더 간단!👍)
const age=30;

if(age>19){
  console.log('환영합니다.');
}else{
  console.log('안녕히가세요.');
}
심화버전
19살인 경우, '수능 잘 치세요.'라는 문구를 보여주세요.
const age=19;

if(age>19){
  console.log("환영합니다.");
}else if(age===19){
  console.log("수능 잘 치세요.");
}else{
  console.log("안녕히가세요.");
}

📌 논리 연산자

OR

a||b : a나 b 중 하나라도 true가 있으면 => true

🎈 실습 CODE
Q) 이름이 TOM이거나, 성인이면 통과하는 코드를 작성하세요.

const name="Dayhun";
const age=20;
>
if(name==="TOM"||age>19){
  console.log("통과입니다.");
}

AND

a&&b : a와 b 모두 true이면 => true

🎈 실습 CODE
Q) 이름이 TOM이고, 성인이면 통과하고 그 외는 통과하지 못하는 코드를 작성하세요.

const name="TOM";
const age=20;
>
if(name==="TOM"&&age>19){
  console.log("통과입니다.");
}else{
  console.log("통과하지 못합니다.");
}

NOT

!a : a가 false이면 => true

🎈 실습 CODE
Q) 나이를 입력받아, 성인이 아니면 통과하지 못하는 코드를 작성하세요.

방법1.

const age = prompt("나이를 입력하세요.");

if(age>19){
  console.log("통과입니다.");
}else{
  console.log("통과하지 못합니다.");
}

방법2. NOT 논리연산자 사용

const age = prompt('나이를 입력하세요.');
const isAdult = age>19;

if(!isAdult){
  console.log('통과하지 못합니다.');
}

꿀팁!

첫번째 평가에서 93%를 줄일 수 있기 때문에 성능 최적화에 도움이 된다.

비교 연산자에도 우선순위가 있다!
AND > OR

🎈 실습 CODE
Q) 남자이고, 이름이 Mike이거나 성인이면 통과

ex) 오류답안
const gender = 'F'; //남자아님
const name = 'Dayhun'; //Mike아님
const isAdult = true; //성인임

if(gender==='M'&&name==='Mike'||isAdult){
  console.log('통과입니다.');
}else{
  console.log('통과하지 못합니다.');
}
만족하지 않는데 왜 통과할까?
AND가 OR보다 우선순위가 높아서 먼저 평가되기 때문!
gender==='M' && name==='Mike' || isAdult이 중에서
gender==='M' && name==='Mike'이 부분이 가장 먼저 평가되고, 이후에 || isAdult가 평가된다.
즉, if((gender==='M'&&name==='Mike')||isAdult)를 한 결과이다.
우리는 남자이고, 이름이 Mike이거나 성인이면 통과이기 때문에,
if(gender==='M'&&(name==='Mike'||isAdult))라고 써야한다.

ex) 정답답안
const gender = 'F'; //남자아님
const name = 'Dayhun'; //Mike아님
const isAdult = true; //성인임

if(gender==='M'&&(name==='Mike'||isAdult)){
  console.log('통과입니다.');
}else{
  console.log('통과하지 못합니다.');
}

📌 반복문 loop

: 동일한 작업을 여러번 반복

for

가장 많이 사용하는 반복문이다.
for문은 ;으로 구분하며, 3부분으로 나눌 수 있다.
첫번째 부분은 초기값으로 설정한다. 반복문에 진입할때 처음 한번만 실행된다.
두번째 부분은 조건을 적는다. 반복문이 돌면서 조건문을 확인하고, false가 되면 멈춘다.
세번째 부분은 반복문 한번 실행된 후 해야 할 작업을 명시한다.

i가 최초에 0이고 (let i=0), i가 10보다 작으므로, 코드(i값 1 증가)를 실행한다.
i가 1이 되었고, i가 여전히 10보다 작으므로, 코드(i값 1 증가)를 또 실행한다.
i가 2가 되었고, ..........반복.............

즉,
1. 초기값을 지정하고 (괄호 안의 첫번째 부분)
2. 조건(괄호 안의 두번째 부분)이 true이면
3. 코드를 실행하고
4. 괄호 안의 세번째 부분의 작업을 실행한다.
5. 또 조건을 확인하고
6. 코드를 실행하고
7. 괄호 안의 세번째 부분의 작업을 실행한다.
8. 조건(괄호 안의 두번째 부분)이 false이면
9. 반복문을 빠져나온다.

🎈 실습 CODE

시도 1
시도 2
시도 3
시도 4

while

while 다음 괄호에 조건문(i<10)을 입력한다.
조건에 해당되면 코드를 실행한다.(i++)

🎈 실습 CODE

최초의 i는 0.
10보다 작다는 조건을 만족함으로, 코드를 실행한다. (console.log(i))
코드 실행을 마치면 i를 1 증가시킨 후 (i++)
다시 조건을 확인 한 후, 반복해서 실행한다.
반복하다가 i가 10이 되면, 반복문을 빠져나오게 된다.

do..while

while과 비슷한데, 조건문을 아래로 옮길 수 있다.

i<10이면, do내부의 코드를 실행하는 방식이라 크게 다르지 않다.
그렇다면 어떤 차이가 있는 걸까??

do..while의 코드 실행 순서를 보면,
1. 일단 코드를 실행하고
2. 조건을 체크하고 있다.
즉, 적어도 한번은 실행한다는게 while과 큰 차이이다.

반복문을 빠져나가는 기능은 다음과 같다.

break
: 만나는 순간, 즉시 코드실행을 멈추고 해당 반복문을 빠져나온다.
continue
: 코드실행을 멈추는 것까지는 동일하지만, 반복문을 빠져나오지는 않고 다음 반복으로 점프한다.

🎈 실습 CODE

break

참고로 while(true)는 무한 반복되니 조심히 사용해야한다. 이 코드는 break를 만날때까지 계속 반복한다. break문을 만나려면 answer가 false가 되어야한다.(!answer)
'계속할까요?'를 물어보고 확인을 누르면(true) 계속 반복하고, 취소를 누르면(false) answer에 false가 들어가기 때문에 break문을 만나게 되면서 반복이 끝나게 된다.
이처럼 무한 반복문은 특정 조건이 되었을때 break를 해주는 것이 매우 중요하다.

continue

최초의 i는 0.
0을 2로 나누면, 나머지가 0이기 때문에 continue문을 만나지 못하고, console.log(i)를 찍는다.
1로 증가가 되었고(i++)
1을 2로 나누면, 나머지가 1이기 때문에 continue문을 만나게 된다. 그러면 console.log를 찍지 않고, 바로 다음 작업으로 점프한다.(i++)
이 과정을 반복하고, 짝수만 남게된다.

명확한 횟수가 정해져 있으면 for문을, 정해져 있지 않으면 while을 사용!
그에 비해 do..while은 거의 사용안하는듯,,?
반복문은 코드를 줄이는데에 꼭 필요하니 익숙해질때까지 코드를 만들어 봐야함!

📌 switch

if..else문으로 작성할 수 있기 때문에, 쓸 줄 알면 굳이 switch문을 쓸 필요 없음.
그렇다면 왜쓰는걸까??
케이스가 많은 경우, 보다 간결하게 쓸 수 있기 때문!!

이렇게 switch와 if else는 동일한 결과를 낼 수 있다.

🎈 실습
Q) 사고싶은 과일(ex.키위)을 입력받고 가격을 알려주는 코드를 작성하세요.

잘못된 코드

키위를 입력했더니 다음과 같은 결과가 나왔다. 왜그럴까?
case는 입력된 fruit를 반환시, 그 이후의 모든 코드를 다 실행하기 때문에 break를 넣어줘야한다.

옳은 코드

만약 메뉴에 없는 과일을 입력하게 되면 어떻게 될까?
아무일도 생기지 않는다. 따라서 제대로 작동이 된건지, 오류가 난건지 사용자는 알지 못하기 때문에
그 외의 선택지에 대한 오류메세지를 남겨주는 것이 좋다. (default사용)

멜론과 수박의 경우 500으로 동일하다. 이때 꿀팁!
케이스를 같이 이어서 쓴 후 동일하게 실행될 코드를 작성하면 된다.

📌 함수(function)

목적 : 코드의 중복을 줄여주기 위함.

정의 방법
함수명 : 자유롭게 지정하면 된다.
매개변수 : 매개변수는 0개일 수도, 1개일 수도, 여러개일 수도있다. 여러개인 경우 ,로 구분하면 된다.
중괄호 내부{ } : 함수의 실행 코드
호출 방법
함수명 뒤에 ( )를 붙여서 사용. 매개변수가 필요하다면 괄호안에 작성하면 된다.

🎈 실습 CODE

매개변수가 없는 경우 예제

매개변수가 있는 경우 예제

함수를 한번 만들어 놓으면, 매개변수를 바꿔가면서 다양하게 대응이 가능하다.
만약, 사용자의 이름을 모르면 어떻게 될까?

name은 undefined로 입력된다. if(undefined)는 false이기 때문에 if내부(msg=Hello,${name})로 들어갈수없다. 따라서 msg는 Hello로 찍힌다.

이름이 있는 경우에는 if내부코드가 실행되기 때문에 위와 같이 출력된다.

다른 표현 방법 1

다른 표현 방법 2

다른 표현 방법 3

msg는 함수밖에서는 사용할 수 없다. 함수 내부에서만 접근할 수 있는 변수를 지역변수 라고 한다.
함수 밖에서 호출하자 에러가 발생하는 것을 볼 수 있다.
msg를 함수 외부에서 사용하고 싶다면, 함수 밖으로 빼줘야한다.

전역 변수 예제

함수 호출 전에 msg는 hello.함수 내부에서 바뀐 후 msg에 저장되기 때문에, 함수 외부 호출 후에도 동일한 값을 보인다. 이렇게 함수 밖에서도 접근이 가능해졌다. 이렇게 어디서나 접근할 수 있는 변수를 전역변수 라고 한다.

우리가 let을 공부할때, 한번 let으로 선언한 변수는 다시 let을 이용해서 선언할 수 없다고 배웠다.
전역 변수와 지역 변수로 구분되어있을땐 어떨까?

전역변수와 지역변수로 구분하여 let을 사용했더니, 서로 영향을 주지 않는 것을 볼 수 있다.

전역변수에 name이 있으니, function의 매개변수가 없어도 될까?
첫번째 호출에 undefined가, 두번째 호출에 "Jane"이 나왔다. 왜그럴까?
매개변수로 받은 값은, 복사 된 후 함수의 지역변수가 되기 때문이다.
전체 서비스에서 공통으로 바라봐야하는 변수를 제외하고는 함수에 특화된 지역변수를 쓰는 습관을 키워야한다.
전역변수가 많아지면 관리가 힘들어짐!

첫번째 호출의 경우, 매개변수가 없기 때문에 undefined가 들어가기 때문에
let newName = name || 'friend';에서 name에 false가 나오게 되고,
|| OR는 마지막 true를 반환하기 때문에 friend를 반환하게 된다.

두번째 호출의 경우, 이름을 반환하게 된다.

default

혹은 기본값을 설정해줄 수 있다. 매개변수에 기본값을 설정해주면 더 간단하게 대응할 수 있다.

name='friend'의 디폴트 값은, name이 없을때만 할당된다.
코드가 깔끔해졌다.

return

어떤 값을 반환하는 함수를 만들고자 할때 사용. 또는 함수를 종료하기 위하여 사용.
return 다음에 나오는 값을 반환.

return이 없는 함수도 항상 undefined를 반환한다.

return문이 있으면 그 즉시 return 다음값을 반환하고 종료하게 된다.
따라서 두번째 alert는 실행되지 않는다.

함수의 꿀팁!

📌 함수 표현식, 화살표 함수

함수 선언문 vs 함수 표현식

함수 선언문과 함수 표현식에는 어떤 차이가 있을까?
답은 호출할 수 있는 타이밍이다!

함수 선언문
: 어디서든 호출이 가능하다.

예를 들어 sayHello();의 호출 위치를

이렇게 변경해도 동작한다.

자바스크립트는 위에서 아래로 한줄한줄 읽으며 실행하는 인터프리터 언어인데, 어떻게 호출하는 코드가 맨 위에 있는데 실행이 될 수 있었던 걸까?

바로 자바스크립트 내부 알고리즘 때문이다!
자바스크립트는 실행 전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해둔다. 즉, 함수를 사용할 수 있는 범위가 넓어지게된다. 이를 호이스팅이라고 한다. 함수 코드의 위치가 실제로 위로 올라간다는 뜻은 아님!

함수 표현식
: 함수를 선언하고, 변수에 할당하는 표현식.
: 함수 선언문과 다르게 어디서든 호출이 동작하지 않는다.
함수 표현식은 자바스크립트가 한줄씩 읽으면서 실행하고, 해당 코드에 도달해서야 비로소 생성된다.그렇기 때문에 그 이후에만 사용할 수 있다.

그래서 뭘 쓰면 될까?
대부분의 상황에서는 어떤걸 쓰든 상관없다! 함수 선언문이 조금 더 자유롭고 편하다.

화살표 함수 (arrow function)

화살표 함수는 지금까지 배웠던 함수를 보다 간결하게 작성할 수 있다.

ex) 일반적인 경우

이런 함수를 화살표 함수로 바꾸면..

🔽

이렇게 바꿀 수 있다. function이라는 단어가 사라지는 대신 괄호 뒤에 화살표가 생긴다.

🔽

코드 부분이 한줄이고, return문이 있기 때문에, 이렇게 바꿀 수 있다. return문은 {}중괄호가 아닌 ()일반괄호로 바꿀 수 있다.

🔽

return문이 한줄이라면 이렇게 괄호를 생략할 수 있다.

ex) 인수가 1개인 경우

인수가 딱 하나라면

🔽

괄호를 생략할 수 있다.

ex) 인수가 없는 경우

괄호를 생략할 수 없다.

또한, return문이 있다해도 return전에 여러줄의 코드가 있을 경우 일반괄호를 사용할 수 없다.

🔽

따라서 이렇게 사용해야한다.

ex. 함수 표현식

사용하기 전에 선언을 안해서 에러 발생함!

ex. 함수 선언문

잘 나오는 것을 볼 수 있음.

ex. 화살표 함수

ex. 화살표 함수로 바꾸는 예제1

ex. 화살표 함수로 바꾸는 예제2

📌 객체 (Object)

객체 생성, 접근, 추가, 삭제

객체는 { }중괄호로 작성하고, 키와 값으로 구성된 구성된 property가 들어간다.
각 property는 ,로 구분한다.

객체에 접근을 하고 싶을 때는, ., [' ']를 사용할 수 있다.
객체에 추가 하고 싶을 때도, ., [' ']를 사용할 수 있다.
삭제는 delet를 사용하면 된다.

단축 프로퍼티

: 단축 프로퍼티를 사용하면 보다 간단하게 객체를 작성할 수 있다.

이 코드를

이렇게 쓸 수 있다.

프로퍼티 존재 여부 확인

만약 존재하지 않는 프로퍼티에 접근하면 어떻게 될까? undefined가 나온다.
이때 in 연산자를 사용하면, 프로퍼티의 존재 여부를 확인할 수 있다.

객체 for..in 반복문

for..in 반복문을 사용하면, 객체를 순회하면서 값을 얻을 수 있다.

key는 superman이 갖고 있는 프로퍼티를 의미한다.

🎈 실습 CODE

객체 생성, 접근

객체 추가

객체 삭제

이름과 나이를 받아 객체로 생성하는 함수를 만들어 보세요.

프로퍼티 존재 여부 확인

나이를 보고 성인을 구분하는 함수가 있을때,

Jane은 age가 없기 때문에 false가 나와야하는데 true가 나옴.. 뭐가 문제일까?

user에 age가 없거나, 20살 미만이면 false를 return한다.

객체 for..in 예제

Mike가 갖고있는 key인 "name"과 "age"가 출력된다.

Mike가 갖고있는 key에 해당하는 값이 출력된다.

📌 객체 - method, this

method

method란, 객체 프로퍼티로 할당된 함수를 말한다. 여기서 fly함수가 superman객체의 method!

fly:function()을 fly()로 줄여쓸 수 있다.

객체와 method의 관계는 어떻게 되는 걸까?

user객체는 sayHello라는 method를 가지고 있다. method log에 객체의 name 프로퍼티를 넣고자 한다. 어떻게 해야할까?

이렇게 하면 되겠지?? 땡!
에러가 발생한다. 이럴때 this를 사용하면 된다.

method 호출시 (user.sayHello();) .앞에 있는 user는 method log의 this에 해당된다.

즉, method log의 this는 호출시 함수의 .앞에 있는 해당 객체를 뜻한다.

만약 화살표함수로 선언하게 되면 동작이 전혀 다르게 된다.

🎈 실습 CODE

boy를 null로 만들면? name도 없어지고 showName도 없어진다. 즉 boy.name이 동작할 수 없다.
따라서 boy.name을 this.name으로 바꾸면 제대로 동작한다.

화살표함수

화살표함수로 바꾸자 error 발생. 화살표 함수로 method를 작성하면 this는 boy를 가르키는게 아니라,
window 전역 객체를 가르키게 된다.
따라서 객체 method를 작성할때는 화살표 함수로 작성하지 않는 것이 좋다.

📌 배열 (Array)

30명의 학생들을 관리하기 위해선 어떻게 해야할까? 한명한명 모두 변수로 만들게 되면 어렵게 된다.
이럴때 배열을 사용할 수 있다.

배열

: 순서가 있는 리스트

배열은 [ ]대괄호안에 ,로 구분하여 작성한다.
배열을 탐색할때는 고유번호인 index를 사용하고 index는 0부터 시작한다.
배열명 뒤에 대괄호와 인덱스를 이용하여 읽을 수 있다.(console.log(students[0]);)
배열의 수정도 대괄호와 인덱스를 이용하면 된다.