언어/Javascript

1103 자바스크립트 언어와 함수 특징 - 호이스팅, 일급객체, 변수 종류

thinktank911 2025. 11. 3. 15:04

웹 프론트엔드 영역 구현 목표

  • 데이터를 가공 및 처리하여 화면을 구현, 구현한 화면으로 사용자와 인터랙션을 하도록 만드는 것이 웹 프론트엔드 역할

 

화면 렌더링과 인터랙션

  • 브라우저에서 파일이 로드되고 실행
  • 데이터를 조회하고 : 비동기
  • 보여주는 과정 : 렌더링
  • 인터렉션이 되도록 셋팅 : 이벤트

어플리이션과 서비스

  • 어플리케이션 : 기능들의 모음
  • 서비스 : 유저의 페인 포인트를 해결해주는 것
  • 서비스 만들기 위해 웹개발 배우고, 웹 개발 위해 자바스크립트 배운다.

브라우저와 개발자 도구 - html/js 파일 실습

  • 개발자도구
    • element :로드된 파일 소스볼수있다.
    • 어플리케이션 : 웹에서 기능하는 것 : 로컬 스토리지, 세션 스토리지
    • 퍼포먼스 탭 : 웹에서 로드, 실행되는 과정. 성능 개성 체크

브라우저와 디버깅

  • 디버깅 : 개발 단계 중에 발생하는 오류 원인 파악
  • console.log / console.dir
  • 개발자도구 > source 탭 활용

자바스크립트 언어의 특징

  1. 인터프리터 언어
  • 개발언어마다 컴퓨터가 이해하도록 코드를 번역 진행 방식 다르다.
    • 컴파일러 언어 : 사람 코드 작성 ➡️ 기계어로 변환 ➡️ 기계어 실행
    • 인터 프리터언어 : 실행과 동시에 기계어 변환
  • 실행단계에서 느리다. v8엔진 사용하여 보완
  1. 그 외
  • 변수의 타입 : 동적 타입 언어
    => 변수값에 따라 런타임에 타입이 추론됨
  • 함수의 특징 : 일급객체
    ➡️ 함수는 객체와 동일하게 사용
    ➡️ 값과 동일하게 취급
  • 상속의 형태 : 프로토타입 기반의 상속
    ➡️ 프로토타입 체이닝 구조를 통하여 상속 가능
  • 패러다임 지원 : 함수형 프로그래밍 / 명령형 프로그래밍 / 객체지향 프로그래밍

<데이터와 형태>

데이터를 담는다 : 변수

변수란

  • 데이터를 기억하기 위해 메모리 활용
  • 메모리란, 컴퓨터의 기억장치
  • 메모리 주소값의 별칭, 변수
    • 메모리 주소값을 대신할 식별자를 지정하고, 식별자를 통해서 데이터 접근
    • 식별자 == 변수
  • 변수란, 데이터를 담아둔 메모리의 주소를 쉽게 식별하기 위해 붙인 이름

 

변수 생성 방법과 호이스팅

log의 위치, 변수 키워드가 다른 것 뿐인데, 왜 결과가 다를까?

 

변수 생성 3단계

1) 선언단계 : 변수 객체에 등록(실행 컨택스트)
2) 초기화 : 변수 메모리 할당하고, undefined로 초기화
3) 할당단계 : undefined로 초기화된 변수에 실제로 값을 할당

 

var 키워드

  • 코드평가 : 선언과 동시에 초기화 진행
  • 코드 실행 : 값 할당 진행
  • 코드 평가 시점에 초기화 되어 있으므로, 변수의 할당문이 실행되기 전에도 참조 가능 (호이스팅)

※ 호이스팅

    • 모든 선언문(변수, 함수)이 해당 스코프의 맨위로 끌어올려진 것처럼 동작하는 특성
    • 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 선언이 위로 끓어올려진  var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다.
    • 함수 호이스팅, 변수 호이스팅

 

단점

  • 키워드의 생략 가능
  • 중복 선언 가능(동일한 변수명으로 다시 변수 선언 가능)
  • 변수 호이스팅
  • 전역변수화되어 무분별한 변수 접근
