Real Front-End Series [Web(Front) - JavaScript 1]

TIaB·2026년 2월 27일

frontend

FrontEnd

목록 보기

4/7

JavaScript?

JavaScript

동적 타이핑, 객체 지향, 그리고 함수형 프로그래밍까지 지원하는 활용도 높은 스크립트 언어
높은 수준의 추상화로 개발자가 세부 사항을 잘 몰라도 프로그래밍 가능
객체지향적 특징
- abstraction : 객체나 함수를 통한 추상화 제공
- inheritance & polymorphism : class 기반 상속이 아닌 prototype 개념 활용
- encapsulation : closure 활용
스크립트 언어
- 일반적으로 인터프리터 방식으로 동작하며 최근의 인터프리터들은 대부분 부분적으로 Just-In-Time 컴파일러 사용
- 호스트 실행 환경에 종속적이며 일반적으로 독립적인 실행파일을 만들지 않음
다양한 애플리케이션 제작 가능
- 웹 클라이언트 뿐 아니라 node.js를 이용해 backend 부분도 제작

Html에서 JavaScript 사용 선언

Html 파일 내에 <script> 태그를 이용한 영역 표시

일반적으로 DOM 로딩이 완료된 후 사용하기 위해 <body> 태그 아래에 위치
페이지 내에서만 재사용 가능
- 최근 클라이언트 프레임워크는 가독성 + 개발 속도 향상을 위해 inline 형식 많이 사용

변수와 자료형

변수

변수의 선언 지시어

JavaScript : 동적 타입 언어 (Dynamic Typed Language) -> 선언 시가 아니라 값을 할당할 때 타입 결정
- 변수 선언 시 타입 대신 지시어 사용
지시어 생략 : 처음 값이 대입되는 시점에 묵시적으로 변수 선언
- 브라우저 기반 JavaScript에서 전역 객체인 window의 멤버 변수로 취급되므로 가급적 사용하지 말 것 - worst case
var : 가장 많이 사용했던 변수 선언 지시어
- 변수의 중복 선언 가능, 변수 hoisting, 일반적이지 않은 scope (var의 scope는 선언된 {}가 아닌 함수 영역) 등으로 혼란 유발.
- 앞으로 가급적으로 사용하지 말고 유지보수용으로 알고 가기
let : 현대의 JavaScript에서 주로 사용되는 지시어
- 변수의 중복 선언 시 오류 발생, 변수 hoisting에 의한 오류 방지, 변수의 scope는 선언된 {}영역
const : 상수 선언에 사용되는 지시어로 새로운 값이 대입되거나 재선언될 수 없음
- 변수의 scope는 let 변수와 동일

변수의 선언과 값의 할당

변수 선언 시 지시어와 함께 의미 있는 변수의 이름 지정
- 자바 등 일반적인 프로그래밍 언어의 naming rule과 유사
- came case로 작성
선언과 함께 리터럴 할당 가능
blank final 형태는 사용 불가
- const 키워드가 사용된 경우 선언과 할당을 반드시 같이 처리
let과 const는 해당 scope에서 재선언 불가
- var 키워드의 경우 재선언 시 기존을 엎어 씀 -> 주의

변수 선언 지시어 별 scope 확인

function test() {
  if (true) {
    globalData = "이런 변수 선언은 정말 아니다.";
    var varData = "옛날에는 이런거 썼데.";
    let letData = "이젠 let이지.";
    const constData = "상수";
    //constData = 30;                // const 변수 재할당 불가

    // TODO: globalData, varData, letData, constData 중 호출 가능한 변수와 호출 불가능한 변수를 확인하시오.
    console.log("g", globalData, "v", varData, "l", letData, 'c', constData)
    // END
  }// if scope
  // TODO: globalData, varData, letData, constData 중 호출 가능한 변수와 호출 불가능한 변수를 확인하시오.
  console.log("g", globalData, "v", varData)
  
  // END
}// test method scope
test();
// TODO: globalData, varData, letData, constData 중 호출 가능한 변수와 호출 불가능한 변수를 확인하시오.
console.log("g", globalData)
// END

자료형

변수의 타입

기본형 (Primitive Data Type)
- 단순한 값으로 저장
참조형 (Reference Data Type)
- 객체에 대한 참조 저장
다른 언어와의 차이점
- dynamic type language (동적 타입 언어)
  - 값을 할당할 때 타입 결정
