자바스크립트

자바스크립트 언어의 특징

 

1️⃣ 인터프리터 언어

: 사람이 코드를 작성 -> 기계에서 실행 -> 변환하며 진행

: 컴파일 단계 없음

: 컴파일러 언어에 비해 실행 속도가 느림 

 

vs 컴파일러 언어 : 사람이 코드를 작성 -> 기계어로 변환 -> 기계에서 실행

 

2️⃣ 동적 타입 언어

: 변수에 들어가는 값에 따라서, 런타임에 타입이 추론된다. 

 

3️⃣ 함수는 일급객체

: 함수는 객체와 동일하게 사용할 수 있다.

: 함수는 값과 동일하게 취급한다. 

 

4️⃣ 프로토타입 기반 상속

: 언어가 갖고 있는 프로토타입 체이닝 구조를 통하여 상속 가능

 

5️⃣ 여러 프로그래밍 패러다임 지원

 : 명령형 프로그래밍, 함수형 프로그래밍, 객체지향 프로그래밍 .. 

 

데이터와 형태

변수란?

: 메모리의 주소값의 별칭, 식별자

: 데이터를 담아 둔 메모리의 주소를 쉽게 식별하기 위해 붙인 이름 

const foo = 1;

 

변수 생성 방법과 호이스팅

 

1. 선언 단계

: 변수를 변수 객체에 등록한다.

 

2. 초기화 단계

: 변수를 메모리에 할당하고, undefined 로 초기화한다.

 

3. 할당 단계 

: undefined 로 초기화된 변수에 실제로 값을 할당한다. 

 

⚠️ 변수 생성 3단계는 키워드별로 다르게 동작한다. (var, const, let)

 

var 키워드

: 코드 평가 단계 => 선언과 동시에 초기화 진행 ,  코드 실행 단계 => 값 할당 진행

: 코드 평가 시점에 초기화 되어 있으므로, 변수의 할당문이 실행되기 전에도 참조가 가능하다. (호이스팅)

: 단점 => 키워드의 생략 가능, 중복 선언 가능, 변수 호이스팅, 전역 변수화 

 

* 전역 변수화

: 무분별한 변수 접근 가능, 의도하지 않은 변수값 변경으로 인해 코드 예측이 어려워진다. 

 

* 호이스팅이란? 

: 모든 선언문이 해당 scope의 선두로 옮겨진 것처럼 동작하는 특성

: 함수 호이스팅, 변수 호이스팅, ... 

 

const , let 키워드

: 코드 평가 단계 => 선언 진행, 코드 실행 단계 => 초기화 진행, 값 할당 진행

: 코드 평가 시점 선언만 진행되므로, 변수의 할당문이 실행되기 전에 참조가 불가능 => ReferenceError 발생

: 블록 레벨 스코프, 변수에 한정적으로 접근이 가능하므로 예측 가능한 범위 내에서 변수 변경이 일어남 

 

const 

: 수정이 불가능한 "상수 변수" 를 선언할 때 사용

: 무조건 값을 할당

 

let

: 재할당이 가능한 변수 타입

: 값을 할당하지 않아도 생성

---

자료형

1. 원시 타입

 

: String , Number, BigInt, Undefined, Null, Boolean, Symbol

: 값이 변경 불가능하다.

: "값" 으로써 전달된다. ( 참조 형태로 전달되는 것이 아님 )

 

Number

: 자바스크립트에는 하나의 숫자 타입만 존재

: 모든 숫자를 실수로 처리, 정수 타입 없음

: Infinity, NaN 이라는 값도 존재

 

BigInt

: 임의 정밀도로 정수를 나타낼 수 있는 자바스크립트 숫자 원시 값

: Number 의 최대값을 넘는 정수도 안전하게 저장하고 연산할 수 있다.

: 다른 타입과 혼합하여 연산할 수 없다. 

 

String

: 텍스트 데이터를 나타낼 때 사용

