JavaScript 기초

신한투자증권 프로 디지털 아카데미 과정

 

 

1. JavaScript 소개 및 설치

1. 프로그래밍 언어 - JavaScript

 

1) JavaScript 란?

: 객체 기반의 스크립트 프로그래밍 언어

최초의 브라우저는 넷스케이프에서 만듦

• 단순하고 간단하다
• 플랫폼 독립적인 오픈소스 (Node.js) -무료에다가 어느 운영체제든 사용 가능(Windows, Linux, Mac OS)
• 다양한 프로그래밍 패러다임 지원 - 절차, 객체지향, 함수형
• 방대한 라이브러리 - 웹 개발, 게임 개발, 데이터과학 등 범용언어 특히 웹 개발에서는 절대적인 지위를 가지고 있음

이름	설명	대표 언어
절차지향 프로그래밍 (Procedural Programming)	명령을 순차적으로 실행. 함수, 변수 위주.	C, Pascal
객체지향 프로그래밍 (Object Oriented Programming)	객체(데이터 + 행동) 중심. 캡슐화, 상속, 다형성	Java, C++, Python, Kotlin
함수형 프로그래밍 (Functional Programming)	순수 함수, 불변성, 고차함수. 부작용 최소화	Haskell, Scala, Elixir, JavaScript 일부

 

 

2. 자바스크립트 동작 및 개발 환경 설정

 

1) Node.js 란

: Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임, 이벤트 기반, 논 블로킹 I/O 모델을 사용해 가볍과 효율적

: 패키지 생태계는 npm

 

런타임이란? 특정 언어로 만든 프로그램들을 실행할 수 있는 환경

자바스크립트 런타임 = 자바스크립트 실행기

자바스크립트 개발 목적: 웹 브라우저 위에서 동작하기 위한 언어

 

Node.js = Javascript Runtime 환경 = 자바스크립트를 실행하기 위한 환경 = JS를 브라우저 없이 실행시킬 수 있는 환경

NPM(Node Package Manager[module]) = JS 오픈소스 라이브러리 생태계

 

2) 이벤트 기반이란

자바 스크립트는 기본적으로 싱글 스레드임

• 메인 스레드 실행 - 그 후 더 이상 할 일이 없으면 idle 상태(대기)로 들어감 - 이때 브라우저 or Node.js 이벤트 루프가 이벤트 큐 감시 - 이벤트가 들어오면 등록된 콜백 함수 실행
• JavaScript는 이벤트가 발생할 때 등록된 함수가 실행되도록 구성된 비동기 중심의 언어

 

3) 동기 (Synchronous) vs 비동기 (Asynchronous)

 

• 동기(Synchronous) : 코드 진행 영역에서 함수를 호출하고 호출된 함수의 작업의 실행 상태를 계속 신경을 씀
• 비동기(Asynchronous) : 코드 진행 영역에서 함수를 호출하고 호출된 함수의 작업의 실행 상태를 신경쓰지 않음

 

4) Blocking vs Synchronous

• Blocking vs Non-Blocking : 코드 진행이 멈추는지 여부에 따라 결정
• Synchronous vs Asynchronous : 호출하는 함수가 호출되는 함수의 작업 완료를 신경쓰는지에 대한 여부

→ 일반적으로 (Syncrhonous – Blocking), (Non-Blocking - Asyncrhonous)이 함께 사용되는 경우가 일반적으로 많음 - 왜?

• 코드진행이 멈춘다는 건 실행 상태를 안다는 것과 마찬가지
• 함수의 작업 완료를 신경쓰지 않는다는 건 코드가 실행 상태를 몰라도 되도록 Non-Blocking하게 진행할 것이기 때문!

 

5) Node.js 설치

나는 Mac 을 사용하고 있어서 homebrew 를 이용했다. 아래와 같이 명령어를 입력하면 바로 설치 가능!

강사님께서 homebrew 의 버전은 크게 관련 없지만 node.js 는 v22.16.0 을 사용하는 게 좋다고 하셨다.

$ brew install nvm
$ mkdir ~/.nvm
$ vim .zshrc

# NVM
export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh

$ source .zhsrc
$ nvm install node
$ nvm use node

