자바스크립트 공부 #1

자바스크립트를 조금은 알고 있어야 

프론트 연결을 할 수 있을 것 같으니(는 핑계고 사실 js도 공부해보고 싶었어)

기초 공부 시작

 

내용

1. ;

2. console.log()

3. 변수선언  -   let  /  const

4. 문자형  -  큰따옴표  /  작은따옴표  /  백틱

5. 숫자형  -  사칙연산  /  Infinity  /  NaN  /  Boolean  /  undefined  /  typeof

6. 대화상자  -  alert()  /  prompt()  /  confirm()

7. 형변환  -  String()  /  Number()  /  Boolean()

8. 연산자  -  사칙연산  /  우선순위  /  증감 연산자(++, --)

9. 비교연산자  -  동등연산자(==)  /  일치연산자(===)

10. 조건문  -  if

11. 논리연산자  -  OR ||  /  AND &&  /  NOT !  /  정의  /  평가

12. 반복문  -  for  /  초기값  /  조건식  /  증감식  /  while  /  break, continue

13. switch

14. 함수  -  function  /  지역변수, 전역변수  /  함수선언문  /  함수표현식  /  화살표함수

15. 객체  -  Object  /  접근  /  추가  /  삭제  /  단축프로퍼티  /  존재확인  /  for ... in

16. 메서드  - method  /  this 

17. 배열  -  index  /  length  /  push , pop  /  unshift, shift  /  for ... of

 

 

0. 이런것도 있네

https://codepen.io/pen/

자바스크립트를 입력하고 콘솔창으로 쉽게 확인해서 테스트 해볼 수 있다

---

 

1.

name = "Kinggoddino";
age = 6000;

 

1-1.

세미콜론은 한줄이 끝났다는 뜻.

안적어도 작동은 하지만 꼭 적어주자

 

1-2.

자바스크립트에서 문자열은 꼭 따옴표로 감싸줘야됨.

홑따옴표 겹따옴표 상관없음

 

class = "수업"  //에러발생함

 

1-3.

class 는 자바스크립트에서 이미 사용하는 단어이기 때문에

변수명으로 사용할 수 없음

이런언어들을 Reserved Words (예약언어) 라고 함

 

---

 

2. 함수

 

2-1. alert()

: 경고창을 띄우는 함수

 

2-2. console.log()

: 로그창을 띄우는 함수

파이썬의 print() 역할인 듯

 

---

 

3. 변수

 

다른사람이 똑같은 변수 또 설정해버리면 덮어씌워지게 됨.

 

3-1. let

: 변할 수 있는 값 선언

같은 변수 이름을 재 선언하면 구문오류 뜸. 

그럼 아 이미 사용하고 잇구나 ㅇㅅㅇ 하고 다른 변수를 쓰겟지

 

근데 사실 let 은 한번 선언 후에 다른 값으로 바꿀 수 있다

let grade = "F";

// ... 1000 lines

grade = "A+";

의도적으로 let 을 생략한 후에 선언하면 됨

? 뭐야

 

그래서 사용하는 것이

 

 

3-2. const

: 절대로 바뀌지 않는 상수

 

수정 절대 못함

그래서 파이, 최대값, 생일 등등 바뀌지 않는 값을 입력할 때 사용함

const PI = 3.14;
const SPEED_LIMIT = 50;
const BIRTH_DAY = '2020-01-01';

대문자로 선언하는 게 좋음

다른개발자들에게 이게 상수라는걸 알리기 위함이다.

 

 

3-3. 정리

변수 선언할때

변하지 않는 값은 const,

변할 수 있는 값은 let 으로 선언

 

tip : 모든 변수를 const로 선언한 다음, 나중에 변경될 여지가 있는 변수들만 let으로 바꿔주기

 

- 변수는 문자와 숫자, $와 _만 사용 가능

let _ = 1;
let $ = 3;

 

- 첫글자는 숫자가 될 수 없음

let 1stGrade = "A+";  // 틀린문법

 

- 예약어는 사용할 수 없음

let let = 99;  // 틀린문법

 

- 가급적 상수는 대문자로 알려주기

const MAX_SIZE = 99;

 

