(TIL) 3/28 JS

IT_JANG·2025년 3월 28일

JS(Javascript)

개요

코드 작성 방법

  1. 브라우저 개발자 도구 -> Consloe에 직접 작성

  2. HTML 내부에 script 태그를 이용해서 작성 (Internal 방식)

<script> function test() {} </script>
  1. HTML 외부에서 존재하는 .js 파일 연결해서 사용하는 방법 (External 방식)
<script src="js파일경로"></script>
  1. 태그에 직접 JS 코드 작성(inline 방식, 권장 X)
<button type="button" onclick="alert('inline 버튼 클릭됨')"></button>

script 태그 작성 위치

  1. body 태그의 끝부분에 위치 : HTML 문서의 내용을 먼저 로드하고 렌더링 한 후에 Javascript 코드를 싱행하기 위해서
  2. head 태그 안에 위치 : Javascript가 실행되는 시점에 DOM이 아직 완전히 로드되지 않았을 수 있음 -> 해당 문서의 요소와 밀접한 관련이 있는 script가 아닌 경우(폰트어썸 등)

변수

명명 규칙

  • 의미 있는 이름을 작성 (대충 a, b 이런식으로 짓는것을 지양)
  • 대,소문자 구분
  • 특수 문자는 _ 만 사용 가능.(단, 첫 글자 제외)
  • 숫자도 사용 가능 (단, 첫 글자 제외)
  • 카멜 표기법으로 작성

종류

var

  • 변수, 함수 스코프, 변수 호이스팅, 중복 선언 가능
  • (주로 과거 코드에서 사용되며, 최근에는 let과 const가 선호됨)

let

  • 변수, 블록 스코프, 변수 호이스팅(TDZ), 중복 선언 불가
  • 재할당 가능. 변수를 재할당할 필요가 있을 때 사용

const

  • 상수, 블록 스코프, 변수 호이스팅(TDZ), 중복 선언 불가
  • 재할당 불가. 상수 또는 재할당이 필요 없는 변수에 사용

형태

  • 변수종류 면수명;
코드를 입력하세요

자료형

특징

  • Javascript는 변수 선언 시 별도의 자료형을 지정하지 않음
  • 변수에 대입되는 값(리터럴)에 의해서 자료형이 결정됨

종류
string (문자열)

  // string (문자열) : "" 또는 ''로 작성된 값
  const userName = "홍길동";
  const phone = '01012341234';
  const gender = 'M';

number (숫자) : 정수/실수 모두 포함

// number (정수, 실수, 양수, 음수, 0 등 모든 숫자)
const age = 25;
const height = 160.5;
const eyesight = -5;

boolean (논리값) : true(참), false(거짓)

// boolean (논리값 true/false)
const isTrue = true;
const isFalse = false;

object (객체) : Array(배열), 자바스크립트 객체 {k:v , k:v ..}
Array(배열) : 여러 값이 나열되어 있는 것의 묶음

const numbers = [10, 20, 30];
console.log("numbers : ", number, typeof numbers)

자바스크립트 객체 {k:v , k:v ..}

  • 값을 K:V (Map) 형식으로 여러개 저장하는 형태
    { K:V, K:V, K:V ... }
// K(key) : 값을 구분하는 이름(변수명 비슷)
// V(value) : K에 대응되는 값 (변수에 대입되는 값 비슷)

const user = {  id: "user01", pw: "pass01", userName: "홍길동"};

// 모두 출력
console.log("user:", user, typeof user);

// 지정 출력 방법 1 : 변수명 ['key']
console.log(user['id']);

// 지정 출력 방법 2 : 변수명.key
console.log(user.id, user.pw, user.userName);

function (함수)

// const 변수명(함수명) = function() {};
const sumFn = function(a, b) { return a + b}; //익명 함수

undefined (정의되지 않은 변수) : 변수가 선언만 됐고, 값이 대입되지 않음
null (빈 객체) : 변수를 선언하고 빈 값을 할당한 상태이다, object 타입

키워드(예약어)

function : 함수, 기능

function 함수명() { }

함수