$ node --version # node version 확인
$ npm --version # npm version 확인

 

 

2. JavaScript 기초 및 문법

1. 변수의 자료형

 

1) 변수 (Variable)

• var : 함수 단위로 유효, 재선언 가능 → 혼란의 원인 (가급적 사용 ❌)
• let: 블록 단위 유효, 값 변경 가능 → 일반 변수 선언 시 사용

⭐️ var 를 쓰지 않고 let 을 사용하는 이유는 호이스팅 때문!
호이스팅이란? 변수 선언이 코드의 최상단으로 끌어올려지는 자바스크립트의 동작 방식

• var는 선언이 끌어올려져 의도치 않은 동작(버그)을 유발하기 쉬워서, 블록 스코프 + 안전한 let을 권장하는 것
• let 을 사용해도 호이스팅이 발생하지만 TDZ로 보호되어서 에러가 발생하기 때문에 버그가 발생할 가능성이 없다

TDZ란? Temporal Dead Zone, 일시적 사각지대를 말하며, let과 const는 선언되기 전까지 접근 자체가 불가능한 구간(TDZ)이 존재함

 

2) 상수

• const: 블록 단위 유효, 값 변경 불가 → 상수 또는 고정 객체 참조 시 사용

 

3) Primitive DataType (원시 자료형)

자료형	설명
string	문자열 (예: "hello")
number	숫자 (정수, 실수 구분 없음)
bigint	매우 큰 정수 (예: 123n)
boolean	참/거짓 (true, false)
undefined	값이 할당되지 않음
null	값이 없음을 명시적으로 표현
symbol	고유한 식별자 (주로 내부 식별용)

 

 

2. 숫자형

 

1) 산술연산자

연산자의미예시 (a = 10, b = 3)결과

연산자	의미
+	덧셈
-	뺄셈
*	곱셈
/	나눗셈
%	나머지
**	거듭제곱
++	1 증가
--	1 감소

 

 

3. Boolean 자료형과 비교/논리 연산자

 

1) Boolean형

연산자	의미
true	참
false	거짓

 

Boolean형 변환

• 숫자 자료형은 0이면 false, 나머지는 true
• 문자열은 값의 요소가 있으면 true, 빈 문자열은 false
• 그 외에는 null 혹은 undefined 이면 false, 그 외 object, array면 true

 

2) 비교연산자

연산자	의미	예시(a = 3, b = 5)	결과
==	느슨한 동등 (값만 비교)	a == "3"	true
===	엄격한 동등 (값 + 타입 비교)	a === "3"	false
!=	느슨한 다름	a != 5	true
!==	엄격한 다름	a !== "3"	true
>	크다	b > a	true
<	작다	a < b	true
>=	크거나 같다	a >= 3	true
<=	작거나 같다	a <= 2	false

 

3) 논리연산자

연산자이름의미 및 동작예시결과

연산자	이름	의미 및 동작	예시	결과
&&	논리 AND	모두 true면 true	true && false	false
||	논리 OR	하나라도 true면 true	true || false	true
!	논리 NOT	true ↔ false 반전	!true	false

 

 

연습문제)

사용자로부터 점수를 3개 입력받아 모든 점수가 65점보다 클 경우 true 아닐경우 false를 출력하세요.

const readline = require('readline')
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
})

rl.on('line', function (line) {
    // 코드 작성
    const scores = line.split(' ').map(Number);
    const allAbove65 = scores.every(score => score > 65);
    console.log(allAbove65);

    // 코드 종료
    rl.close();
});

 

 

4. 문자열 자료형

 

1) 문자열 자료형

let first = "Hello, World"
let multi = "Hello, World \n
	     Hello Js"

 

2) Template Literals (문자열 리터럴)

let multi = `Hello World
	     Hello, JS`
         

let name = "마이캣호두"
let multi = `Hello ${name}
	     Hello, JS`

 