- weakly type language (약한 타입 언어)
  - 타입 간의 변환이 자유로움
  - 서로 다른 타입 간 자동 연산이 수행
  - 기본형에 참조형의 내장 함수 적용 가능

기본형

타입	설명 및 예시
number	정수 또는 부동소수점 실수 값 `let num = 100;` `let num2 = 3.14;`
string	작은 따옴표 또는 큰 따옴표로 감싼 문자 `let str = "Hello JavaScript";` `let str = 'Hi There';`
boolean	true와 false의 논리 값 `let bool = true;`
undefined	변수를 선언만 하고 값을 할당하지 않았거나 undefined를 할당한 경우 `let str;`
null	변수에 null 값이 할당된 상태 `let str = null;`

typeof 연산자
- 변수의 종류를 알기 위해 사용하는 연산자로 변수에 저장된 데이터의 타입을 문자열 형태로 return

숫자 타입 (number)

정수, 실수의 구별이 없으며 2진수, 8진수, 10진수, 16진수 사용 가능
특별한 숫자들
- Infinity : JavaScript가 표현할 수 있는 한계를 넘어서는 값
  - Infinity는 어떤 값과 산술 연산해도 Infinity
- NaN : Not a Number
  - NaN은 어떤 값과 산술연산을 해도 NaN
isFinite(x)
- x값이 표현 가능한 자릿수인지 return
isNaN(x)
- 숫자 값이 NaN인지 확인해서 리턴
Number 타입
- 객체로 기본형인 숫자를 객체화하기 위한 wrapper(참조형)
  - '기본형' <-> '참조형' <-> '숫자 형태의 문자' 간 형 변환을 위한 함수 제공
  - 하지만 굳이 Number로 변경하지 않아도 Number에 정의된 함수 사용 가능
문자열 -> 숫자로의 형 변환
- Number.parseInt(문자형_숫자 [,진법])

문자열 (String)

""또는 ''을 이용해서 표현 가능
숫자와 마찬가지로 wrapper로 String 제공
주요 API 제공

카테고리	메서드/속성	설명	예시
검색	indexOf()	문자열에서 특정 문자열의 첫 번째 위치를 반환. 없으면 -1	`'안녕하세요'.indexOf('하') // 2`
검색	includes()	특정 문자열 포함 여부 확인. true/false 반환	`'안녕하세요'.includes('안녕') // true`
검색	startsWith()	특정 문자열로 시작하는지 확인. true/false 반환	`'안녕하세요'.startsWith('안녕') // true`
추출	substring()	slice와 유사하며 음수 인덱스 사용 불가	`'안녕하세요'.substring(0,2) // '안녕'`
추출	split()	구분자를 기준으로 문자열을 배열로 분할	`'A,B,C'.split(',') // ['A','B','C']`
변형	replace()	첫 번째로 일치하는 부분을 새로운 문자열로 교체	`'Hello'.replace('ello','i') // 'Hi'`
변형	trim()	문자열 양끝의 공백 제거	`' 안녕 '.trim() // '안녕'`
유틸리티	length	문자열의 길이를 반환하는 속성	`'안녕하세요'.length // 5`
유틸리티	charAt()	지정된 인덱스의 문자를 반환	`'안녕하세요'.charAt(1) // '녕'`
유틸리티	concat()	두 개 이상의 문자열을 결합	`'안녕'.concat('하세요') // '안녕하세요'`

기본형