- 변수명은 읽기 쉽고 이해할 수 있게 선언

let a = 1;  // 이렇게 하지 마라
let userNumber = 3;  // 굿

 

---

 

4. 문자형

문자형은 세가지 형식으로 작성할 수 있다

let name1 = "Kinggoddino"
let name2 = 'Kinggoddino'
let name3 = `Kinggoddino`

 

 

4-1.

문자열 내부에 작은따옴표가 있는데 굳이굳이 작은따옴표로 감싸고 싶을 때,

역슬래시 넣어주면 특수문자로 인식한다

let message = 'I\'m a boy';

 

 

4-2.

백틱은 문자열 내부에 변수를 표현할 때 사용함 (파이썬에서 f-string 개념인가보다)

${변수명}

let message = `My name is ${변수명}`;
console.log(message)

 

실수로 일반 따옴표를 사용한다면

변수명이 그대로 노출될 수 있으니 주의

 

 

4-3.

변수명 뿐만 아니라 표현식을 넣을 수도 있다.

${표현식}

let message3 = `나는 ${600+50+3}살이다.`;
console.log(message3)

 

---

 

5. 숫자형

5-1.

소수점도 되고 사칙연산도 됨

let age = 30;
const PI = 3.14;

console.log(1 + 3);  // 더하기
console.log(4 - 2);  // 빼기
console.log(3 * 5);  // 곱하기
console.log(6 / 3);  // 나누기
console.log(6 % 4);  // 나머지

사칙연산이 시행되는 순서는 수학이랑 똑같음

ex) 곱셈, 나눗셈이 덧셈, 뺄셈보다 먼저 시행

 

 

5-2. Infinity

0으로 나누면 무한대가 나온다

 

 

5-3. NaN

문자열을 숫자로 나누면 NaN

Not a Number 라는 뜻

 

 

5-4.

참거짓 (Boolean)

파이썬이랑 다른점은 true, false 앞글자가 대문자가 아니다

 

 

5-5.

null 과 undefined

null : 존재하지 않는 값

undefined : 값이 할당되지 않았다 는 뜻

 

 

5-6.

typeof 연산자

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

api 통신로를 통해 받아온 데이터를 type에 따라 다른 방식으로 처리해야할 때 사용함

object 는 객체형 자료형이다.

주의할 점은,

null 은 객체형이 아님.

js 초기의 오류인데 하위호환성을 위해 수정안한다구 함.

 

 

5-7.

문자형끼리도 덧셈 가능

문자형+숫자형도 가능

 

근데 이 경우 숫자형은 문자로 변경되어서 더해진다

 

---

 

6. 대화상자

 

- alert : 알려줌

- prompt : 입력받음

- confirm : 확인받음

 

 

6-1. alert()

알림창이 뜨고, 확인버튼을 누르면 사라짐.

 

언제 쓰냐?

ex) 비밀번호가 틀렸습니다 -> 확인버튼

ex) 로그인해주세요 -> 확인버튼

 

 

6-2. prompt()

사용자에게 입력받을 필드를 제공함

const name = prompt("이름을 입력하세요");
alert("환영합니다" + name + "님")

 

백틱 사용해서도 가능 (파이썬에서 f-string 개념)

const name = prompt("이름을 입력하세요");
//alert("환영합니다" + name + "님")
alert(`안녕하세요, ${name}님. 환영합니다`)

 

아무것도 입력 안할 경우는 null 님을 환영해준다

 

 

prompt() 는 두 개의 인수를 받을 수 있음

인수: 함수 안에 들어가는 값 (파이썬에서 argument 인자인듯)

- 첫번째값 : 메시지

- 두번째값 : 입력받을 디폴트 값

 

언제 쓰냐?

ex) 사용자에게 입력값에 대한 힌트 제공할때

 

 

6-3. confirm()

먼가를 확인받을 때 사용한다

const isAdult = confirm("당신은 성인입니까?");
console.log(isAdult)

alert() 이랑 다르게 '확인' 과 '취소' 버튼이 함께 있다.

- 확인을 누르면 -> true 반환

- 취소를 누르면 -> false 반환

 

언제 쓰냐?

사용자 액션에 대한 확인을 받을 때

