[210607 TIL] JavaScript

rimi0108·2021년 6월 7일
0

JavaScript

목록 보기
1/3
post-thumbnail

HTML & JavaScript 파일 연동하기

  1. 스크립트 태그를 사용해 삽입할 수 있다.
<script></script>
  1. html <head> 태그 안에 스크립트 태그, 자바스크립트 소스파일을 사용해 연동한다.
<head>
<script src="script.js"></script>
</head>
  • html은 파일을 위에서 아래로 순차적으로 읽기때문에 head 태그 안에 삽입할 시 자바스크립트 파일의 크기가 크다면 페이지의 로딩시간이 길어질 수 있기 때문에 추천하지 않음.
  1. <body> 태그 맨 밑에 위 태그를 첨부해 외부 자바스크립트 파일을 연동한다.
<script type="text/javascript" src="script.js"></script> 
  • html 페이지가 로딩된 다음 자바스크립트를 읽기 때문에 로딩시간이 비교적 빠르지만 웹사이트가 자바스크립트에 의존적인 사이트라면 추천하지 않음.
  1. <head> 태그안에 asyn 이라는 속성 값 추가
<head>
<script asyn src="script.js"></script>
</head>
  • asyn 사용 시 브라우저가 html을 다운로드 받아 파일을 읽다 asyn를 읽었을 때 병렬구조로 자바스크립트 파일을 다운로드 받아 자바스크립트 파일의 로딩이 끝났을 시 html 파일을 읽는 것을 중단하고 다운로드 된 자바스크립트 파일을 실행하게 됨
  • 다운로드 받는 시간 절약하지만 자바스크립트가 html되기 전에 시작되기 때문에 우리가 원하는 요소 정의되기 전일 수도 있음.
  1. <head> 태그안에 defer 이라는 속성 값 추가
<head>
<script defer src="script.js"></script>
</head>
  • defer을 읽은 후 자바스크립트 파일을 가져오고(html 파일은 계속 분석 중) html 파일 실행이 끝난 후 다운로드가 끝난 자바스크립트를 실행한다.
  • 효율적, 추천!

use strict

'use strice';

스크립트 엄격 모드!

  • 기존에는 무시되던 에러들이 발생
  • 더 효율적으로 자바스크립트 이용 가능
  • 자바 스크립트 파일 맨 위에 선언

자바스크립트 변수 선언

let

name = 'hyerim';
let name;

var

var 쓰지마!!

왜 쓰지 말아야 하나요?

1. 자바스크립트 var에서는 선언하기 전 값을 할당할 수 있음.

name = 'hyerim';
var name;

hyerim

  • var hoisting
    hoisting : 끌어올려주다.
    어디에 선언했는 지에 상관없이 항상 선언을 제일 위로 끌어올려 주는 것

2. block scope 존재하지 않음
var은 block을 무시함.

{
name = "hyerim";
var name;
}
console.log(name);

hyerim

블럭을 이용해 변수를 선언해도 아무대서나 출력 가능함.

const

한번 할당하면 값이 절대 변하지 않음.

const = name
name = "choihyerim";
  • const를 이용해 변수를 선언하는 것이 좋은 이유
    • 해커들이 값을 변경할 수 없기 때문에 보안상으로 좋음
    • 스레드들이 동시에 값을 변경할 수 없다.
    • 인간의 실수를 줄여준다.

var, let, const의 차이점 정리

변수 선언 방법데이터 타입중복 선언 여부스코프
var변경가능, mutable data type변수 중복 선언 허용함수 레벨 스코프
let변경가능, mutable data type변수 중복 선언 불가능블록 레벨 스코프
const변경 불가능, Immutable data type변수 중복 선언 불가능블록 레벨 스코프

스코프(Scope)

함수 레벨 스코프: 함수안에 선언된 함수만 지역변수로 간주하며, 나머지는 모두 전역변수로 간주한다.

function hello() {
var a = 1
console.log(a)
}

hello(); // 1

console.log(a) // ReferenceError: a is not defined
if true {
var a = 1;
console.log(a)
}

console.log(a) // 1 

코드 블럭 안에 var로 선언한 a 변수가 코드 블럭 밖에서도 출력되는 것을 볼 수 있다.

블록 레벨 스코프 : 함수 내부는 물론, if문이나 for문 등의 코드 블럭{ ... } 에서 선언된 변수도 지역변수로 취급한다.

function hello() {
let a = 1;
console.log(a)
}

hello(); // 1

console.log(a) // ReferenceError: a is not defined
if true {
let a = 1;
console.log(a)
}

console.log(a) //  ReferenceError: a is not defined

자바스크립트 데이터 타입(data type)

기본 자료형, primitive, single item

원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터입니다.

  • 숫자 (number)
const count = 17;
const size = 17.1;

typeof count
"number"
typeof size
"number"

  • 문자열 (string)
const greet = "hello"
const name = "choihyerim"
const greeting = greet; + name;

typeof greet
"string"
typeof name
"string"
typeof greeting
"string"

  • boolean
    참과 거짓
    • false : 0, null, undefined, NaN, '' (빈 스트링)
      true : any other value
const a = 3 > 1;
const b = 3 < 1;

typeof a
"boolean"
typeof b
"boolean"

a
true
b
false

  • null
    비어있는 값
let noting = null;
  • undefined
    값이 정의되지 않은 상태
let x;
let x = undefined;
  • symbol
    우선순위를 주기 위해 고유한 식별자가 필요할 때 사용
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');

console.log(symbol1 === symbol2);
false

객체, object, box container

const hyerim = { name: 'hyerim', age: 23 };
hyerim.age = 24;

함수, function, first-class function

function plus() {
return a + b
}

다이나믹 타이핑(Dynamic typing)

변수를 선언할 때 어떤 타입인지 선언하지 않고 할당된 값에 따라 타입이 변경됨.

let text = '안녕'; //type: string
text = 1; //type: number
text = '1' + 2; //type: string
text = '1' / '2'; //type: number

<참고>

profile
https://rimi0108.github.io/

0개의 댓글