JavaScript

Jnary·2024년 4월 25일

ES6 JavaScript Primitive Data Type REST Reference Data Type Spread 연산자 this var let const 객체 프로퍼티 구조 분해 할당 연산자 일급객체 일급함수 호이스팅

Web Application

목록 보기

12/15

JavaScript란?

정의

웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어
인터프리터 언어
- 별도의 컴파일 작업 수행 X
- 소스 코드를 바로 실행하는 환경
동적 타입 언어
- 데이터 타입 직접적으로 선언 X
- 값 할당 과정에서 자동으로 타입 결정 → 자바스크립트 엔진이 추론

일급 객체 (함수)

일급 객체 조건
1. 무명의 리터럴(값)로 표현 가능
2. 변수나 자료구조(객체, 배열)에 저장 가능
```
var increase = function (num) { return ++num; }
```
3. 함수의 매개변수로 전달 가능
4. 반환값으로 사용 가능
```
function makeCounter(increase) {
	return function() {
		num = increase(num);
		return num;
	};
}
```
응용
- 콜백함수 : 다른 함수에 인자로 전달하는 함수
- 고차함수 : 함수 반환하거나 다른 함수를 인자로 사용하는 함수
- 클로저 : 함수가 선언됐을 때의 렉시컬 환경과의 조합

변수

변수 사용 과정

var let const 키워드로 선언
할당 연산자를 통해 할당
변수명을 통해 참조

값을 할당하지 않은 변수 : undefined 로 초기화
선언하지 않은 변수 : ReferenceError

var let const

	var	let	const
범위	function scope	block scope	block scope
변수 재선언	O	X	X
변수값 재할당	O	O	X
초기화 필요	X	X	O

var 의 문제점
1. 함수 레벨 스코프 → 전역 변수의 남발
2. var 키워드 생략 허용 → 의도치 않은 변수의 전역화
3. 중복 선언 허용 → side effect 발생
4. 변수 호이스팅 → 변수 선언 전에 참조 가능
  
  → 단점 보완하고자 ES6 때 let const 추가

Scope

함수 레벨 스코프 (Functional-level scope)
- 선언된 함수 내에서만 유효
- 함수 외부에서 참조 X
- 함수 외부에서 선언한 변수 = 전역 변수(Global scope)
블록 레벨 스코프 (Block-level scope)
- 코드 블록 내에서만 유효
- 코드 블록 외부에서 참조 X

스코프 체인 (Scope chain)
- 상위 스코프 방향으로 이동하면서 선언된 변수 검색
  
  스코프와 스코프 체인 | JavaScript Basics
Lexical scope
- 정적 스코프 (static scope)
- 어디에 선언했는지에 따라 상위 스코프 결정
- ↔ 동적 스코프: 어디서 호출했는지에 따라 결정

호이스팅

코드 실행 전 모든 선언문을 메모리에 로드

let const 호이스팅 발생 → TDZ에 의해 변수 접근 불가

console.log(cake); // undefined
var cake;

console.log(lemon); // Error: Uncaught ReferenceError: lemon is not defined
let lemon;

데이터 타입

필요한 이유

데이터를 메모리에 저장할 때 확보해야하는 메모리 공간의 크기
할당할 수 있는 유효한 값에 대한 정보
2진수 데이터를 어떻게 해석할 지에 대한 정보

primitive data type

immutable value 변경 불가
- 함수형 프로그래밍의 핵심 원리
- 재할당은 가능
pass-by-value 값에 의한 전달
- 깊은 복사
- 메모리 주소가 아닌 내부의 값을 복사

boolean
- 논리적 참(true), 거짓(false)
- falsy값 : "" null undefined 0 NaN
number
string
undefined
- 선언 O, 값 할당 X
- 개발자가 의도적으로 할당한 X
null
- 개발자가 의도적으로 값 없음을 명시

symbol

충돌 위험없는 유일한 객체 프로퍼티 키 생성
enumerable X (열거 불가)

var mySymbol = Symbol('Symbol에 대한 설명');
var obj = {};
obj[mySymbol] = 123;

object/reference type

mutable value
pass-by-reference
- Object.freeze 를 통해 프로퍼티 변경 방지 (객체의 방어적 복사)
원시값을 제외한 나머지 값 (ex. 배열 함수 정규표현식)

연산자

표현식

리터럴 표현식 : 10
식별자 표현식 : sum
연산자 표현식 : 10 + 20
함수/메소드 호출 표현식 : square()

산술 연산자

이항 산술 연산자

2개의 피연산자를 대상으로 연산
+ - * / % **