ex) 정말 삭제하시겠습니까?

ex) 결제하시겠습니까?

 

 

6-4. 단점

 

- 스크립트가 일시 정지됨 (확인버튼 누를때까지)

- 스타일링이 불가능함 (위치와 모양을 정할 수 없고 브라우저마다 다름)

- 그래서 그냥 html, css 사용해서 직접 만들기도 함

 

---

 

7. 형변환 (Type Conversion)

 

- String() : 문자형으로 변환

- Number() : 숫자형으로 변환

- Boolean() : 불린형으로 변환

 

형변환이 왜 필요하냐?

수학 90점, 영어 80점을 입력했는데 결과가 4540이 뜬다

뭐여

 

이유

 

prompt 로 입력받은 값은 문자형이 되고,

문자형끼리의 덧셈은 그냥 이어붙히는거다.

 

"90" + "80" = "9080"

 

그리고 문자형을 숫자로 나누면,

문자형을 숫자로 바꿔서 계산해준다.

 

"9080" / 2 = 4540

 

미친건가

 

 

이러한 <자동 형변환> 은 알 수 없는 에러를 발생시키기 쉽다.

따라서 항상 의도를 갖고 형변환을 해주는 게 좋다.

 

그걸 <명시적 형변환> 이라고 한다

 

7-1. String()

- 파이썬의 str()

- 괄호안의 자료형을 "문자형"으로 변환해줌

 

 

7-2. Number()

- 파이썬의 int()

- 괄호안의 자료형을 숫자형으로 변환해줌

- 사용자로부터 받은 입력값 문자열을 숫자로 변환해줌

- 근데 이때 문자열 안에 문자가 들어있다면? -> NaN 이 된다.

 

- true 와 false 는 0 과 1 의 값을 가짐

 

- 주의사항

- null 의 숫자형은 0

- undefined 의 숫자형은 NaN

사용자가 prompt() 에서 '취소' 버튼을 누르면 null 이 된다고 했지?

null 이 할당되면 number(null)은 0으로 변환된다

외우고 있자

 

- 주의사항2

- Number(0) -> false

- Number('0') -> true

- Number('') -> false

- Number(' ') -> true

- 이건 파이썬이랑 비슷하네 아스키코드 기억하면 될거같다

 

 

7-3. Boolean()

 

- false의 케이스만 기억하면 된다

- 숫자 0

- 빈 문자열 ""

- null

- undefined

- NaN

- 이거 5개 이외에는 모두 true 반환이라고 생각하자

 

---

 

8. 연산자 (Operators)

 

8-1.

나머지(%) 는 어디에 쓰냐면

- 홀짝 구분할때 (파이썬에서 많이 해본거)

- ex) 어떤값이 들어와도 5를 넘기면 안될때 -> x % 5 = 0~4 사이의 값만 반환

 

8-2. 우선순위

* /   >>>   + -

 

8-3. 줄이기 가능

num = num + 5;

num += 5;

 

8-4. 증가 연산자, 감소 연산자

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

++

--

 

log()에 num 이 아니라 result 를 적어보자

11 이 아니라 10 이 나온다.

 

num++ 

이렇게 뒤쪽에다가 ++를 적으면

증가시키기 전의 값을 result 에 넣기 때문이다

 

의도한대로 하려면 ++를 num 앞에다 적으면 된다

 

---

 

9. 비교 연산자

 

비교 연산자의 반환값은 항상 불린형(true, false 만 반환)

 

a = 3 할당을 의미

a == 3 같은가

a != 3 다른가

 

근데 동등연산자는 이상하게 동작할 때가 있음

문자형이랑 숫자형이랑 비교하는데 같다고 함

 

일치연산자 ===

이렇게 세번 쓰면 자료형의 타입까지 비교를 해준다

 

되도록이면 일치연산자를 쓰자

 

---

 

10. 조건문

 

if

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

 

조건문이 false 일때만 다음 조건문이 실행된다

오예 파이썬이랑 규칙 똑같음

 

---

 

11. 논리 연산자

 

11-1. 종류

3종류 있음

 

OR   >>>>>   ||

AND   >>>>   &&

NOT   >>>>   !

 

 

11-2. 정의

 

