티스토리 뷰
- html을 로드시키기
1. html파일을 만들고 코드 작성 후 경로 넣기
2. 윈도우에서 개발자 도구를 여는 단축키는 F12 또는 Ctrl + Shift + I
- F12: 개발자 도구를 바로 여는 단축키입니다.
- Ctrl + Shift + I: 이 단축키도 개발자 도구를 여는 기능을 합니다.
- javascript를 로그찍기
- 자바스크립트 파일을 만들고 html파일에 연동 후 확인
개발자 도구는 웹 페이지를 분석하고 수정할 수 있는 도구입니다.
주로 HTML, CSS, JavaScript를 확인하고 디버깅하는 데 사용돼요.
주요 기능:
- Elements: HTML과 CSS를 보고 수정할 수 있어요.
- Console: 오류 메시지나 코드 실행 결과를 확인할 수 있어요.
- Network: 페이지 로딩 중 요청된 데이터를 확인할 수 있어요.
- Sources: 자바스크립트 파일을 보고 수정하거나 디버깅할 수 있어요.
- Performance: 페이지의 성능을 분석할 수 있어요.
쉽게 말해, 웹 페이지를 실시간으로 수정하고 문제를 해결하는 도구
실습 환경 세팅
이슈(에러) >> 분석&수정(디버깅)>>해결
디버깅 방법
- 코드 내에 log함수 심기
- 개발자도구 > source탭 활용
javascript언어의 특징
사람이 이해한 언어로 작성되면 기계어로 번역되어야함
컴파일러 언어(ex) Rust): 코드작성 > 기계어로 변환 > 기계어로 실행
인터프리터 언어(ex) JavaScript): 코드작성 > 기계에서 실행과 동시에 변환하며 진행(기계어로 변환 x)
인터프리터 언어는 컴파일 단계가 없고 컴파일러 언어는 컴파일을 해줘야 하고,
인터프리터 언어는 실행하면서 변환을 해주어야 하므로 실행 속도가 느림
- 동적 타입 언어: 변수의 타입은 실행 중에 결정된다.
- 함수는 일급 객체: 함수는 다른 변수처럼 다룰 수 있다.
- 프로토타입 기반 상속: 객체는 다른 객체를 기반으로 상속받는다.
- 프로그래밍 패러다임 지원: 명령형, 함수형, 객체지향 등의 다양한 기법을 지원한다.
변수
변수란?
- 데이터를 처리하는 과정에서 값들을 기억해둘 필요가 있음
- 컴퓨터는 데이터를 기억하기 위해 메모리 사용
- 메모리 : 컴퓨터의 기억장치
- 메모리에 데이터를 담아 기억
- 각각 위치 주소값이 존재
- 위치를 찾기 위해 메모리의 주소값 사용
변수 == 식별자: 메모리 주소를 쉽게 식별하기 위해 붙인 이름
자바스크립트의 변수 syntax
- 키워드 let/const/var
- 변수명
- 할당 연산자
- 값
변수 생성 방법 & 호이스팅
자바스크립트 엔진은 코드 평가 -> 코드 실행(실행 컨텍스트)
1. 선언 단계 : 변수를 볌수 객체에 등록
2. 초기화 단계 : 변수를 메모리에 할당하고, undefined로 초기화 한다.
3. 할당 단계 : undefined로 초기화된 변수에 실제로 값을 할당한다.
변수 생성 3단계
- var 키워드
- 코드 평가단계 : 선언과 동시에 초기화 진행
- 코드 실행단계 : 값 할당 진행
var 키워드 호이스팅
- 모든 선언문이 해당 scope의 선두로 옮겨진 것처럼 동작하는 특성
- 함수 호이스팅, 변수 호이스팅,...
var 키워드 단점
- 키워드의 생략 가능 → 전역 변수 오염
- 중복 선언 가능 → 값 덮어쓰기 문제
- 변수 호이스팅 → undefined 오류 발생 가능
- 전역 변수화 (어디서든 참조가 가능해서 의도치 않은 변수값 변경, 코드 예측이 어려워짐)
- const, let 키워드
코드 평가 : 선언
코드 실행 : 초기화 + 할당
→ 코드 평가시점에 선언만 진행되므로, 변수의 할당문이 실행되기 전에 참조가 불가능합니다.
→ ReferenceError발생
→블록 레벨 스코프 : 코드 블록 내에서 접근 가능한 스코프
→변수에 한정적으로 접근이 가능하므로, 예측 가능한 범위 내에서 변수 변경이 일어남
- const 키워드 : 수정이 불가능한 상수 변수를 선언할 때 사용 → 무조건 값을 할당(할당하지 않으면 문법 오류 발생)
- let 키워드 : 재할당이 가능한 변수 타입, 값을 할당하지 않아도 생성
변수 실습
a는 var키워드이기 때문에 코드 평가 단계에서 이미 초기화가 끝나서 실행 단계에서 undefined이고,
b와 c는 코드 평가단계에서 초기화가 되지 않아 아직 선언 단계에 있는 상황이다.
a,b,c에 순서대로 초기화와 할당
c는 할당문이 없어 초기화만 됨
b의 경우 코드 평가단계에서 초기화가 진행되지 않았기 때문에 선언 전에 참조를 할 경우 레퍼런스 에러가 나옴
선언문에 와서 할당문을 거치게 되면 초기화 후 할당이 됨.
데이터와 형태
데이터의 종류 - 자료형
1. 데이터 타입 - 원시 타입
자바스크립트는 7가지의 원시 타입을 제공한다.
- Number, BigInt, String, Boolean, Undefined, Null, Symbol
원시타입의 특징
- 값은 변경 불가능한 값이다.
- 값으로써 전달된다.(참조 형태로 전달되는 것이 아닌)
2. 데이터 타입 - 객체 타입
원시 타입의 값을 제외한 자바스크립트에서의 모든 것은 객체이다.(객체는 여러 형태로 분류 가능)
객체타입의 특징
- 객체는 참조방식으로 전달된다.
- 객체는 속성들을 변경할 수 있는 muteble한 값이다.
원시타입
number type
- 자바스크립트에는 int, float 같은 여러 숫자 타입이 없다. 대신 number 하나만 존재하며, 모든 숫자는 64비트 실수로 처리된다.
- 또한 특수한 숫자 값도 있다.
- Infinity : 무한대
- NaN : 숫자가 아님
즉, 자바스크립트에서는 숫자는 모두 number로 취급되며, 정수도 실수처럼 다뤄진다.
BigInt Type
BigInt는 매우 큰 정수를 안전하게 저장하고 연산할 수 있는 자료형이다.
- Number 타입은 **최대 2^53 - 1**까지만 표현 가능
- BigInt는 이보다 더 큰 정수를 다룰 수 있음
- Number 타입과 혼합 연산 불가
즉, 아주 큰 정수를 다룰 때는 BigInt를 사용해야 한다.
string(자바스크립트의 문자열)
문자열은 텍스트 데이터를 표현하는 원시 타입이며, UTF-16 코드 단위의 시퀀스로 저장된다.
문자열 표기 방법
- 작은따옴표('hello')
- 큰따옴표("hello")
- 백틱(<code>`hello`</code>)
템플릿 리터럴 (Template Literal)
백틱(<code>` `</code>)을 사용하면 줄바꿈이 가능하며, ${}를 사용해 표현식 삽입이 가능하다.
문자열은 불변(Immutable)
문자열은 원시값이므로 한 번 생성되면 변경할 수 없다.
예를 들어, 기존 문자열에서 일부 문자를 바꾸려면 새로운 문자열을 만들어야 한다.
즉, 문자열을 직접 수정할 수 없고, 수정하려면 새로운 문자열을 생성해야 한다.
Boolean Type
논리적 데이터로 True(참) 또는 False(거짓)의 값만 가질 수 있다.
undefined
Undefined는 값을 할당하지 않은 변수의 기본값이다.
언제 Undefined가 발생할까?
변수는 선언 → 초기화 → 할당의 단계를 거친다.
이때, 초기화 단계에서 기본적으로 undefined가 할당된다.
Null
변수에 값이 없다는 것을 의도적으로 표현할 때 사용된다.
이전에 참조되어있던 값을 의도적으로 더 이상 참조하지 않겠다는 뜻으로 Null을 사용한다.
null의 타입 체크는 일치연산자를 활용하자(===)
Symbol
Symbol은 ES6에 추가된 타입.
중복되지 않는 유니크한 값이다.
>> 객체의 key로 사용될 수 있으며, 클래스나 객체의 내부에서만 접근할 수 있도록 전용 객체 속성의 키로 사용된다.
Reference Type(객체타입)
객체 타입 : 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조
자바스크립트에서 원시 타입을 제외한 모든 것은 객체이다.
객체는 속성(키와 값의 쌍)을 가진 데이터 구조로, 원시 타입과 달리 속성의 변경, 추가, 삭제가 가능하다.
동적 타입 언어
자바스크립트는 동적 타입 언어
명시적 타입 변환 vs 암묵적 타입 변환
자바스크립트에서 타입 변환은 두 가지 방식으로 이루어진다:
1. 명시적 타입 변환 (Explicit Type Conversion)
- 의도적으로 타입을 변환하는 방식
- 값.toString() : 문자열 타입으로 변환
- parseInt(값) : 정수 타입으로 변환
- Number(값) : 숫자 타입으로 변환
- Boolean(값) : 불리언 타입으로 변환
2. 암묵적 타입 변환 (Implicit Type Conversion)
- 의도하지 않게 자바스크립트가 자동으로 타입을 변환하는 방식
- 값 + "" : 문자열 타입으로 변환
- 값 * 1 : 숫자 타입으로 변환
- !!값 : 불리언 타입으로 변환
타입 변환 문제
- 암묵적 타입 변환은 의도하지 않은 결과를 초래할 수 있다.
- **typeof**나 **일치 연산자(===)**를 사용하여 타입을 확인하고 type guard를 사용하면 타입 변환에 따른 문제를 방지할 수 있다.
결론: 명시적 타입 변환은 의도적인 변환이고, 암묵적 타입 변환은 자바스크립트가 자동으로 변환하는 방식으로, 암묵적인 변환에서 발생할 수 있는 오류를 피하려면 타입을 명확하게 관리하는 것이 중요하다.