alert()

  • 경고, 알림 (알림창, 대화상자)
  • 변수 값 삽입 시 백틱(``), ${변수} 사용
alert("hello");
// 변수 값 넣기
alert(`${money}원이 출금되었습니다. 남은 잔액 ${balance}원`);
alert(amount.value + "원이 출금 되었습니다. 남은 잔액 : "+ balance +"원");

prompt()

  • 사용자에게 입력을 받는 창을 띄우는 내장 함수(문자열로 반환)
const name = prompt("이름을 입력하세요:");
console.log(name); // 사용자가 입력한 값 (문자열)

연산자

typeof : 변수/값의 자료형을 출력하는 연산자

let a = 42;

console.log(a);        // 42 (값 출력)
console.log(typeof a); // "number" (타입 출력)

메서드

console.log()

  • 브라우저 콘솔에 괄호() 내부의 값을 출력(기록)
console.log("hello");

document.getElementById() : 특정 id를 가진 요소를 가져오는 메서드

  • document : HTML 문서 내에서
  • get : 얻다
  • Element : HTML 요소
  • ById : 아이디로(아이디가 일치하는)
const number1 = document.getElementById("input1");

용어정리

Script
정의

  • 기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도의 언어

특징

  • 별도의 소스코드 컴파일을 하지 않고, Interpreter를 이용해서 코드를 바로 실행

장점

  • 컴파일에 소요되는 시간이 없음
  • 운영체제(OS)에 종속되지 않음

단점

  • 컴파일 방식과 달리 한 줄씩 해석하며 실행하기 때문에 속도가 느릴 수 있음

Javascript

  • 웹 브라우저(크롬, 엣지 등)에서 주로 사용하는 인터프리터 방식의 객체 지향 프로그래밍 언어

Interpreter

  • 한 줄씩 코드를 읽어서 해석하는 기계, 기능

DOM

  • 브라우저 상에 뜨는 모든 요소

TDZ(Temporal Dead Zone)

  • 시간적으로 죽은 구역
  • 코드 실행 과정에서 특정 시점까지 변수가 접근 불가능한 상태
  • let/const 변수가 초기화 전에 접근할 수 없는 구간

블록 레벨 scope / 함수 레벨 scope

블록레벨 scope (let, const)
정의

  • let과 const로 선언된 변수는 변수가 선언된 블록(중괄호{}) 내부에서만 효하다는 것을 의미함
  • 코드 블록 내부에서 선언되는 변수는 해당 블록 외부에서는 접근할 수 없다
  • 지역 변수

형태

let foo1 = 123; // 전역 변수
const foo2 = 456; // 전역 변수

{ // 블록레벨
  let foo3 = 789; // 지역 변수
  const foo4 = 0; // 지역 변수
}

함수레벨 scope (var)

  • var 키워드로 선언된 변수는 함수 내 어디서든 접근할 수 있음
  • if, for등의 일반 블록은 무시하고, function(함수레벨) 블록은 무시 못함
{ // 블록레벨
  var test1 = 456
}
function example () { // 함수레벨
  var test2 = '함수레벨'
}
console.log(test1) // O
console.log(test2) // X

호이스팅(Hoisting)

정의

  • 변수와 함수의 선언이 해당 스코프의 최상단으로 끌어올려지는 동작
  • 호이스팅은 변수의 선언만 끌어올려짐 (변수의 초기화는 호이스팅 X)
  • var, let, const 변수들은 각기 다른 방식으로 호이스팅됨

종류
var

  • 선언만 해당 스코프의 최상단으로 호이스팅
  • 초기화는 원래 코드 위치에서 수행
  • 초기화 이전 접근 가능
console.log(a); // undefined
var a = 10;

let / const

  • 초기화 이전 접근 불가능
  • 선언문 도착하면 초기화를 안해도 JavaScript가 자동으로 undefined로 초기화 해줌
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 30;

let b;
console.log(b); // undefined
profile
IT_JANG
이전 포스트

(TIL) 3/26 시맨틱 태그

다음 포스트

(TIL) 3/31 JS(배열, DOM)

0개의 댓글