OR : 하나라도 true 면 true 임 (모든값이 false 일때만 false)

AND : 모든값이 true 면 true 임 (하나라도 false 면 false)

NOT : true 면 false 고 false 면 true 임 (true 랑 false 값을 반대로 바꿔줌)

 

 

11-3. 평가

 

OR : 첫번째 true를 발견하는 즉시 평가를 멈춤

ex) 이서원은 여자이거나, 일본인이거나, 군인이거나, 어쩌고저쩌고

 

AND : 첫번째 false를 발견하는 즉시 평가를 멈춤

ex) 이서원은 여자이고, 일본인이고, 군인이고, 어쩌고저쩌고

 

성능최적화

데이터의 순서를 조정해서 첫번째 논리에서 많이 걸러낼 수 있는 조건을 배치하는 게 좋음

ex) 군대에서: 여군이고, 시력이 좋고, 운전면허가 있는 사람

 

 

11-4. 예시

prompt() 대화창에서 10을 입력했음

 

 

11-5. 우선순위 주의

1)  && 실행 -> false and true -> false 반환

2)  || 실행 -> false or true -> true 반환

3)  그래서 결과가 true 가 됨

 

의도한대로 해줄려면

괄호로 묶어준다

 

---

 

12. 반복문

 

12-1. for

for (let i = 0; i < 10; i++) {
  //반복할 코드
}

3부분으로 나눠진다

 

- 초기값 : let i = 0

- 조건 : i < 10  (false 가 되면 멈춘다)

- 증감식 : i++  (코드가 한번 돌때마다 실행됨)

 

 

12-2. while

let i = 0;
while (i< 10) {
  //코드
  i++;
}

여기서 i++ 없으면 무한반복에 갇혀서 컴터 다운됨 ㅠ

 

 

12-3. do.. while

let i = 0;
do{
  //코드
  i++;
} while (i < 10)

코드를 먼저 실행한 후 조건을 체크함.

while이랑 차이점 -> 적어도 한번은 코드를 실행하게 된다는 것.

 

 

12-4.break, continue

 

break

: 멈추고 빠져나옴

 

continue

: 멈추고 다음 반복으로 진행

 

break 예시

 

continue 예시

 

 

tip: 명확한 횟수가 정해져있으면 for문, 아니라면 while 사용. do while 은 별로 사용안하는듯

 

---

 

13. switch

 

switch 는 if else 문이랑 아예 똑같다.

그래서 사실 몰라도 된다.

 

쓰는 경우는

케이스가 너무 많이 나눠질 때 쓰면 편하다.

if (평가 == A){
  // A일때 코드
} else if (평가 == B){
  // B일때 코드
}

switch (평가) {
  case A :
    // A일때 코드
    break;
  case B :
    // B일때 코드
    break;
  ...
}

break 안해주면 아래있는 모든 결과가 반환됨

 

switch(fruit){
  case '사과' :
    console.log('100원입니다');
    break;
  case '바나나' :
    console.log('200원입니다');
    break;
  case '멜론' :
  case '수박' :
    console.log('500원입니다');
    break;
  default :
    console.log('그런과일은 없습니다');
}

같은 반환값일 경우 case 를 이어서 작성해 줄 수 있음

모든 경우의 수가 아닐경우 defalut 를 설정해줄 수 있음

 

---

 

14. 함수 (funcion)

 

파이썬의 def 라고 생각하면 될듯

 

14-1.

함수를 만드는 목적은 파이썬이랑 똑같다. 중복을 줄이는 용도.

function sayHello(name){
  console.log(`Hello, ${name}`);
}

- function : 함수라는 뜻

- sayHello : 함수명 (낙타컨벤션인듯)

- name : 매개변수 (콤마로 여러개 쓸 수도 있다)

 

근데 매개변수 없어도 됨. 그냥 코드 모음 

function shwError(){
  alert('에러가 발생했습니다. 다시 시도해주세요');
}

showError();

모든 곳에서 showError() 로 호출가능

유지보수도 쉬워짐. 하나만 수정하면 되니깐.

 

 

14-2. 예시

sayHello()

: 매개변수 없을 경우 undefined 즉, false가 되어 log 가 실행되지 않음

 