: 문자값은 불변한다. 

: 따옴표나 쌍따옴표, 백팃으로 감싸서 문자열임을 표현

 

Boolean

: 논리적 데이터 유형

: 참 혹은 거짓의 값만 가질 수 있음

 

undefined

: 변수를 선언한 후 값을 할당하지 않은 변수에 할당이 되는 값

 

Null

: 값이 없다는 것을 의도적으로 표현할 때 사용

: 이전에 참조되어 있던 값을 의도적으로 더이상 참조하지 않겠다는 뜻으로도 사용한다. 

: null 타입 체크는 일치 연산자(===) 사용하기

 

Symbol

: 중복되지 않는 유니크한 값

: 객체의  key 로 사용될 수 있음

: 클래스나 객체 형식의 내부에서만 접근할 수 있도록 전용 객체 속성의 키로 사용 

 

2. 객체 타입

 

: 원시 타입의 값을 제외한 자바스크립트에서의 모든 것은 객체

: 일반 객체와 함수, 날짜, 인덱스 컬렉션, 키 컬렉션, ... 

: 객체는 참조 방식으로 전달된다. 

: 데이터(속성) 과 데이터에 관련한 동작(method) 를 포함하는 개념적 존재 

: 객체는 속성들을 변경할 수 있는 mutable 한 값이다. 

 

* mutable

: 객체의 속성을 변경, 추가, 삭제 가능

: 힙 메모리에 저장 (동적으로 변화 가능하므로, 메모리 공간 확보 및 저장)

 

* 동적 타입 언어

: 의도적으로 타입을 변환할 수도 있지만, 의도와 상관없이 변경되기도 한다. 

: 명시적 타입 변환 => .toString() , Number(값) , Boolean(값)

: 암묵적 타입 변환 => 값+" " (문자열 타입으로 변환) , 값 * 1 (숫자 타입으로 변환) , !!값 (불리언 타입으로 변환) 

                                  ➡️ 이를 해결하기 위해 타입 guard 구현, 타입스크립트 사용 

---

연산자

 하나 이상의 표현식을 대상으로 연산을 수행하여 하나의 값을 만든다. 

 

단항 연산자

: 하나의 피연산자만 사용하는 연산

• void : 표현식을 평가할 때 값을 반환하지 않도록 지정
• typeof: 평가 전의 피연산자 타입을 나타내는 문자열을 반환
• delete : 객체의 속성을 삭제 

산술 연산자

: 두 개의 숫자값을 피연산자로 받아서 하나의 숫자 값을 반환

 

* 단항 산술 연산자

: 1개의 피 연산자를 산술 연산하여 숫자값을 반환

ex) ++,  -- ,  + , - 

 

* 이항 산술 연산자

: 2개의 피연산자를 산술 연산하여 숫자값을 반환

ex) + , -, * , / , %

 

관계 연산자

: 피연산자를 비교하고, 결과가 참인지에 따라 boolean 값을 반환

 

* in

: 객체 내에 속성이 존재할 경우 true 반환

 

* instanceof 

: 특정 객체 타입에 속하면 true 반환 

 

비교 연산자

: 피연산자를 비교하고, 결과가 참인지에 따라 boolean 값을 반환

: 동등 연산자(==), 일치 연산자(===) , 부등 연산자(!=) , 불일치 연산자(!==) 

: 큼 연산자(>) , 크거나 같음 연산자(>=), 작음 연산자(<), 작거나 같음 연산자(<=) 

 

논리 연산자

: 두 개의 피연산자 중 하나를 반환

: 반환되는 값이 무조건 boolean 값이 아니다.

: 단축 평가 논리 => 첫번째 식을 평가한 결과에 따라서 두 번째 식 평가를 진행

: null , undefined, 빈 문자열 => false 로 평가 

 

A && B  (AND 연산자)

: A 가 false 로 평가되면 A를 반환한다.

