[TIL] Day39 - JavaScript 문법 1

1. 데이터 가공 로직

2. 인터랙션 interaction > 비동기, rendering, event

3. 유지보수

 

☑️ 환경세팅

IDE Integrate Development Environment

vscode, webstorm

브라우저 : chrome

터미널 : iTerm

 

브라우저, 개발자도구, 디버깅

동일한 자바스크립트 > 브라우저마다 보여지는 형태가 다를 수 있다.

 

HTML : 화면 구성 문서 > 파싱 + 로드

 

강의에서는 파일경로로 브라우저에 띄우는 방법을 알려줬는데

Live Server 확장툴을 사용해서 자동저장됨에 따라 실시간으로 로드하는 방법!

Live Server - Visual Studio Marketplace

vscode에 live Server 툴 설치하고

자동저장을 체크하면 간편하게 사용 가능!

 

개발자 도구 탭 `control + alt + i`

• elements : 로드된 파일의 소스
• console : 자바스크립트 실행
• sources : 로드된 모든 소스파일
• network : 네트워크 통신로그
• performance : 웹 성능
• application : 브라우저 저장 기능

 

디버깅 : 이슈를 해결하기위해 분석하는 과정. 개발 단계 중에 발생하는 시스템의 논리적인 오류나 비정상적 연산을 찾아내고, 그 원인을 밝히고 수정하는 작업 과정

의심가는 부분에 console.log 함수 심기

`console.log`, `console.dir`

개발자 도구의 source 탭 활용

breaking point 를 찍는다.

 

☑️ JS 언어 특징

인터프리터 언어

사용자가 이해한 언어를 > 기계어로 번역한다.

• 컴파일 방식
  • 사람 > pre-processing(컴파일) > 기계어 > processing > 컴퓨터에서 실행
  • 실행 전 한단계를 거쳐야하는 수고로움. 빠른 속도
• 인터프리터 방식 (자바스크립트)
  • 사람 > processing > 컴퓨터에서 실행
  • 변환하면서 진행한다.
  • 컴파일 단계가 없고, 실행속도가 조금 더 느리다.

 

변수 : 동적 타입 언어

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

 

함수 : 일급 객체의 특징

함수에 일급 객체의 특징을 부여하였다.

함수와 객체를 동일하게 사용하고, 값과 동일하게 취급한다.

• 변수 할당문
• 객체 프로퍼티 값
• 배열의 요소
• 함수 호출의 인수
• 함수 반환문

 

상속 형태 : 객체지향

객체지향 프로그래밍 > 구조지향

- 클래스 기반 X

객체를 프로토타입화 하여서 복제과정을 통해 상속을 부여한다.

 

패러다임 지원

• 명령형 프로그래밍
• 함수형 프로그래밍
• 객체지향 프로그래밍

 

💡 JS 표준화

탄생배경, ECMAScript 2015+

버전에 따라 지원하는 JS 스펙이 다르다.

크로스 브라우징 이슈가 발생해 > ECMA 262 기준에 따라 표준화 작업을 하자!

구현과 브라우저 지원 버전이 다를때 표준화를 돕는 툴 `Bable` `eslint` `webpack`

 

ECMAScript 2015 == ES2015 == ES6

현재 2025 버전까지 나왔음

ECMAScript® 2025 Language Specification

 

ES6, CanIuse

15 년동안 개발함

대규모 어플리케이션, 라이브러리 생성, 다른 언어의 컴파일 지원

모듈, 클래스 선언, 블록레벨 스코프, iterator generator, 비동기 프로그래밍, promise, 구조분해 패턴, 등의 개선

 

브라우저마다 ES에 맞춰서 세팅하지 않는다. 아래 사이트에서 기능을 지원하는지 확인할 수 있다.

Can I use... Support tables for HTML5, CSS3, etc

 

개발에는 사용하는데, 브라우저 지원이 안될경우? 도구 사용

• polyfill : 동일한 기능을 구현되는 코드로 다시 작성한 코드
• bable : ES6 이전의 자바스크립트로 변환하는데 사용되는 도구. 변환, 폴리필 기능 동시에 제공

 