※ 스코프
- 변수가 실행되는 범위. 코드가 실행되는 과정에서 변수와 같은 식별자를 찾아야하는 코드가 있을 때
  자바스크립트가 갖고 있는 규칙
- 전역 스코프(global), 지역스코프(local)
- 의도치 않은 변수값 변경, 코드 예측이 어려워짐

 

 

const, let 키워드

  • 코드평가 : 선언 진행
  • 코드실행 : 초기화, 값 할당 진행
  • 코드 평가 시점에 선언만 진행되므로, 변수의 할당문이 실행되기 전에 참조가 불가능
    • ReferenceError가 발생
  • 블록레벨 스코프 : 코드 블록 내에서 접근 가능한 스코프
  • 변수에 한정적으로 접근 가능하므로, 예측 가능한 범위 내에서 변수 변경 일어남

const 키워드

  • 수정이 불가능한 상수 변수 선언할 때
  • 무조건 값 할당 필요

let 키워드

  • 재할당 가능한 변수 타입
  • 값 할당 않아도 생성

변수 실습

console.log(a);
try{
    console.log(b);
    console.log(c);
} catch {};

var a = 1;
const b = 2;
let c;

 

※ 변수 네이밍 컨벤션

  • 카멜 케이스 : getNumber
  • 스네이크 케이스 : get_number
  • 파스칼 케이스 : GetNumber
  • 콘스탄트 케이스(주로 상수 변수) : GET_NUMBER

자료형이란?

자바스크립트 데이터 타입

  • 원시타입
    String, Number, BigInt, Undefined, Null, Boolean, Symbol
    • 특징 : 변경 불가능 값 immutable value
    • 참조 형태 아닌 값으로 전달
    • 빌트인 객체 : 원시 래퍼 객체
    • 해당 래퍼 객체들을 상속받아 사용 가능
    • 원시 래퍼 객체와 원시 타입 헥살리지 않기
  • 객체 타입
    • 특징 : 객체는 참조방식으로 전달 Pass by referfence
      Fyi; deep copy, shallow copy
    • 객체는 속성들을 변경할 수 있는 mutable한 값

Number Type, BigLint Type (infinity, NaN)

  • 숫자에는 정수, 실수가 존재
    • 다른 언어 : int, long, float, double 등
    • 자바스크립트에는 하나의 숫자 타입만 존재 = Number
  • 자바스크립트는 모든 숫자를 실수로 처리
    • 정수 타입 없음

Number Type

  • 배정밀도 64비트 부동소수점 : 실수를 연산할 때 근사값으로 처리
  • 숫자형에는 infinity : 무한대 나타내는 숫자(음수도 가능),
    NaN : Not A Number 의 줄임말, 숫자가 아님

BigInt Type

  • 임의 정밀도로 정수를 나타낼 수 있는 javascript 숫자 원시 값
  • BigInt를 Number의 최대값을 넘는 정수도 안전하게 저장하고 연산 가능
  • 다른 타입과 혼합하여 연산 불가

String Type

    • 텍스트 데이터
    • UTF-16 코든 단위 시퀀스로 표현
    • 16비트 정수값 요소로 구성
    • 각 요소가 string의 한 자리
    • 0번째 index부터 시작
    • 원시값 == 문자값 불변
    • 백틱 : 템플릿 리터럴 표기법(``)
    • 줄바꿈허용, 표현식 삽입 가능
      • String interpolation : ${표현식}

Boolean Type

  • 논리적 데이터 유형
  • UI 데이터값, 상태값으로 사용됨

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

  • 변수 초기화 단계에서의 undefined는 개발자가 의도에서 넣을 값 아님
  • 의도해서 넣을 수도 있다.

null Type

  • 값이 없다는 것 의도적으로 표현할때 사용
  • 이전에 참조있던 값을 더이상 참조하지 않겠다는 뜻
  • null 타입체크는 일치연산자(===) 사용
    • null의 type은 object라고 나오는데 이는 자바스크립트 스펙 내의 버그
    • null의 타입체크는 일치연산자 활용

Symbol Type

  • 중복되지 않는 유니크한 값
  • 객체의 key로 사용될 수 있다
  • 클래스나 객체 형식의 내부에서만 접근할 수 있도록 전용 객체 속성의 키로 사용
  • Symbol함수를 호출하여 생성