1 + null        // 1 (null -> 0)
1 + undefined   // NaN (undefined -> NaN)

단항 산술 연산자
- 1개의 피연산자를 대상으로 연산
- ++ --
문자열 연결 연산자
- + 연산자의 피연산자 중 하나 이상이 문자열인 경우
```
'1' + 2   // '12'
```

할당 연산자

우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당
= += -= *= /= %=

비교 연산자

동등/ 일치 비교 연산자

== 동등 값이 같음
! = 부등 값이 다름
=== 일치 값과 타입이 같음
! == 불일치 값과 타입이 다름
```
12 == '12'   // true
12 === '12'  // false
```
대소 관계 비교 연산자
- > >= < <=

==	동등	값이 같음
! =	부등	값이 다름
===	일치	값과 타입이 같음
! ==	불일치	값과 타입이 다름

암묵적 타입 변환 (타입 강제 변환)
- context 고려
- + 문자열 타입으로 변환
- - * / 숫자 타입으로 변환
```
1 - '1'     // 0
1 / 'one'   // NaN
+''         // 0
+true       // 1
```
- 조건문 불리언 타입으로 변환

삼항 조건 연산자

조건식 ? true 일 때 : false 일 때

논리 연산자

|| && !
단축 평가 (단락 평가)
- && falsy 만나면 평가 멈춤
- || truthy 만나면 평가 멈춤

쉼표 연산자

마지막 피연산자의 평가 결과 반환

x = 1, y = 2, z = 3;   // 3

그룹 연산자

()

9 * 2 + 1    // 19
9 * (2 + 1)  // 27

typeof 연산자

string number boolean undefined symbol object function bigInt 중 하나 반환

null 은 반환 X

const flower = null;
console.log(typeof flower === null);   // object (언어의 오류)
console.log(flower === null);   // true

형변환

to String
- String(number || boolean)
- (number || boolean).toString()
- "" + (number || boolean)
- ${ number 변수명 || boolean 변수명 }
to Number
- Number(string || boolean)
- parseInt(정수형 string) parseFloat(실수형 string)
- +(string || boolean)
- (string || boolean) * 1
to Boolean
- Boolean(숫자 || 문자열 || 객체 || undefined || null)
- !! (숫자 || 문자열 || 객체 || undefined || null )

제어문

블록문

0개 이상의 문들을 중괄호로 묶은 것
블록문의 끝에 ; 추가 X

조건문

if … else 문
- 간단하고 직관적인 조건은 삼항 조건 연산자
- 복잡하고 여러 개의 조건이 있는 경우네는 if ...else 문

switch 문

switch (month) {
  case 3: case 4: case 5:   // 이렇게 중복해서 사용할 수도 있네
    season = "spring";
    break;
  case 6: case 7: case 8:
    season = "summer";
    break;
  case 9: case 10: case 11:
	  season = "autumn";
		break;
	case 12: case 1: case 2:
		season = "winter";
		break;
  default:
    season = "unknown";
}

TIP) 매직 넘버 사용X → 의미있는 이름의 상수로 대체

함수

함수 정의 방법

함수 선언문

function 함수명(매개변수) {
	return 반환값;
}

함수 표현식
- 리터럴 방식으로 함수 정의 → 변수에 할당
- 일급 객체 특성
- 일반적으로 함수명 생략 → 함수명으로 호출 시 에러 발생
- 변수는 참조값 저장
```
const 변수명 = function (매개변수) {
	return 반환값;
}
```

화살표 함수

const 변수명 = (매개변수) => {
	return 반환값;
}

this

function 키워드로 생성한 일반 함수

콜백함수에 사용되는 this = 전역 객체 window

메소드를 호출한 객체 가리키게 하려면

that 변수 사용

getCount: function() {
	let self = this;
	setTimeout(function () {
		console.log(self.count);
	}, 1000);
}

bind() 사용

getCount: function() {
	setTimeout(function () {
		console.log(this.count);
	}.bind(this), 1000);
}

화살표 함수
- 함수 선언시 this 에 바인딩할 객체 정적으로 결정
- 언제나 상위 스코프의 this 가리킴
- bind() 메소드 사용 X

함수 선언식 vs. 함수 표현식

함수 호이스팅
- 함수 선언, 초기화, 할당 한 번에
- cf. 변수 호이스팅 : 선언 / 초기화, 할당 분리
함수 선언문
- 함수 호이스팅 발생
- 함수 선언의 위치와 상관없이 코드 어느 곳에서든지 호출 가능
함수 표현식
- 변수 호이스팅 발생
- 더 안전한 함수 호출 가능