sayHello('Spino')

: msg 에 name 이 더해져서 문자열이 출력됨

 

 

 

14-3. 지역변수 전역변수

파이썬이랑 비슷하다

 

- 전역 변수(global variable) : 함수 외부에서 호출

- 지역 변수(local variable) : 함수 내부에서 호출

let msg = "welcome";  // 전역변수
console.log(msg)  

function sayHello(name){
  let msg = "Hello"  // 지역변수
  console.log(msg + ' ' + name);
}

sayHello("Kinggoddino");
console.log(msg)

변수명 똑같은걸로 지역변수를 재선언해도 

원래 있던 전역변수에 영향을 주지 않는다.

 

tip : 함수에 특화된 지역변수를 쓰는 습관을 들이자. 전역변수가 많아지면 관리 힘들어

 

 

 

14-4. default

매개변수가 없을 때의 디폴트 값 설정해 줄 수 있음

 

 

 

14-5. return

반환할 수 있음. 파이썬이랑 똑같아

return 을 만나면 함수가 종료되기 때문에 종료 목적으로 사용되기도 한다

 

사실 return 이 없어도 값이 반환된다.

return 이 없거나,

return; 이렇게 아무것도 안적혀있으면

undefined 가 반환된다

 

tip :

- 함수는 한번에 한 작업에만 집중하는 게 좋다

- 읽기 쉽고 어떤 동작인지 알 수 있도록 네이밍

   ex) showError, getName, createUserData, checkLogin

 

 

14-6. 함수 선언문 vs 함수 표현식

위에서 했던게 함수 선언문이다.

근데 변수에 할당해서 표현식으로도 작성할 수 있다.

let sayHello = function(){
  console.log('Hello');
}

sayHello();

뭔차이지

 

호출하는 타이밍에 차이가 있다

 

 

# 인터프리터 언어 (interpreted language)

자바스크립트는 코드를 위에서 아래로 한줄씩 읽으면서 실행한다.

이렇게 순차적으로 실행되고 즉시 결과를 반환하는 언어를 인터프리터 언어라고 함.

 

# 호이스팅 (hoisting)

자바스크립트 알고리즘

자바스크립트는 실행 전 초기화 단계에서 코드의 모든 함수선언문을 찾아서 생성해둔다.

즉, 함수를 사용할 수 있는 범위가 실제 함수 위치보다 위로 올라간다는 것

이걸 호이스팅 이라고 함.

 

- 함수 선언문 : 어느 위치에서든 호출 가능

- 함수 표현식 : 생성코드 아래에서만 호출 가능

 

tip : 그냥 자유롭게 쓰고싶다면 함수 선언문을 사용하자

 

 

 

14-7. 화살표 함수(arrow function)

먼가 파이썬에 lamda 같은 느낌..

 

예시

function을 지워주고 괄호 뒤에 화살표

// 함수 선언문
showError();
function showError() {
  console.log("error");
}

// 함수 표현식
let showError = () => {
  console.log("error");
}

 

// 함수 표현식
const sayHello = function (name) {
  const msg = `Hello, ${name}`;
  console.log(msg);
};
// 화살표 함수
const sayHello = (name) => {
  const msg = `Hello, ${name}`;
  console.log(msg);
};

 

인수가 2개이고 return 문이 있을때

// 함수 표현식
const add = function (num1, num2) {
  const result = num1 + num2;
  return result;
};
// 화살표 함수
const add = (num1, num2) => num1 + num2;

 

---

 

15. 객체 (Object)

 

15-1. 객체

const dinosaur = {
  name : 'spino',
  age : 23,
}

 

15-2. 접근

dinosaur.name  // 'spino'
dinosaur['age']  // 23

 

15-3. 추가

dinosaur.gender = 'male';
dinosaur['hairColor'] = 'black';

 

15-4. 삭제

delete dinosaur.hairColor;

 

15-5. 단축 프로퍼티

const dinosaur = {
  name,  // name:name
  age,   // age:age
  gender:'male',
}

 

15-6. 프로퍼티 존재 여부 확인

dinosaur.birthDay;       // undefined
'birthDay' in dinosaur:  // false
'age' in dinosaur:       // true

