자바스크립트 기초 문법* part 1 by 드림코딩엘리쌤

자바스크립트 기초 문법* part 1 by 드림코딩엘리쌤

자바스크립트 기초 문법을 드림 코딩 엘리 선생님 덕분에 진짜 확실하게 정리할 수 있게 되었음...

기초부터 제대로 공부하자...

1. 자바스크립트 시작하기

자바스크립트 시작하기 전, 중요하게 설정해주고 가야 할 것들이 있다.

자바스크립트를 어디에 넣느냐에 따라서 효율적인지 아닌지 잡아줄수있는데, 상황에 따라 여러 가지 위치에 넣어서 실행시키지만

head 안에 넣어주는 경우 외부의 js 파일을 불러와서 사용하는 경우에,

Document

이런식으로 파일을 불러온다.

이 경우, defer 이란 값을 넣어주게 되는데 defer 은 웹브라우저의 엔진이 파싱을 모두 끝내고 해당 js 파일을 다운로드하여서

웹브라우저를 실행시켜주기 때문에 중간중간에 파일을 다운받는 sync 보다는 효율적인 동작이 가능하다.

또, 유연하고 빨리 만들어진 자바스크립트는 아무래도 오류나 이런 것들에 위험도가 있기 때문에!

시작 전, 'use strict'; 를 선언해주면 보다 안전한 자바스크립트 언어를 작성할수있다.

2. 변수

variable 읽고 쓰고 선언 할당이 모두 가능한 변수!

이전에는 var 를 주로 변수로 사용했는데!

이제는 쓰지말자... 왜냐면?

var는 선언도 하기 전에 값을 할당하고 , 값을 할당하기 전에 출력하고 이런 오류가 있기 때문이다.

그리고 {} block scpoe 에 개의치 않고 제멋대로이다.

+ 여기서 잠깐 hoisting 호이스팅이란?

: 어디에 선언했는지 상관없이 위로 쭈욱 끌어올려주는 것이다.

ES6 문법부터는 이제 변수는 let!!!!!

let 변수 상자안에 내가 이제 값을 할당해주는 것이다!

이것이 변수의 역할.

그래서 변수 let 을 한번 선언해주고 그다음부터 값을 재할당할 수 있다.

이렇게, 재할당이 가능한 변수를 mutable 한 값이라고 한다.

3. 상수

한번 값을 할당하고 선언하면 이것은 고유하다 꽁꽁얼어버린다!

변하지 않는다 이것은? 상수이다.

immutable 한 상수!!!

상수의 장점은 여러 가지가 있는데, 보안상의 이유로 좋다는 것을 지금은 메... 모

그리고 엘리 선생님의 tip으로 웬만해서는 const로 개발하는 것이 좋다고 한다.

일단 상수로 개발하고 변하는 것을 let으로 변경!...

+

const count = 14 ;

count라는 상수에 14 값으로 할당해주었다.

const size = 1.3 ;

size 상수에 1.3이라는 값을 할당해주었다.

뭐 이런 식으로 숫자 값을 할당해주는 게 기본적이고, 특별한 숫자 타입의 값이 있는데!

const infinity = 1 / 0 ;

숫자를 0으로 나누어 주면 무한한 값이 된다는 infinity 상수!

const negativeInfinity = - 1 / 0 ;

음수를 0으로 나누어주면 부정적인 무한 값!

4. 변수의 데이터 타입들!

1) primitive 한 싱글 아이템들의 데이터 타입들로는?

: number, string, boolean, undefined, symbol, null

그럼, 위의 싱글 아이템들을 한 박스로 묶어서 데리고 다니는 애는 뭐냐?

object , box container 가 있다.

2) string 문자!

문자를 만들어주는 타입!

'' 안에 값을 넣어주면 문자로 변한다!

ex)

const name = ' haelin' ;

상수 name에 haelin 값을 할당하였다.

const greeting = 'hello' + name;

상수 greeting 안에 문자 'hello'와 상수 name을 합쳐주었다!

// hello haelin 이 출력된다.

ex)

const name = 'haelin' ; const greeting = `hi ${ name } ` ;

console.log(greeting); > name 상수에 haelin 문자를 할당해주었고, greeting 상수에 `` 백틱으로 ${} 다른 상수를 호출하는 식으로 hi 문자와 혼합해서 찍어주면, hi haelin 이 출력된다.

+ tip으로 `` 백 틱 안에 가둬주면 그대로 줄 바꿈 띄어쓰기 특수기호 모두 출력된다.

3) boolean 참과 거짓

false : 0, null , undefined, NaN, ' '

true : 어떠한 값들 전부!

ex ) const canEat = true; 이렇게 직접 true 값을 박아줄 수도,

const test = 1 > 4; 이렇게 말이 안 되는 식은 당연히 false 가 나오니까 이렇게 상수를 거짓으로 만들어줄 수도 있다.

4) null, undefined

null 아무것도 아닐 때!

let nothing = null; 너는 아무것도 아니야!!

그런데, undefined는

let x; 이렇게 선언은 되었지만 아직 아무것도 정해진 게 없을 때!

5) symbol

정말 고유한 식별자가 필요할 때 사용되는 아이.

const symbol1 = Symbol('id');

const symbol2 = Symbol('id');

이렇게 위아래 아이 모두 똑같은 문자 값이 할당되었지만,

console.log( symbol1 === symbol2 ); 이렇게 찍어보면 false 거짓이 출력된다.

그런데, 이 고유한 아이를 같게 만들어주고 싶으면?

const gSymbol1 = Symbol.for('id');

const gSymbol2 = Symbol.for('id');

이렇게 문자값 앞에 for()로 감싸서 작성해주면 된다!

또다시 위에처럼 비교해보면 값은 true.

+ 이놈은 바로 갖다가 찍어버리면 에러가 발생하니까

항상!!!

console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`); 이렇게

고유한 아이 이름 옆에. description을 찍어주자!

6) object

싱글 아이템들을 한 박스로 묶어서 정리해주는 아이!

const haelin = { name: 'haelin', age: 25 }; 는

haelin이라는 상수 안에 {} 박스로 object로 값들을 또 가지고 다닐 수 있다!

변하지 않은 상수 안에 object 값을 또 할당해줄 수 있다. 어떻게?

haelin.name = 'minsu'; 이런 식으로.

console.log(info.name = 'minsd' );

반응형

from http://comrin.tistory.com/67 by ccl(A) rewrite - 2021-12-06 21:01:30