객체

객체 생성하기

객체: 키(key), 값(value)로 구성된 프로퍼티들의 집합

객체 생성자 문법
```
const user = new Object();
```
객체 리터럴 문법
```
const user = {};
```

데이터와 동작을 하나의 단위로 구조화 → 유용

프로퍼티(property)

key에 문자열이나 symbol 값 이외의 값 지정 시 암묵적 타입 변환 → 문자열
key 중복 선언 시 덮어쓰기

key값으로 표현식 사용 가능 → 대괄호 (계산된 프로퍼티)

const jnaryKey = "SOPT34기 WEB Fighting!"
const user = {
	age: 24,
	[jnaryKey]: true
}

프로퍼티 값 읽기
- 마침표 표기법 user.age
- 대괄호 표기법 user['age']
프로퍼티 동적 생성 user.name = "jnary"
프로퍼티 삭제 delete user.age

단축 프로퍼티 : 프로퍼티 값을 기존 변수로 사용

function makeUser(name, age) {
	return {
		name: name,
		age: age
	};
}

//동일
function makeUser(name, age) {
	return {
		name,
		age
	};
}

객체 반복문

in 연산자
- 프로퍼티 존재 여부 확인 연산자
- true/false 반환
for ... in
- 문자열 키를 순회하기 위한 문법
- 모든 프로퍼티에 대해 루프 수행
```
for (let key in object) { ... }
```
- 순서 보장 X
  - 정수 프로퍼티는 자동 정렬
  - 그 외 프로퍼티는 객체에 추가한 순서대로

객체 복사

방어적 복사 (Shallow copy)
```
const obj = { a: 1 };
const copy = Object.assign({}, obj);
// { a: 1 }
```
- 객체의 프로퍼티를 복사한 새로운 객체 반환
- 객체 내부의 객체는 여전히 참조에 의한 복사
- 타겟 객체에만 직접적 영향

불변 객체화를 통한 변경 방지

Object.freeze(user1);
user1.name = 'Kim';       // 무시
Object.isFrozen(user1);   // true

Deep freeze : 내부 객체까지 변경 불가능

배열과 반복문

배열 생성하기

배열 : object 타입, 여러 개의 값 순차적 저장

배열 리터럴
```
const arr = [1, 2, 3, 4]
```

Array() 생성자 함수

1개의 숫자 매개변수

const arr = newArray(2);
// (2) [empty x 2]

그 외

const arr = newArray(1, 2, 3);
// [1, 2, 3]

내장 메서드

pop : 배열 끝 요소 제거, 제거한 요소 반환
push : 배열 끝 요소 추가
shift : 배열 앞 요소 제거, 제거한 요소 반환
unshift : 배열 앞 요소 추가
reverse : 배열 순서 반전
includes : 배열 항목에 특정 값 포함되어있는지 여부

splice : 요소 추가, 삭제, 교체

arr.aplice(index, deleteCount, elem1, ..., elemN])

index : 조작을 가할 첫 번째 요소
deleteCount : 제거하고자 하는 요소 개수

elem1, …, elemN : 배열에 추가할 요소

const color = ["빨", "주", "분", "파", "남", "보"]
color.splice(2, 1, "노", "초");
// ["빨", "주", "노", "초", "파", "남", "보"]

→ 원본 배열 변경

slice : [start, end) 의 요소를 복사한 새로운 배열 반환
```
const subColor = color.slice(0, 3)
// ["빨", "주", "노"]
```

반복문

for 문
for … of
- 배열 요소의 값 순차적으로
- 인덱스 얻을 수 X

forEach

arr.forEach((element, index, array) => {...})

map
- 배열 순회하면서 콜백함수 실행
- 반환 값들로 구성된 새로운 배열로 반환
filter
- 조건에 맞는 요소만 담은 새로운 배열 반환

ES6

템플릿 리터럴 : 백틱 ``` 사용하여 문자열 나타내기
구조 분해 할당
- 배열이나 객체를 해체하여 그 값을 각각 변수에 담는 것
- const { age, name: {first, second} } = user
rest 문법
- 나머지 값들을 모아서 추출
- const { age, ...rest } = user
- 함수 파라미터로 사용 시 정해지지 않은 수의 매개변수를 배열로 받을 수 있음

spread 연산자

배열이나 객체를 펼칠 수 있다.

const name = {
	name: 'jnary'
};

const nameAge = {
	...name,
	age: 24
}

Jnary

숭실대학교 컴퓨터학부 21

이전 포스트

[JavaScript] 성능 안 좋은 Array.flat()

다음 포스트