[JS] 자바스크립트 기본(1)

thirty·2022년 4월 5일

JavaScript

목록 보기

7/11

해당 문서에서는 공통적인 컴퓨터 문법보다 자바스크립트 완주반 강의를 들으며 필요한 내용들만 정리한다.

🔷 Javascript?

HTML, CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어. 데이터 타입을 미리 명시할 필요가 없는 동적 언어이다.

문(Statement) : 명령과 흐름을 제어하는 것
함수(Function) : 특정 일을 처리하는 코드의 묶음
객체 지향 : 독립적인 각각의 객체로 프로그램이나 시스템을 구성하는 일

🔸 자바스크립트 데이터 타입

자바스크립트의 데이터는 크게 원시(기본형) 타입과 참조형 타입이 있다. 가장 큰 특징으로는 원시 타입의 값은 불변이고, 참조 타입은 값을 변경할 수 있다. 값을 변경할 수 없다는 뜻은

var str = "hello!"

/* 값이 변하지 않음 */
console.log(str.toUpperCase()) // HELLO!
console.log(str) // hello!

/* 재할당 */
str = str.toUpperCase()
console.log(str) // HELLO!

의 예시를 보면 알 수 있다. str 이라는 문자열에 접근해 메소드로 변경된 값을 출력할 수는 있어도, 값을 메모리에 저장하기 위해서는 '재할당' 이 필요하다.

- Primitive Type

불변의 값이다. Null, Undefined, Boolean, Number, String, BigInt, Symbol이 해당된다.
실제 값을 저장하는 공간으로 스택 영역에 저장된다.
기본 값이 있어 Null 값이 존재하지 않지만 만약 기본형 타입에 Null 값을 넣고 싶으면 래퍼 객체를 사용하면 된다.
재할당을 해서 값이 변경되었다 해도, 정말 값이 변경된 것이 아니고 식별자와 연결된 메모리의 주소만 바뀐 것이다.

- Reference Type

원시값이 아닌 값. 객체, 배열, 함수가 해당된다. 참조 타입의 데이터는 가변적이면 서도, 내부의 값들은 각자 다른 메모리 주소를 가지고 있다. 힙 영역에 저장된다.
빈 객체인 Null 값이 존재한다.

const object = {
	str: 'string'
};
const array = [];
function func() {}

obj.num = 123
obj.bool = 'true'

/* 오브젝트 자체는 가변적이다. */
// obj {str: 'string', num: 123, bool: true }

위처럼 오브젝트 자체는 값을 변경할 수 있다. 물론 오브젝트 내부에 있는 string이나 number의 값을 변경할 수는 없다.

instanceof
생성자의 prototype 속성이 객체의 프로토타입 체인 어딘가 존재하는지 판별한다.
실제 메모리에 존재하는 참조 타입일 경우 사용할 수 있다.

🔸 래퍼 객체

래퍼 객체 : 원시 타입의 값을 감싸는 형태의 객체

(1) const bool2 = false;
(2) const bool2 = new Boolean(false);

(1)이 리터럴로 선언된 형태이고, (2)가 래퍼 객체로 선언된 형태이다. 래퍼 객체로 선언된 값은 변경이 가능하며, 래퍼 객체는 프로퍼티를 참조할 때 생성되어 프로퍼티 참조가 끝나면 사라진다. 이게 무슨 소리인가.

변수의 프로퍼티에 접근할 때 래퍼 객체가 임시로 생성된다.

const str = 'string'

위 코드에서처럼 str이라는 변수에 접근할 때, 사실 임시로 const str = new String(str)이 생성된다는 뜻이다. 값을 할당하는 과정은 임시로 생성된 저 래퍼 객체에서 수행되게 된다. 그리고 값이 할당되고 나면, 임시로 생성된 래퍼 객체가 사라진다. 따라서 원시 타입의 프로퍼티가 읽기만 가능한 값처럼 존재하는 것이다.

🔸 스코프

변수의 유효 범위. 내부에서 외부로 접근이 가능하지만 역은 불가능하다.

var => 함수 단위
const, let => 블럭 단위

왜 반복문에서 for(let i = 0; i < 10; i++) {}; 로 선언하는가?
let은 블록 단위의 스코프를 가지고 있어 for 문 내부에서만 let으로 선언된 i를 사용할 수 있다. => 코드의 안전성