☑️ 데이터와 형태

💡 변수

데이터를 기억하기 위한 메모리(컴퓨터의 기억장치) 활용하고, 사용시점에 데이터를 찾을때 메모리의 주소값을 사용한다.

주소값의 별칭, 식별자 == 변수 를 통해 데이터에 접근한다.

즉 변수란, 데이터를 담아둔 메모리의 주소를 쉽게 식별하기 위해 붙인 이름이다.

 

키워드 > 변수명 > 할당연산자 > 값

`let foo = 1;`

 

변수 생성 방법과 호이스팅

코드 평가 단계(실행 컨텍스트) + 실행 단계

1. 선언 단계
   • 변수를 변수 객체에 등록한다.
   • 변수객체 : 실행 컨텍스트 내에 변수가 등록된 객체
2. 초기화 단계
   • 변수를 메모리에 할당하고, undefined로 초기화 한다.
   • 초기화가 되지 않았을 경우, 변수에 접근할 수 없다.
3. 할당 단계
   • undefined 로 초기화된 변수에 실제로 값을 할당한다.

 

var

코드 평가 단계 시 > 선언단계와 초기화 단계 동시에 진행 `foo = undefined`

코드 실행 단계 시 > 값 할당 진행 `foo=1`

- 코드 평가 시점에 초기화가 되어있으므로, 할당문이 실행되기도 전에 참조가 가능하다 `호이스팅`

 

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

 

단점

• 키워드의 생략 가능
• 중복 선언 가능
• 변수 호이스팅 : 변수의 결과 예측에 혼선을 준다
• 전역변수화 : 무분별한 변수 접근으로 어디에서든 global 접근이 가능하기에, 변수값 변경, 결과예측에 혼선을 준다

 

const, let

코드 평가 단계 시 > 선언단계 진행 `foo`

코드 실행 단계 시 > 초기화, 값 할당 진행 `foo=undefined` `foo=1`

블록레벨스코프에 해당한다. 코드블록 내에서 접근 가능한 스코프.

예측 가능한 범위 내에서 변수 변경이 일어난다.

 

💡 전역 스코프 > 함수 레벨 스코프 > 블록 레벨 스코프

 

특징

• const
  • 수정이 불가능한 상수 변수를 선언할 때 사용한다.
  • 무조건 첫 선언시 값 할당해야 한다.
• let
  • 재할당이 가능한 변수 타입이다.
  • 값을 할당하지 않아도 생성된다.

 

변수 실습

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

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

디버거로 테스트 했을때, var 키워드로 정의한 변수 a 만 undefined 값을 가지고 있는것을 볼 수 있다.

 

변수 네이밍 컨벤션   

• camelCase
• sname_case
• PascalCase
• CONSTANT_CASE : 상수변수에서만 사용한다.

 

💡 형태

JS 자료형 데이터타입 - 원시, 객체 타입

데이터는 데이터의 형태를 파악하고, 적합한 로직처리를 한다. 이때 데이터의 종류를 데이터 타입, 자료형이라고 한다.

• 원시 타입
  • String, Number, Bigint, Undefined, Null, Boolean, Symbol 7가지
  • 값은 변경 불가능한 값이다 `immutable value`
  • 값으로써 전달된다. 참조 형태로 전달되는게 아니다.
  • JS 내장 객체 중 원시 래퍼 객체 와 다르다
• 객체 타입
  • 원시 타입 제외한 모든것
  • 여러 형태로 분류할 수 있다.
  • 일반 객체와 함수, 날짜, 인덱스 컬렉션, 키 컬렉션 등...
  • 참조 형식으로 전달된다. `Pass by reference` : 객체의 메모리 주소값이 복사되어(deep / shallow) 전달된다.
  • 객체는 속성들을 변경할 수 있는 mutable 한 값이다.

 

Number Type

모든 숫자를 실수로 처리한다! 정수타입 없다

 

배정밀도 64 비트 부동소수점 IEEE 754

IEEE 754: 전자기술자 협호의 부동소수점 표현방식 표준