언제씀?

어떤 값이 넘어올 지 확신할 수 없을 때 사용.

ex) 함수 인자를 받거나, api 통신을 통해 데이터를 받을 때

 

15-7. for ... in 반복문

for(let key in dinosaur){
  console.log(key)
  console.log(dinosaur[key])
}

 

15-8.

접근

 

추가

 

삭제

 

프로퍼티 받아서 만들기

 

객체의 나이를 확인해서 20보다 작을 경우 -> false 를 반환하는 함수

근데 문제가 잇다

객체게 나이가 없을 경우 undefined 가 되어서 if 안의 조건문이 false 가 되고

그 결과 if 가 실행되지 않고 건너뛰어서 true 가 반환되고 있음

이렇게 고쳐주면 된다

 

for ... in

 

---

 

16. method

 

16-1.

method

: 객체 프로퍼티로 할당된 함수

 

객체에 함수를 추가하기

fly 라는 메서드를 객체 dinosaur 에 추가할 수 있다

const dinosaur = {
  name : 'spino',
  age : 23,
  fly : function(){        // fly(){ 단축가능
    console.log("날아감")
  }

 

 

16-2.

this

: 함수를 호출하는 객체

const user = {
  name : 'Spino',
  sayHello : function(){
    console.log(`Hello, I'm ${this.name}`);  // user.name X
  }
}

user.sayHello();

를 호출하면 user 가 this 자리에 들어가게 된다.

 

하지만 화살표 함수의 경우,

일반 함수와는 달리 자신만의 this 를 갖지 않는다.

화살표 함수 내부에서 this를 사용하면, 그 this 는 외부에서 값을 가져온다.

let boy = {
  name : "Stego",
  sayHello : () => {
    console.log(this);  // this가 전역객체를 가르킴
  }
}

즉, 전역객체를 this 의 값으로 갖고 오는데, 전역객체는

- 브라우저 환경에서 : window

- Node js : global

을 의미한다.

 

this 를 언제 쓰냐면

여기서 boy를 null 로 할당하는 순간

boy의 프로퍼티인 name, showName도 함께 사라지는데,

 

this 를 사용해주면 boy가 아니라 해당객체를 가르키게 되므로 정상작동한다.

 

tip : 객체의 method를 작성할 때는

1) 객체명을 직접 쓰는 것보다는 this 를 활용해주는 것이 좋다

2) this 로 객체에 접근한다면 화살표함수를 사용하지 않는 것이 좋다

 

---

 

17. 배열(Array)

 

순서가 있는 리스트

 

17-1.

let dinosaur = ['spino', 'tyranno', ... , 'allo'];

 

17-2.

index 로 접근 가능

console.log[0] = 'stego';
console.log(dinosaur[0]);  // stego

 

17-3.

배열은 문자 뿐만 아니라숫자, 객체, 함수, 불린 등 전부 포함할 수 있음

let arr = [
  'spino',  //문자
  3,  //숫자
  false,  //불린
  {age:'23', gender:'male'},  //객체
  function(){  //함수
    console.log('TEST');
  }
];

 

17-4. 

length : 길이

배열이 갖고있는 요소의 갯수를 반환

dinosaur.length //60

 

17-5.

push() : 배열 끝에 요소 추가

let days = ['월', '화', '수'];
days.push('목')
console.log(days)  // ['월', '화', '수', '목']

 

pop() : 배열 끝 요소 제거

let days = ['월', '화', '수'];
days.pop()
console.log(days)  // ['월', '화']

 

17-6.

unshift() : 배열 맨 앞에 요소 추가

shift() : 배열 맨 앞 요소 제거

 

push() 와 unshift() : 요소를 추가할 때 여러개 한번에도 가능하다

 

 

17-7.

for

배열을 사용하는 가장 큰 이유는 반복문을 돌리기 위해서임

let days = ['월', '화', '수'];

for(let index = 0; index < days.length; index++){
  console.log(days[index])
}

 

for ... of

in 말고 of 로 기억하자 (파이썬에서 for ... in 이랑 비슷한거같다)

let days = ['월', '화', '수'];

for(let day of days){
  console.log(day)
}

 

---