` (back-tick)을 사용하면 문자열 내에서 변수를 사용하기 쉽다 = 문자열 포맷팅

 

 

3) 이스케이프 코드

이스케이프 코드	의미	예시
\n	줄바꿈	"Hello\nWorld"
\t	탭(들여쓰기)	"Name:\tKim"
\"	큰따옴표 삽입	"He said: \"hi\""
\'	작은따옴표 삽입	'It\'s mine'
\\	역슬래시 삽입	"C:\\Users\\name"

 

이스케이프 코드는 문자열 안에서 줄바꿈, 따옴표, 탭, 역슬래시 등의 특수 문자를 표현하기 위한 표기법이다.

 

 

4) 문자열 관련 함수 및 속성

함수	설명	예시
.length	문자열 길이 반환	"hello".length → 5
charAt(i)	i번째 문자 반환	"abc".charAt(1) → 'b'
toUpperCase()	대문자로 변환	"abc".toUpperCase() → 'ABC'
toLowerCase()	소문자로 변환	"ABC".toLowerCase() → 'abc'
indexOf(str)	문자열 처음 위치 반환 (없으면 -1)	"hello".indexOf("e") → 1
includes(str)	문자열 포함 여부 (true/false)	"abc".includes("b") → true
startsWith(str)	주어진 str으로 시작하는지 여부	"abc".startsWith("a")  →  true
endsWith(str)	주어진 str으로 끝나는지 여부	"abc".endsWith("c")  →  true
slice(start, end)	일부 문자열 추출 (end는 미포함)	"hello".slice(1, 4) → 'ell'
substring(start, end)	slice와 비슷하지만 음수 미지원	"hello".substring(1, 4) → 'ell'
split(token)	구분자로 나누어 배열로 반환	"a,b,c".split(",") → ['a','b','c']
trim() / trimStart() / trimEnd()	앞뒤 공백 제거	" hi ".trim() → 'hi'
repeat(n)	문자열 n번 반복	"a".repeat(5) → 'aaaaa'

 

연습문제)

a=" 90:30:80 "이고 :을 기준으로 각각 수학점수, 영어점수, 과학점수이다. 문자열 함수를 이용해 공백을 제거하고, 각 점수를 각각 math, english, science 변수에 저장한 후, average 란 변수에 평균값을 저장하고 출력하시오. 이 때 출력의 형태는“평균 점수는~~입니다.”로 하시오.

let scores = " 90:30:80 ";

// 코드 작성
let [math, english, science] = scores.trim().split(":").map(s => Number(s.trim()));
let average = (math + english + science) / 3;
console.log(`평균 점수는 ${average}입니다.`);

// 코드 종료

 

 

5) 객체와 배열 - Object와 Array

객체는 이름 있는 속성들의 집합배열은 순서 있는 값들의 리스트

항목	객체	배열
구조	키-값 (key-value)	순서 있는 값 리스트
접근 방식	obj.key 또는 obj["key"]	arr[index]
용도	구조화된 정보 표현	목록, 순차 데이터 저장
메서드	없음 또는 사용자 정의	push, pop, map, 등

 

5. 함수와 클로저

1) 자바스크립트의 함수 - 기본 함수 형태, 함수 표현식과 화살표 함수

# javascript interpreter가 코드를 parsing이 되었다면, 함수 선언문 정의 되기 전에 코드를 호출하여도 실행 가능
function <함수이름> (인자) {
     // 코드
}

# 이 함수 형태는 모두 함수를 정의하여 변수에 할당하는 형태, 함수 선언문 정의 되기 전에 코드 호출 불가능
const 함수이름 = (인자) => {
     // 코드
}
const 함수이름 = function(인자) {
     // 코드
}

 

2) 함수의 return type 에 대해서

함수의 리턴이 함수일 수도 있다! 함수도 하나의 데이터 타입으로 바라보는 관점을 가지자

 

3) 스코프와 클로저

• 스코프(Scope)
  • 변수가 "어디까지 접근 가능한지"를 결정하는 규칙
  • 자바스크립트에서는 블록{ } 또는 함수 단위로 스코프가 만들어지고, 변수는 자신이 선언된 범위 안에서만 유효함
• 클로저(Closure)
  • 함수가 선언될 때의 외부 변수들을 기억하는 기능
  • 함수가 자신이 선언된 스코프의 변수들을 계속 참조할 수 있는 현상
  • 함수가 반환되거나 다른 곳으로 전달된 후에도 그 외부 변수에 접근 가능

클로저는 함수를 핸들링하고 바꾸고 싶은데 그걸 외부에서 접근할 수 있도록 하고 싶지는 않을 때 사용

 

클로저를 많이 쓰면 문제가 생긴다?
변수가 안에서 계속 참조하고 있다 = 해제가 안 되면 컴퓨터 내에서 변수가 계속 쌓인다, 불필요한 변수가 쌓인다, 성능 문제! but 많이 쓰임

 

연습문제)

시작 값과 단계 값을 받아서, 호출할 때마다 시작 값에서부터 단계 값만큼 증가하는 값을 반환하는 함수를 만드세요.

function createIncrementer(start, step) {
    // 여기에 코드를 작성하세요.
    let current = start;

    return function() {
        current += step;
        return current;
    };

}
const incByOne = createIncrementer(5, 1);
console.log(incByOne()); // 6
console.log(incByOne()); // 7

const incByTen = createIncrementer(10, 10);
console.log(incByTen()); // 20
console.log(incByTen()); // 30

 

 

6. 배열

 

1) 배열 관련 함수 및 속성

구분	이름	설명	예시
속성	.length	배열의 길이(요소 개수)	arr.length
검색	at(index) / [index]	index에 해당하는 문자 반환	arr.at(3) / arr[3]
검색	indexOf(char)	값의 인덱스 반환 (없으면 -1)	arr.indexOf(2)
검색	find()	조건을 만족하는 첫 요소 반환	arr.find(x => x > 3)
확인	includes(elem)	값이 포함되어 있는지 확인	arr.includes(3)
추출	slice()	일부 요소 추출 (원본은 그대로)	arr.slice(1, 3) → [2, 3]
문자열화	join(token)	구분자로 문자열 생성	arr.join(", ") → "1, 2, 3"
반전	reverse()	배열 순서 반전	arr.reverse()
추가/삭제	push(elem)	마지막에 요소 추가	arr.push(4) → [1, 2, 3, 4]
추가/삭제	pop()	마지막 요소 제거	arr.pop() → [1, 2]
추가/삭제	splice(start, deleteCount, ...items)	요소 추가/제거/교체	arr.splice(1, 1, "a")
추가/삭제	shift()	첫 요소 제거	arr.shift() → [2, 3]
추가/삭제	unshift(elem)	앞에 요소 추가	arr.unshift(0) → [0, 1, 2, 3]
순회	forEach(callbackFn)	각 요소에 대해 함수 실행	arr.forEach(x => console.log(x))
변형	map(callbackFn)	각 요소를 변형한 새 배열 생성	arr.map(x => x * 2)
필터링	filter(callbackFn)	true인 요소만 추출한 배열 생성	arr.filter(x => x > 2)
결합	concat(...items)	배열 합치기	arr.concat([4, 5])
집계	reduce(callback, initialValue)	누적 계산	arr.reduce((a, b) => a + b)
정렬	sort()	배열 정렬 (기본은 문자열 정렬)	arr.sort()

 

 

연습문제)

다음 withLogging 함수가 동작하도록 ask 함수를 정의하여라.

** 브라우저에서 동작하는 코드입니다.

function add(a, b) {
    return a + b;
}

function addWithLogging(fn) {
    return function (...args) {
        console.log(`입력값: ${args}`);
        
        const result = fn(...args);
        console.log(`결과값: ${result}`);
        return result;
    };
}

const addLogged = addWithLogging(add);
const result = addLogged(1, 2);

 

연습문제)

여러 개의 단항 함수들을 순서대로 적용하는 파이프라인 함수를 작성하세요.

function pipeline(...fns) {
    return function(x) {
        return fns.reduce((acc, fn) => fn(acc), x);
    };
}

const double = x => x * 2;
const increment = x => x + 1;
const square = x => x * x;
const pipelineFunc = pipeline(double, increment, square);

console.log(pipelineFunc(5));

 

연습문제)

function ask(askFunc, yesFn, noFn) {
    return askFunc() ? yesFn() : noFn();
}

// 이건 브라우저에서만 동작
ask(
    () => confirm("agree?"),    //askFunc
    function () {
        alert("agree")
    },
    function () {
        alert("cancel")
    }
)