연산할때 근사값으로 처리하기 때문에 0.1+0.2 != 0.3

 

-(2^53 -1) ~ 2^53 -1의 수

`Number.MAX_SAFE_INTEGER;`

 

infinity : 무한대를 나타내는 숫자. 음수 -infinity도 있다

NaN : Not A Number. 숫자가 아니다

 

BigInt Type

임의 정밀도로 정수를 나타낼 수 있는 원시값. Number의 최대값을 넘는 정수도 안전하게 연산한다.

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

 

String Type

텍스트 데이터

U TF-16 코드 단위의 시퀀스

16bit 정수값의 요소로 구성, 각 요소가 배열처럼 string의 한자리를 차지한다. 그래서 0번째 index 부터 시작한다.

원시 타입, == 문자값은 불변한다.

 

쌍따옴표"", 백팃`으로 표현

백팃 : ES6부터 가능하고, 문자열 처리(줄바꿈, 표현식)기능을 제공한다.

String interpolation 작동한다. `hi ${표현식}`

 

Boolean Type

논리적 데이터 유형

참 true 거짓 false 의 값만 가질 수 있다.

상태값 : input tag의 checkbox 타입의 checked 상태

flag값 : 특정 UI의 노출 여부를 보여주는 변수의 상태 isShow

 

Undefined Type

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

초기화 단계에서의 undefined 는 개발자가 의도해서 넣은 값은 아니지만, 이후에 강제로 할당할 수 있다.

 

Null Type

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

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

`===` 일치연산자 사용해야한다. null type이 object라고 나오는 스펙 버그가 나타나기 때문!

 

❓ Symbol Type

ES6에 추가되었고, 중복되지 않는 유니크한 값이다.

내부에서만 접근할 수 있도록 전용 객체 속성의 키로 사용된다.

Symbol - JavaScript | MDN

const foo = {
	[Symbol.for('apple')]: 'fruit',
};
console.log(foo[Symbol.for('apple')]);
//console
'fruit'

 

Reference Type = 객체 object 타입

다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조

속성과 method 포함한다.

원시타입의 값을 제외한 모든것은 객체라고 할 수 있다.

 

mutable 변경가능한 값

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

힙메모리에 저장된다. 동적으로 변화할수 있기 때문에

pass-by-reference 참조타입, 참조값으로 처리한다.

 

동적 타입 언어

타입이 동적으로 변환된다. 의도와 관계되어

• 명시적 타입 변환 : 의도적
  • 원시 래퍼 객체(메서드) : `.toString()` `Number()` `Boolean()`
• 암묵적 타입 변환 : 의도와 무관
  • 산술연산자에 의해 변경되는 경우
    • `값 + ""` > 문자열 타입
    • `값 * 1` > 숫자 타입으로 변환
    • `!!값` > 불리언 타입으로 변환 (dobble not)
  • 타입추론이 어려워져, 불필요한 디버깅 시간이 발생한다.
  • 해결하기위해 typeof나 일치연산자를 사용해 타입 guard 구현한다.
  • superSet 타입스크립트를 사용한다.

 

☑️ 데이터 처리 - 연산자

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

단항, 산술, 관계, 이진. 삼항, 할당, 옵셔널, 쉼표

단항 연산자

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

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

 

산술 연산자

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

• 단항 산술 연산자 : ++ , -- , +, -
  • 전위, 후위 연산자
• 이항 산술 연산자 : + , - , * , / (몫) , % (나머지)

 

관계 연산자

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

• in : 객체 내에 속성이 존재할 경우 true  반환
• instanceof : 특정 객체 타입에 속하면 true 반환. 해당 객체가 특정 객체의 인스턴스인지 확인하는 연산자이다.

*자바스크립트 프로토타입 기반 객체지향 언어 > instance를 생성하며, 객체의 속성이나 메서드를 상속받는다

*객체를 instance화 하여 처리하는 방법

 

비교 연산자

비교하고, 결과가 참인지에 따라 boolean 값을 반환한다. 숫자, 문자열, 논리형, 객체타입이 비교가능

• == 동등 연산자
• === 일치 연산자 : 타입도 같으면 true
• != 부등 연산자
• !== 불일치 연산자 : 타입도 다르면 true
• >, >=, <, <= 

 

논리 연산자

두개의 피연산자 중 하나를 반환하고, 반환값은 무조건 boolean 값이 아니다

• `A  && B` AND 연산자 : A가 false 일경우 A 반환, true 일경우 B를 반환. null 검사에 활용된다.
• `A || B` OR 연산자 : A가 false 일경우 B 반환, true 일경우 A를 반환. 캐싱 값에 대해서도 사용한다.

단축평가 논리 : 첫번째 식을 평가한 결과에 따라서 두번째 식 평가를 실행한다.

null, undefined, 빈문자열 > false로 평가된다.

 

기타 연산자들

• 쉼표 연산자 : 두 연산자를 모두 평가한 수, 오른쪽 피연산자의 값을 반환한다
• 문자열 연산자 : 두 문자열 값을 서로 연결하여 새로운 문자열을 반환한다. (템플릿 리터럴로 대체하기)
• 옵셔널 연산자 : 객체의 속성을 참조시, 유효하지 않는 경우 > 에러를 발생시키지 않고 undefined를 반환한다.
• 할당 연산자 : 오른쪽 피연산자가 왼쪽 피연산자에 값을 할당한다.
  • `+=` `-=` `*=` `/=` `%=` `**=` `&&=` `||=`
• 삼항 연산자 : if 문을 한줄로! `조건문? 참값 : 거짓값;`

 

☑️ 함수

중복 로직 처리, 유지보수를 위해 처리기에서 모든 로직을 동작하게 하고, 코드에서는 함수를 실행시키기만 하는 역할이다.

특정 동작을 수행하는 코드 일부분을 의미하고, 외부코드가 호출할 수 있는 하위 프로그래이며, ()괄호를 사용해 호출한다. `함수명()`

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

함수는 객체처럼 속성, 메서드를 가진다. 그러나 외부에서 호출이 가능하지만, 객체는 외부에서 불가능하다.

 

자바스크립트 함수 = 일급객체

일급객체 : 일반적으로 적용가능한 연산을 모두 지원하는 객체

• 일급객체는 함수의 실제 매개변수가 될 수 있다.
• 일급객체는 함수의 반환값이 될 수 있다.
• 일급객체는 할당명령문의 대상이 될 수 있다. (변수 등에 할당 가능)
• 일급객체는 동일비교의 대상이 될 수 있다. (값으로 표현 가능)

 

JS 함수 특징

함수 이름, 매개변수 (함수에 전달되는 인수, 유사배열 list 형태), 함수 몸체

 

매개변수 parameter

• 기본값 매개변수 default fuction parameter : 매개변수값이 없거나 undefined 가 전달될경우 대체되는 초기값이다. 매개변수에 할당 연산자와 함께 초기값을 할당한다
• 나머지 매개변수 Rest parameter : 가변항 함수, spread 연산자. 함수가 정하지 않는 매개변수를 배열로 받을 수 있다. 함께 사용된다.
• arguments 객체 : 함수에 전달되는 인자들을 참조할 수 있는 객체
  • function 내장 객체를 상속받는다. function 기본 속성으로 가지는 arguments
  • 형태 : 배열 X, 유사배열 형태 > 배열내장메소드 사용불가

 

매개변수 parameter : 함수를 정의할때 사용하는 변수. 함수 안에서 정의 및 사용에 나열되어있는 변수

인자 argument : 함수가 호출될때 넘기는 실제 값. 

 

생성 - 선언문, 표현식, function 생성자 함수, 화살표 함수

• 함수 선언문
  • `function 함수명(){};`
• 함수 표현식
  • 익명 함수 : 함수를 변수에 할당하는 형태. 함수명 생략하고 변수명으로 함수 사용하는 방식
  • 기명 함수 : 함수명 작성되는 형태. 외부에서 호출 불가능
• function 생성자 함수
  • function 자바스크립트 내장 객체
  • `new Function(arg1, arg2, ..., 'return 1')`
  • 함수 표현식, 선언문의 축약법과 비슷하다.
  • 인스턴스 생성하고, new 내장객체를 생성해서 사용한다.
  • 마지막은 명령문의 문자열을 전달한다.
  • 일반적으로 사용이 적다.
• 화살표 함수
  • ES6 이후부터 가능
  • function 키워드 사용하지 않고 `=>` 화살표 사용한다.
  • `const 변수명 = (arg, ..) => {명령문};`

 

사용 패턴 - IIFE, 재귀, 중첩, 콜백

• IIFE 즉시 실행 함수
  • 함수 정의와 동시에 최초 1회 실행되고, 다시 호출할 수 없다
  • 초기화 처리에 주로 사용된다
  • 함수 전체를 괄호로 감싸고 밖에 바로 ()를 호출한다
• 재귀함수
  • 자기 자신을 호출하는 함수 Recursivce function
  • 무한히 호출될 수 있으므로 탈출조건을 초반에 정의해야한다
  • 로직파악에 어렵기에 정말 필요할때만 한정적으로 사용하기!
• 중첩함수
  • 내부함수 inner function
  • 부모함수 내의 변수, 부모 외부의 변수에도 접근할 수 있지만
  • 부모함수는 자식함수에 접근할 수 없다.
  • 스코프체인
• 콜백함수
  • 함수의 매개변수가 될 수 있다.
  • 원하는 특정 시점에 호출할 수 있도록 만든다.
  • 화살표 함수 형태로 인자를 넘긴다.

 

⭐ 실습

//일급객체의 개념
// 일급객체는 함수의 실제 매개변수가 될 수 있다.
// > bar
function foo(arg) {
  arg();
}
function bar() {
  console.log("bar");
}
foo(bar);

// 일급객체는 함수의 반환값이 될 수 있다.
// > barrrr
function foo(arg) {
  return arg;
}
function bar() {
  console.log("barrrrr");
}
foo(bar)();

// 일급객체는 할당명령문의 대상이 될 수 있다. (변수 등에 할당 가능)
// 일급객체는 동일비교의 대상이 될 수 있다. (값으로 표현 가능)
// > 1
const foo = function (arg) {
  return console.log(arg);
}
foo(1);

//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
//매개변수의 개념
// 기본값 매개변수 default fuction parameter
// > undefined > 1
function foo(arg=1) {
  console.log(arg);
}
foo();

// 나머지 매개변수 Rest parameter
// > arg = 1, rest = [2,3,4]
function foo(arg, ...rest) {
  console.log(arg);
  console.log(rest);
}
foo(1, 2, 3, 4);

// arguments 객체
// > [Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 , length: 4, callee : f foo(), __proto__ : {}}
function foo(arg) {
  console.log(arguments);
}
foo(1, 2, 3, 4);

//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// 함수 생성 방법
// 함수 선언문
// > foo
function foo() {
  console.log("foo");
}
foo();

// 함수 표현식
// > foo2
const foo = function() {
  console.log("foo2");
}
foo();

// Function 생성자 함수
// > foo3
const foo = new Function('console.log("foo3")')
foo();

// 화살표 함수 표현식
// > foo4
const foo = () => {
  console.log("foo4");
};
foo();

//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
//함수 형태
// IIFE 즉시 실행 함수
// > foo
(function foo() {
  console.log("foo");
})()

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

// 중첩함수
// > 1
function foo(arg) {
  function bar() {
    console.log(arg);
  }
  bar();
}
foo(1);

// 콜백함수
// > 1
function foo(arg) {
  arg();
}
foo(() => {
  console.log(1);
});

 

☑️ 배운 점

일급 객체의 특징

ES6 >  ECMAScript 2015 라는것

원시, 객체 타입의 분리!

Symbol Type 개념과 사용법.

`arguments` 객체

일급객체의 특징이 함수에 적용되는 부분 + 구현

매개변수와 인자 개념과 차이점

function 생성자 함수, IIFE 즉시 실행 함수