🔸 Null과 Undefined의 차이

둘 다 '없음'을 나타낸다. undefined 은 변수를 선언하고 값을 할당하지 않은 상태, null 은 변수를 선언하고 빈 값을 할당한 상태이다. 아래와 같은 느낌이다!

즉, undefined는 자료형도 값도 뭣도 없는 상태이다.

NaN은?
Not a Number로 연산 과정에서 잘못된 입력을 받았음을 나타내는 기호이다. 정확히 말하면 '숫자가 아니다' 라는 뜻이다. 따라서 isNaN으로 값이 숫자인지 아닌지 여부를 판단할 때 사용된다.

이건 강의에 나온 내용인데 한 번에 이해를 못해서 기록해 둔다.

console.log(undefined == null); // false
console.log(!undefined === !null); // true
console.log(!!null === !!undefined); // true

일단, 첫번째 줄을 보면 undefined와 null은 다르다. 만약 undefined와 null 값을 Boolean으로 표현하면 어떻게 될까? 둘 다 '없는 상태' 이므로 False일 것이다. 여기서 ! (단일 느낌표. 오른쪽의 피연산자의 true나 false 값을 뒤집는 역할) 를 이용한다면 !Undefined 는 'True'가 된다. 마찬가지로 !null 도 'True'가 된다.

따라서 undefined와 null은 값을 비교한다면 다르지만 !undefined === !null과 !!null === !!undefined는 참이다.

🔸 타입 캐스팅

Number(값), String(값), Boolean(값), Array.from(값) 으로 타입을 변환할 수 있다.

자바스크립트는 문자랑 숫자를 더했을 때 결과가 문자열 타입이 되고, 문자와 숫자를 곱했을 때 숫자형 타입이 되는 등 암시적으로 형변환이 가능하다. 심지어 123 + [1, 2, 3] 을 연산했을 때 문자열 타입의 123123이 나오기도 한다. 따라서 형 변환을 명시적으로 하는 것이 좋다.

🔸 이외 소소한 메모

자바 스크립트에서 표현할 수 있는 가장 큰 수
Number.MAX_SAFE_INTEGER. 이 숫자를 넘어가면 BigInt 타입이다.
값이 숫자인지 아닌지 판별할 때
console.log(isNaN('1'));
IEEE 754 부동소수점 방식을 사용한다.
따라서 1 === 1.0 은 True이다.
자바스크립트는 문자열을 배열처럼 접근할 수 있다.
단항 연산자와 삼항 연산자를 사용할 수 있다.
count++; 나 count--;, const value = (1==='1') ? True : False;
배열 값 추가 메소드
마지막에 추가 => .push()
처음에 추가 => .unshift()
객체에 배열과 점 연산 모두로 접근할 수 있다.
object.name 도 가능하고, object[name]도 가능하다.
식별자는 대소문자를 구별해 유니코드 글자, $, _, 숫자로 구성할 수 있지만, 숫자로 시작할 수는 없다. 식별자 선언 시 언어의 내장 예약어와 중복을 피해야 한다.
'use strict'
느슨한 문장 구조를 엄격하게 변경해준다. 즉, 조용히 무시되던 에러를 throwing 한다. ES2015부터 자동 권장되어 최신 자바스크립트에서는 신경 쓰지 않아도 된다.
'Babel'은 크롬이 아닌 IE처럼 오래 된 브라우저에서 새로운 자바스크립트 코드를 사용할 수 있도록 지원하는 컴파일러이다.

🔷 DOM

문서 객체 모델. HTML이나 XML 문서의 프로그래밍 인터페이스. 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공해 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. 페이지를 이동하지 않아도 상태를 변경할 수 있고, 태그를 바꿔 끼워 넣을 수 있다. DOM을 이용해 자바스크립트가 하이퍼텍스트 문서(웹 문서) 와 소통 가능하다.

- Example

const h2Element = document.querySelector('h2');

function replaceH2(eventType, callbackFunction) {
	h2Element.innerText = '안녕하세요';
}

/* 클릭 이벤트가 발생하면 replaceH2 함수가 실행된다. */
h2Element.addEventListener('click' replaceH2);

thirty

이전 포스트

[JS] Mark-Up!

다음 포스트