: A 가 true 로 평가되면 B를 반환한다. 

 

A || B (OR  연산자)

: A 가 false 로 평가되면 B를 반환한다.

: A 가 true 로 평가되면 A를 반환한다.

 

할당 연산자

: 오른쪽 피연산자가 왼쪽 피연산자에 값을 할당

ex) += (더하기 할당), -= (빼기 할당) , *= (곱하기 할당) ... 

 

삼항 연산자

: 조건 연산자에 따라 두 값 중 하나를 반환

ex) condition ? trueValue : falseValue

---

함수

: 특정 동작을 수행하는 처리기 

: 소프트웨어에서 특정 동작을 수행하는 코드 일부분을 의미

: 외부 코드가 "호출" 할 수 있는 하위 프로그램

: 자바스크립트에서 함수는 일급객체의 특징을 모두 갖고 있다.

 

* 일급 객체 

• 자바스크립트 함수는 실제 매개변수가 될 수 있다.

function foo(input){
	return input()+1;
}

function bar() {
	return 1;
}

foo(bar);

• 자바스크립트 함수는 함수의 반환값이 될 수 있다.

function foo(input){
	return input()() +1;
}

function bar() {
	return 1;
}

function baz() {
	return bar;
}

foo(baz);

 

• 자바스크립트 함수는 할당명령문의 대상이 될 수 있다.
• 자바스크립트 함수는 동일비교의 대상이 될 수 있다. (값으로 표현 가능)

const foo = function() {
	return 1;
}

foo();

 

함수의 형태

• input : 로직 처리를 위해 주입받는 데이터
• output: 로직 처리를 후 반환되는 결과 데이터
• 본문: 명령문의 시퀀스로 구성

함수의 생성

 

1. 함수 선언문

function foo(arg) {
	return arg;
}

const bar= foo(1);
console.log(bar);

 

2. 함수 표현식

const foo = function(arg) {
	return arg;
}

const bar = function baz(arg) {
	return arg;
}

const temp = foo(1);
console.log(temp);
console.log(baz(1)); // 에러!

 

3. Function 생성자 함수

const bar = new Function(undefined, 'return 1');
bar(1);

 

4. 화살표 함수 표현식

const foo = (arg) => {
	return arg();
}

foo(() => {
	return 1; 
});

 

함수 사용 패턴

 

1. IIFE ( 즉시 실행 함수)

: 함수 정의와 동시에 실행

: 코드 평가 -> 코드 실행 -> 최초 1회 실행

(function foo () {
  console.log('foo');
})();

 

2. 재귀 함수

: 자기 자신을 호출하는 함수

: 계속 자신을 참조하여 호출하므로 무한히 호출될 수 있음

( 탈출 조건을 함수 초반에 정의해야 함)

: 직관성이 떨어질 수 있어, 한정적 사용 권장 

function foo(arg)  {
  if(arg === 3) return;
  
  console.log(arg);
  foo(arg+1);
}

foo(1);

 

3. 중첩 함수

: 내부 함수 내의 변수 참조 => 부모를 포함한 외부 범위 참조 가능

: 부모 함수 내의 변수 참조 => 자식 범위 참조 불가능

: 스코프 체인

function foo(arg)  {
  function bar() {
    console.log(arg);
  }
  bar();
}

foo(1);

 

4. 콜백 함수

: 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수 

function foo(arg)  {
  arg();
}

foo(()=> {
  console.log(1);
});

---

🌟 배운 점

오늘은 자바스크립트의 특징과 자료형, 연산자, 함수 등 전반적인 문법에 관한 내용을 배웠다. 그동안 자바스크립트에 많이 익숙해졌다고 생각했는데, 아직 헷갈리거나 낯선 부분들이 있는 것 같다. 자바스크립트 책을 사두고 공부하는 것을 미뤄왔었는데, 이제 더 이상 미루지 말고 혼자 공부하는 시간을 가져야겠다.