✍ 공부/JavaScript

[프론트앤드 공부기록] Javascript 기초 1

Po_tta_tt0 2021. 8. 12. 22:07
반응형

코딩 어제시작한 초보

잘못된 부분이 있으면 알려주세요

모든 내용은 유투브 '코딩앙마' 님의 '자바스크립트 100분 완성' 을 들으며 공부한 것

 

기울임꼴은 내 생각

 

 

 

1. 변수



변수는 어떤 정보에 이름을 붙혀 사용하고 싶을 때 이용한다.

name = "Mike";
age = 30;

 Mike라는 정보는 name이라는 이름을 가지고 30이라는 정보는 age라는 이름을 가진다

 

자바스크립트에서 문자는 항상 따옴표로 감싸져야 한다.

  • '
  • "

둘 다 이용 가능.

 

※ 그러나 자바스크립트에서 이미 사용하고 있는 것은 변수명으로 사용할 수 없다(예약어_ ex: class)

 

만약 같은 변수에 다른 내용이 선언된다면 마지막에 선언된 내용으로 덮어씌워진다

ex)
name = "Mike";
name = "pottato";

면 pottato로 덮어씌워진다는 소리

 

▶ 이를 방지하기 위해 있는 키워드

  • let
  • const

let 값을 바꾸고 싶으면 다음 위치 마지막 변수에서 let을 빼면 된다(마지막 값으로 선언됨)

그러니까...

let num = 10;

으로 선언했는데 num값을 13으로 바꾸고 싶다면

바꾸고 싶은 위치 다음 변수에서 let을 빼고

num = 13; 으로 하면 된다는 말

 

const는 절대로 바뀌지 않는 상수를 입력할 때 사용. 

const로 선언된 변수를 바꾸려고 하면 에러가 일어남.

대문자로 선언하는게 좋다. 다른 개발자들에게 이게 상수라는 것을 알리기 위해

ex)
const PI = 3.14;
const BIRTH_DAY='1998-03-13';

 

※ 자바스크립트에서 변수를 선언할때 변하지 않는 값은 const, 변할 수 있는 값은 let으로 선언하는게 좋다

뒤에 나오겠지만 일단 const로 다 선언해놓고 바뀌는 값은 let으로 바꾸는것이 좋다고 하심

 

● 변수에 대해

  • 변수는 문자와 숫자 $와 _만 사용한다
  • 첫 글자는 숫자가 될 수 없다
  • 예약어는 사용할 수 없다
  • 상수는 가급적 대문자로
  • 변수명은 읽기 쉽고 이해할 수 있게 선언

 

 

2. 자료형


문자는 3가지 방법으로 포장할 수 있다

  • "
  • '
  • `(백틱) ~을 shift 안쓰고 누르면 나온다

큰따옴표와 작은따옴표는 차이가 없다.

만약 작은따옴표를 문자 안에 사용하고 싶다면 큰따옴표로 감쑤주는게 좋다

"My name is 'potato'"

 

작은따옴표만 사용해서 문자를 묶고 작은따옴표도 넣고 싶으면

/이거말고... 역슬래쉬를 앞에 넣어준다

왜 여기서는 안써지지

일단 / 로 작성

'My name is /'potato'"

이렇게

 

백틱(`)은 문자 내부의 변수를 사용할 때 편리하다

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

만약 이 const message3값을 보고싶으면

console.log(message3);

을 넣으면

나올 것이다.

 

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

이렇게

 

+

typeof연산자는 변수의 자료형을 알아낼 수 있다

 

3. 대화상자


  • alert : 알려줌
  • prompt : 입력 받음
  • confirm : 확인 받음
  • alert() 메세지를 띄우고 사용자가 확인버튼을 누를 때 까지 띄워놓는다
  • prompt() 사용자에게 값을 입력받을 때 사용된다

ex)

사용예시

const name = prompt('이름을 입력하세요.');
alert("환영합니다, " +name+ "님."); // 이 부분을 alert(`환영합니다, ${name}님.`)으로도 쓸 수 있을 것.

 

prompt는 두 개의 인수(함수 안의 값)을 가질 수 있다

prompt("예약일을 입력하세요." , "2020-11")

뒤는 디폴트값(뭔가를 안내하거나 힌트를 주기에 유용하다.)

이렇게 뜸

 

confirm은 확인을 받을 때 자주 쓰인다

ex)
const isAdult = confilm("당신은 성인 입니까?");
한번 더 확인할 때 const realDelete = confirm("정말로 삭제하시겠습니까?");

 

단점

  • 스크립트가 일시 정지하고 누를때마다 확인을 받아야 한다
  • 스타일링이 불가하고 브라우저마다 모양이 다르다

 

4. 형변환


  • String() 문자형으로 변환
  • Number() 숫자형으로 변환
  • Boolean() 불린형으로 변환

※ prompt 입력은 문자형이다

숫자형이 아니더라도(문자형이더라도) 나누기같은 표현식은 나눠짐

const noMatter = prompt("아무거나입력하세요")
console.log(noMatter)

라고 하면 입력한 내용이 뜨는데 

const noMatter = prompt("나누기를해보자")
console.log(noMatter/2)

이렇게 쓰면 입력한숫자/2가 뜸.

 

prompt는 문자형이지만 나누기같은 표현식은 나눠진다는 것을 알 수 있다.

※ 입력란에는 6/3을 써도 2가 뜨지 않고 "6/3"이 결과로 도출됨

 

  • 자동형변환 : 숫자형이 아니더라도 나누기 등의 표현식은 나누어지는 것
  • 명시적형변환 : 자동형변환에 의한 에러는 찾기 힘들기 때문에 애초에 형을 맞춰주는게 좋다

 

※ 불린형변환

false만 알아두기

  • 숫자, 0, 빈 문자열 "", null, undefinde, NaN
  • 이 외에는 모두 true

 

 

  • 주의사항

 

Number(nulll) // 0

숫자가 비어있다는 것(아무 값이 들어있지 않다) = 0이 나옴

 

Number(undefined) // NaN

Not a number. 정의되지 않는 값이나 표현할 수 없는 값. Number 타입의 값.

0을 0으로 나누거나

숫자로 연산할 수 없는 연사자를 이용할 때 나온다

 

** prompt에서 그냥 취소 버튼을 누르면 null이 할당된다

 

Number(0) // false

숫자 0은 false 값을 갖는다

 

Number('0') // true

'문자' 0은 true 값을 갖는다

 

Number("") // false

빈 문자열""은 false 값을 갖는다

 

Number(" ") // true

빈 " "문자열은 true 값을 갖는다. 비어있다는 것 자체가 문자로서의 역할을 하나?

 

 

5. 연산자



  • 더하기 +
  • 빼기 -
  • 곱하기 *
  • 나누기 /
  • 나머지 %
  • 거듭제곱 **
1. let num = 10;
2. num = num + 5;
3. num += 5

여기서 2번과 3번은 같은 말이다. 이 + 자리에 다른 연산자가 들어가도 된다

3. num은 자기자신에 5를 더하는 값을 num이라고 본다

 

 

● 증가연산자, 감소연산자

 

let num = 10;
let result = num++
console.log(result);

이렇게 코딩하게 되면 결과는 10이 나온다.

그 이유는 num 다음에 증가연산자가 들어갔기 때문

값을 11로 나오게 하고 싶으면

 

let num=10;
let result = ++num
console.log(result);

++num으로 바꿔야 한다.

 

 

 

일단 여기까지

처음에는 무슨소리인가 했는데 쑥쑥 이해된다

 

 

 

 

 

 

반응형