Reference type

  • 객체타입, Object type, Reference type
  • 객체타입 : 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조
    • 객체 : 데이터(속성), 데이터에 관련한 동작을(method) 포함하는 개념적 존재
  • 원시 타입의 값을 제외한 자바스크립트에서의 모든 것은 객체
  • 객체 타입 : mutable
    : 변경 가능한 값 - 객체의 속성을 변경, 추가, 삭제 가능
    • 원시값 : immutable한 값
  • 힙 메모리에 저장
    • 동적으로 변화 가능하므로, 메모리 공간 확보 및 저장
  • Pass-by-referfence
    • 참조 타입이므로, 참조값을 처리
  • 여러 형태의 객체 타입
    • 일반 객체와 함수 / 날짜 / 인덱스 컬렉션 / 키 컬렉션 / ...

 

동적 타입 언어

  • 의도적 타입 변환 가능 - 명시적 타입변환
  • 의도와 상관없이 변경 - 암묵적 타입변환

명시적 타입변환

  • 원시 래퍼 객체를 활용해 개발자가 의도적으로 타입변경
    • 값.toString() : 문자열 타입으로 변환
    • Number(값) : 숫자 타입으로 변환
    • Boolean(값) : 불리언 타입으로 변환

암묵적 타입변환

  • 의도 없이 타입 변경
  • 값 + "" : 문자열 타입으로 변환
  • 값 * 1 : 숫자타입으로 변환
  • !! 값 : 불리언 타입으로 변환

※ 값이 전달될 때, 참조되어 있는 변수 값 타입이 개발 의도와 다르게 암묵적 타입 변환으로 변경될 가능성 있다.
➡️ 타입 추론이 어려워져, 불필요한 디버깅 시간 발생

  • 해결방법
    • 전달되는 시점마다 typeof나 일치연산자를 사용하여 타입 guard 구현
    • 자바스크립트 superSet 타입스크립트 사용

<데이터 처리>

연산자

  • 하나 이상의 표현식을 대상으로 연산을 수행하여 하나의 값을 만든다.
    피연산자(값) / 연산자(+,-)

단항 연산자

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

산술 연산자

  • 단항 산술 연산자 : 1개의 피연사자를 산술연산하여 숫자값 반환
    • ++ 숫자1 증가, 암묵적 할당
    • -- 숫자1 감소, 암묵적 할당
      • 양수의 표현 아무런 효과 없음
    • 양수를 음수로, 음수를 양수로 반전시킨 값 반환
    • 증가/감소 연산자 : 위치에 따라 처리단계 상이
    • 전위 증가감소 연산자 : 피연산자 앞에 위치(++피연산자)
    • 후위 증가감소 연산자 : 피연산자 뒤에 위치(피연산자++)
  • 이항 산수 연산자 : 2개의 피연산자를 산술 연산

관계 연산자

  • 피연산자 비교, 결과 참거짓 따라 불린 값 반환
    • in : 객체 내 속성이 존재할 경우 true 반환
    • instanceof : 특정 객체 타입에 속하면 true를 반환

비교 연산자

    • 피연산자 비교, 결과 참거짓 따라 불린 값 반환
    • 피연산자에는 숫자, 문자열, 논리형, 객체 타입
      • == 동등 : 서로 같으면 true
      • === 일치 : 서로 같고 타입도 같으면 true
      • != 부등 : 서로다르면 true
      • !== 불일치 : 서로 다르고, 타입도 다르면 true
  •  

이진 논리 연산자

  • 단축평가 논리 : 첫번째 식을 평가한 결과에 따라, 두번째 식 평가 진행
    • A && B AND 연산자 : A가 false면 A반환/A가 true면 B 반환
    • A || B OR 연산자 : A가 false로 평가되면 B 반환 / A가 true로 평가되면 A 반환
  • null, undefined, 빈 문자열 -> false로 평가
    • AND 연산 : null 검사 활용
    • OR 연산 : 캐싱값 대해서도 사용(대응값)

기타 연산자들

  • 쉼표연산자 : 두 연산자를 모두 평가한 후, 오른쪽 피연산자의 값을 반환
  • 문자열연산자 : 두 문자열 값 서로 연결해 새 문자열 반환
  • 옵셔널연산자 : 객체 속성 참조 시, 유효하지 않는 경우, 에러를 발생시키지 않고 undefined를 반환