템플릿 문자열
- 따옴표 대신 백틱 문자(`)로 문자열을 감쌈
- 문자열 안에 변수 삽입 가능 : ${변수명}
- 손쉬운 문단 구성 가능 : 중간에 엔터 키 삽입 가능

boolean

리터럴로 true | false 만 사용
boolean 타입은 Boolean 타입과 호한됨
논리값 필요 시 false로 인식하는 경우 (falsy) : false, null, undefined, NaN, 0, ""(빈 문자열)

undefined와 null

undefined
- 변수를 선언만하고 아직 값을 할당하지 않은 상태
- 객체의 미정의된 속성을 참조하려 할 때
- 함수에서 void를 반환하는데 출력하는 경우
- 사용처 타입에 따라 여러 형태로 변환됨
  
  사용처 타입 boolean 숫자 문자열
  평가 값 false NaN "undefined"
null
- 객체가 없음을 명시적으로 나타내기 위해 할당하는 값
- 일반적으로 G.C 대상임을 명시적으로 알리기 위해 할당

사용처 타입	boolean	숫자	문자열
평가 값	false	NaN	"undefined"

참조형

이제까지의 기본형을 제외하는 모든 데이터 타입으로 객체
heap에 실제 객체를 구성
- 변수는 객체의 reference만 관리
- G.C의 대상
참조 타입의 종류 확인
- instanceof 연산자

JavaScript의 객체

key, value로 구성된 property의 집합
- property는 데이터 즉 값일 수도 있고 function 즉 동작일 수도 있음있고 function 즉 동작일 수도 있음

배열

작성법
- Array 클래스의 생성자 함수 사용
- 배열 리터럴 [] ghkfdyd - 권장되는 방식
배열 요소 접근

console.log(coffees[0], typeof coffees, Array.isArray(coffees));
console.log(coffees[100]);

JavaScript 배열의 특징
- 객체기반으로 index는 객체의 property 역할
- 요소들이 연속적인 메모리 공간을 갖지 않을 수 있음
- 필요에 따라 크기가 동적으로 조절됨
CRUD를 위한 메서드

구분	종류	설명
추가	push(element1, ..., elementN)	element들을 배열에 추가하고 최종 length 리턴
추가	unshift([element1[, ...[, elementN]]])	배열의 앞에 element들을 추가하고 최종 length 리턴
삭제	pop()	배열의 마지막 요소를 삭제하고 삭제된 데이터를 리턴
삭제	shift()	배열의 첫 번째 요소를 삭제하고 삭제된 데이터를 리턴
검색	findIndex(callback)	callback에서 true를 리턴하는 처음 요소의 index 반환
검색	find(callback)	callback에서 true를 리턴하는 처음 요소 반환
검색	indexOf(element)	element의 첫 번째 위치 반환. 없으면 -1
검색	lastIndexOf(element)	element의 마지막 위치 반환
검색	includes(element)	element가 있는지 boolean으로 반환
변형	splice(start, deleteCount[, item1[, item2[, ...]]])	start에서 deleteCount 만큼 지우고 item들을 추가함
변형	join(delimiter)	요소들을 delimiter로 결합한 문자열로 변환
변형	concat(value1[, value2[, ...[, valueN]]])	기존 배열에 새로운 배열을 연결하여 리턴

사용자 정의 Object의 생성

Object 생성자 함수 활용 - 빈 객체를 생성하고 속성 추가

const user = new Object();
user.name = 'John';

객체 리터럴 활용 - 가장 일반적인 방법
- JSON 표기법 활용
- {}를 이용해서 객체를 생성하며 {} 내부에 property를 추가하여 객체 생성
- 객체 내의 함수에서 객체의 속성에 접근하기 위해 명시적으로 this 사용 가능

const user = {
  name : 'John",
  age : 30,
  introduce : function() {
    console.log(`이름: ${this.name}, 나이: ${this.age}`);
  }
}

객체의 속성 관리

조회 및 활용 : 객체의 속성에 접근하기 위해서 . 또는 [] 표현법 사용 가능
- 없는 속성에 접근 시는 undefined 반환
- in 연산자 : 객체가 특정 속성을 가지고 있는지 boolean으로 반환
추가/수정
- property의 키 값은 유일 - 동일한 키의 값을 할당하면 기존 값을 수정하게 됨
- 할당하는 키가 존재하지 않을 경우는 추가됨
삭제 : delete 연산자를 이용해서 속성 제거
- 대부분 내장 객체의 기본 속성들은 삭제 불가

연산자와 제어문

연산자

산술 연산

, -, , /, %, **
- 나눗셈 연산의 결과는 정수끼리의 연산도 실수로 변환

어떤 타입과도 연산이 가능

피연산자들을 상황에 따라 형 변환 후 연산 진행

NaN과의 연산 결과는 항상 NaN

구분	+	-, /, , %, *
String	결합 연산자로 작용	숫자로 변환해서 연산 숫자로 변환에 실패하면 NaN 반환
boolean	true-> 1, false -> 0으로 변환 후 연산	true-> 1, false -> 0으로 변환 후 연산
null	0으로 변환	0으로 변환
참조형	toString() 결과와 결합 연산	valueOf() 결과와 연산 - valueOf()가 원시값을 반환하면 그 값과 연산 - 그렇지 않으면 toString()의 결과와 연산

비교 연산

동등 연산 비교 연산자 (Loose Equality Operator) : ==, !=
- 타입 변환 수행 후 값이 같은지 다른지를 비교
일치 연산자 (Strict Equality Operator) : ===, !==
- 값과 타입이 모두 같아야 참으로 평가됨 (타입 변환을 수행하지 않고 비교)

비교 연산의 형 변환

기본적으로 피연산자의 "크기"를 비교해서 논리값 반환
타입이 다른 경우 피연산자를 숫자로 변환해서 비교 -> 변경 불가 시 NaN
- NaN : 어떤 값과 어떤 비교를 해도 false return

구분	타입 변환
number	기존으로 변환되지 않음
string	문자열끼리 비교: 유니코드 값을 이용해 사전 순서로 비교 나머지는 숫자로 변환 후 비교 (변환 실패 시 NaN → false로 간주)
boolean	true / false는 각각 1 / 0 숫자로 변환 후 연산
falsy	false는 0이므로 0으로 변환
참조형	valueOf() 결과와 연산 • valueOf()가 원시값을 반환하면 그 값과 연산 • 그렇지 않으면 toString() 결과와 연산

short-circuit 논리 연산자

&&, ||
비교와 할당이 동시에 발생
- 연산의 결과는 단순히 true / false가 아니라 최종 평가 값이 할당됨
특히 || 연산은 크로스 브라우징 관련하여 브라우저 지원 여부 파악에 많이 사용됨
- fallback의 기본 값 개념

제어문

조건문

if
- 조건식에 true / false 뿐 아니라 다른 값들도 사용 가능
- 0, null, ""(공백문자), undefined, NaN 등일 경우 false, 나머지는 true
if-else 구문, 중첩 if, 3항 연산자, switch 등은 모두 java와 동일

다양한 형태의 for 문장 제공

전통적인 형태의 for loop와 for-of
객체의 속성 순회를 위한 for-in

예외처리

예외 처리 구문

목적 : 프로그램 작성 오류, 파라미터 입력 오류 등에 대한 대처 기능
예외의 유형
- Error 객체 : ECMA Script에서 정의한 예외로 예외에 대한 정보를 담고 있는 객체의 최상위 객체
- 사용자 정의 예외 : 단순히 숫자 값부터 객체까지 모든 것을 예외로 사용 가능
  - 사용자 정의 예외를 발생시킬 때 throw 문장 사용
try ~ catch ~ finally 구문을 이용해 예외 감지 및 처리
- try : 해당 블록 감시 및 예외 감지
- catch : 발생한 예외(Error 객체)에 대한 처리
- finally : 예외발생 여부, try 및 catch의 return과 상관 없이 반드시 실행되는 블록
  - 자원 반납 등의 역할에 유용
    - finally에서의 리턴은 try와 catch의 리턴을 덮어쓰게 됨

Function

다시 한번 Java Script는

동적 타이핑, 객체 지향, 그리고 함수형 프로그래밍까지 지원하는 활용도 높은 스크립트 언어
- 일반적인 함수 : 어떤 일을 수행하는 단위 블록(메서드)
- JavaScript의 함수 : 메서드보다 넓은 개념으로 first-class-citizen - 객체
JavaScript 함수의 기능

역할 구분	설명	활용 예
메서드	호출 가능한 루틴으로서의 함수 - runtime에 `()`를 붙여주면 실행 - 일반적으로 알고 있는 기능	function sayHello(name) { console.log("Hello " + name); } sayHello("jang");
생성자	다른 객체를 생성할 수 있는 함수 - new와 함께 사용 - 일반적으로 대문자로 시작	function Student(name) { this.name = name; } console.log(new Student("홍길동").name);
객체	- 인자로 전달 가능(1) - 변수에 할당 가능(2) - 함수의 반환 값으로 사용 가능(3)	function getMyParseInt(x) { return x \|\| window.parseInt; // (3) } let myParseInt = getMyParseInt(Number.parseInt); // (1), (2) console.log(myParseInt("123cm"));

Function 작성

Function의 기본 형태

function function_name(parameter_name, ...) {
  ...
  return value;
}

작성 시 주의점
- parameter : var | let 같은 변수 지시어를 사용하지 않고 이름만 표시하며 local 변수로 취급됨
- return : 타입은 명시하지 않음
호출 시 주의점
- argument와 parameter의 개수가 맞지 않아도 호출됨.
- 전달되지 않은 parameter는 undefined로 처리됨

다양한 정의 방법

function 선언을 이용한 정의
- 함수 hoisting의 대상으로 전역 객체에 함수 객체가 등록되므로 성능을 저하시킬 수 있음

function add(x, y) {
  return x + y;
}

리터럴을 이용한 함수 표현식 - anonymous function
- 바로 변수에 할당하거나 파라미터로 전달, 또는 즉시 실행

let minus = function(x, y) {
  return x - y;
};

Function의 생성자 사용

let multi = new Function("x", "y", "return x * y");

console.log(multi(3, 4));

arrow function : 함수 리터럴을 간략하게 사용하기 위한 표기법
기본 구문

(parameter list) => {
  //do something
}

function 키워드를 생략하고 =>로 대체

let arrowFunc = (p1, p2) => {
  return p1 + p2;
};

구현부가 한 문장일 경우 {} 생략 가능
실행문이 return 문장 하나로 구성된 경우 return 생략 가능

let arrowFunc = (p1, p2) => p1 + p2;

파라미터가 하나일 경우 () 생략 가능

let arrowFunc = p1 => "Hello" + p;

호이스팅

함수 호이스팅

어떻게 다음의 일이 가능할까?

console.log(hello("hong"));

function hello(name) {
  return "hello, " + name;
}

JavaScript는 파싱 + 실행 2단계를 거침
단계 1(파싱) : 프로그램 전역 레벨에서의 파싱
- 어떤 함수에 포함되지 않은 var 변수의 인지 및 undefined 초기화 = 변수 hoisting
- 전역레벨에서 이름있게 정의된 함수에 대해 함수명으로 변수 생성 = 함수 hoisting
  - 실행 코드가 담긴 함수에 대한 참조로 초기화
단계 2(실행) :": 할당(=) 등 실행문을 실행
- 실행 도중에 함수 호출을 만나면 해당 함수 레벨의 파싱 단계

객체로서의 function

first class citizen

function은 메모리상에 객체로 존재
변수에 할당되어 참조 값으로 사용됨
함수의 반환 값으로 사용 가능
다른 함수 호출 시 인자로 사용 가능

인자로 활용된 function

callback function : 다른 함수에 인자로 전달되서 event 발생 등 특정 조건에서 호출되는 function
배열의 sort 적용

(method)
Array<string>.sort(compareFn? : ((a : string, b : string) => number) | undefined) : sting[]

arr.sort(
  function (first, secont) {
    return first.length - second.length;
  }
};

TIaB

Study Logging...

이전 포스트

Real Front-End Series [Web(Front) - CSS 2]

다음 포스트

Real Front-End Series [Web(Front) - JavaScript 1]

FrontEnd

JavaScript?

JavaScript

JavaScript

Html에서 JavaScript 사용 선언

Html 파일 내에 <script> 태그를 이용한 영역 표시

변수와 자료형

변수

변수의 선언 지시어

변수의 선언과 값의 할당

변수 선언 지시어 별 scope 확인

자료형

변수의 타입

기본형

숫자 타입 (number)

문자열 (String)

기본형

boolean

undefined와 null

참조형

JavaScript의 객체

배열

사용자 정의 Object의 생성

객체의 속성 관리

연산자와 제어문

연산자

산술 연산

비교 연산

비교 연산의 형 변환

short-circuit 논리 연산자

제어문

조건문

다양한 형태의 for 문장 제공

예외처리

예외 처리 구문

Function

Function

다시 한번 Java Script는

Function 작성

Function의 기본 형태

다양한 정의 방법

호이스팅

함수 호이스팅

객체로서의 function

first class citizen

인자로 활용된 function

Real Front-End Series [Web(Front) - CSS 2]

Real Front-End Series [Web(Front) - JavaScript 2]

0개의 댓글