할당연산자

  • 오른쪽 피연산자가 왼쪽 피연산자에 값을 할당
  • += &&= 등

삼항연산자
조건 연산자에 따라 두 값 중 하나 반환

  • 컨디션 ? true : false

재사용 처리기, 함수

  • 중복코드 생성, 유지보수 편리함 위해

함수란?

  • 특정 동작 수행하는 코드 일부분
  • 외부코드가 호출할 수 있는 하위 프로그램
  • 함수의 형태 : input / output / 본문

자바스크립트 함수

  • 함수도 객체지만, 객체와의 차이점은 외부 호출 가능
  • 일급 객체 특징
    • 함수의 실제 매개변수가 될 수 있다.
    • 함수의 반환값이 될 수 있다.
    • 할당명령문의 대상이 될 수 있다.
    • 자바스크립트 함수는 동일 비교 대상이 될 수 있다.(값으로 표현 가능)

자바스크립트 함수의 특징

매개변수

  • 기본값 매개변수
    • 매개변수 값이 없거나, undefined가 전달될 경우 대체되는 초기값
    • 매개변수에 할당연산자와 함께 초기값 할당
  • 나머지 매개변수
    • 가변항 함수
    • spread 연산자
    • function foo(arg1, ...rest){}
  • argument 객체
    • 함수에 전달되는 인자들을 참조할 수 있는 객체
    • 자바스크립트의 함수 : function 객체 상속
    • 형태 : 배열이 아니고 유사배열 형태 : 배열 내장 method 사용 불가
  • 매개변수와 인자의 차이
    • 매개변수(parameter) : 함수를 정의할 때 사용 변수
    • 인자(argument) : 함수가 호출될 때 넘기는 값

함수의 생성과 사용 패턴

함수 생성 방법

  • 함수선언문
  • 함수 표현식
    • 익명 함수 : 함수명 생략 가능
    • 기명 함수 : 함수명 생략 안함
  • function 생성자 함수
    function 객체 : 자바스크립트 내장 객체 중 하나
    함수 생성방법의 기본 원리
    • 함수 표현식, 함수선언문 : 축약법
      생성자 함수
    • 내장 객체 활용 : 인스턴스 생성
    • new 내장객체()
      new Function(arg1,...)
  • 화살표 함수 표현식
    • ES6 이후 부터 사용 가능
    • function 키워드 사용않고, 화살표 사용

 

함수 사용 패턴

  1. 즉시실행함수(IIFE)
  • 함수 정의와 동시에 실행
  • 코드 평가 ➡️ 코드 실행 ➡️ 최초 1회 실행
    • 초기화 처리에 주로 사용
  • 작성 방법
    • 즉시 실행할 함수 괄호로 감싸기
    • 괄호로 감싸진 함수를 실행
  1. 재귀함수
  • 자기자신 호출하는 함수
  • 무한히 호출됨
    • 탈출 조건을 함수 초반에 정의해야 함
  • 직관성이 떨어질 수 있어, 한정적 사용 권장
  1. 중첩 함수(= 내부함수)
  • 내부 함수 내의 변수 참조 ➡️ 부모를 포함한 외부 범위 참조 가능
  • 부모함수 내의 변수 참조 ➡️ 자식 범위 참조 불가능
  • 스코프 체인
  1. 콜백함수
  • 함수의 매개변수가 될 수 있다.(일급 객체 중)
    • 인자로 B함수를 받은 A함수
    • A함수가 호출되는 시점에 B함수도 호출
  • 특정 이벤트가 발생했을 때
    • 시스템에 의해 호출되는 함수

일급객체 실습, 매개변수 실습

  • run.js 활용

함수 생성 방법

함수의 여러가지 형태

// 즉시실행함수
(function foo(){
console.log('foo');
})();

// 재귀함수
function foo(arg){
if(arg === 3) return;
console.log(arg);
foo(arg + 1);
};

// 중첩(내부)함수
function foo(arg){
function bar(){}
bar();
};

console.log(arg);
foo(1);

// 콜백함수
function foo(arg){
arg();
};

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