자바스크립트 개요와 환경설정
자바스크립트의 활용 (1)
•
JS 는 웹 브라우저에서 사용하는 프로그래밍 언어
◦
웹 클라이언트 애플리케이션 개발
▪
초기의 웹은 변하지 않는 정적인 것들이었다
•
JS는 동적처리가 가능하다
◦
웹 서버 애플리케이션 개발
▪
기존 웹 개발 → 2가지 언어가 필요
•
웹 클라이언트는 애플리케이션을 JS로 개발하고, 웹 서버 애플리케이션은 C#, JAVA, 루비, 파이썬 등
▪
Node.js 가 등장하면서 JS만으로 웹 서버 애플리케이션 개발 가능해짐
▪
Node.js 장단점
•
웹 서버 애플리케이션을 개발할 때 꼭 필요한 간단한 모듈만 제공하므로, 데이터 처리와 예외처리 등이 조금 복잡 (다소 복잡)
•
빠른 속도로 서버 구매 비용과 유지 비용이 1/10 수준 (비용 절감)
◦
모바일 애플리케이션 개발
▪
리액트 네이티브 (React Native)
•
JS만으로 모든 운영체제에서 빠르게 작동하는 네이티브 애플리케이션 작성 가능
•
안드로이드폰은 자바/코틀린(Kotlin), 아이폰은 스위프트 프로그래밍 언어로 개발
◦
데스크탑 애플리케이션 개발
▪
NW.js (노드웹킷 제이에스)
▪
깃허브에서 JS 개발 전용 텍스트 에디터인 아톰(atom) 배포 : 일렉트론
▪
일렉트론으로 개발된 애플리케이션
•
VSCode, Discord, Github 데스크탑 클라이언트, 워드프레스 데스크탑 클라이언 등
◦
데이터베이스 관리
▪
MongoDB
•
데이터베이스 관리에 JS를 활용하는 대표적인 NoSQL 데이터베이스
역사
•
JS 종류
현재명칭 : ECMAScript 이름으로 표준화 (공식 명칭)
모바일 애플리케이션의 종류
•
네이티브 앱
◦
제조사가 추천하는 프로그래밍 언어를 사용해서 만들어진 애플리케이션
▪
아이폰: 오브젝티브-C
▪
안드로이드폰: 자바 프로그래밍
•
모바일 웹 앱
◦
웹사이트 화면을 애플리케이션으로 감싸기만 해서 보여줌
•
하이브리드 앱
◦
스마트폰의 기능과 웹 페이지를 연결할 수 있는 층을 설치해서 웹사이트가 스마트폰의 기능을 활용
◦
쿠팡, 위메프 등의 쇼핑 애플리케이션
•
리액트 네이티브
◦
하나의 프로그램을 만들어서 여러 프로그램을 만들어주는 엔진 또는 프레임워크
◦
페북, 인스타, 핀터레스트, 디스코드, 스카이프 등등
요약
•
JS란 웹 브라우저에서 작동하는 프로그래밍 언어
•
ECMAScript 란 유럽컴퓨터제조협회에서 표준화한 JS의 공식명칭
•
웹 애플리케이션이란 기존의 웹 페이지보다 많은 기능을 구현한 웹 페이지
기본용어
•
표현식 - 값을 만들어 내는 간단한 코드
•
문장 - 표현식이 하나 이상 모인 것
•
프로그램 - 문장이 모인 것
•
표현식과 문장
◦
표현식 : JS에서 값을 만들어내는 간단한 코드
◦
문장 : 하나 이상의 표현식이 모여 문장(statement)을 구성, 문장 끝에는 세미콜론 붙임
◦
프로그램 : 줄바꿈으로 문장을 구분해 코드를 작성
•
키워드 : JS가 처음 만들어질 때 정해놓은 특별한 의미가 있는 단어
•
식별자
◦
프로그래밍 언어에서 이름을 붙일 때 사용하는 단어
◦
주로 변수명이나 함수명 등으로 사용
▪
키워드 사용x
▪
숫자로 시작x
▪
특수문자는 _ 와 $ 만 허용
▪
공백문자 포함x
◦
식별자를 만드는 일반적인 관례
▪
클래스의 이름은 항상 대문자로 시작
▪
변수와 인스턴스, 함수, 메소드는 항상 소문자로 시작
▪
여러 단어로 이루어진 식별자는 각 단어의 첫 글자를 대문자로
◦
주석 //, /* */
•
출력
◦
JS는 다른 프로그래밍 언어와 비교해서 출력 방법이 많고 복잡
▪
간단한 표현식 결과 확인
•
Ctrl + Shift + I 눌러 개발자 환경 띄우기
•
about:blank 에서 [Console] 탭 클릭해서
▪
경고창에 출력
•
개발 전용 에디터를 사용할 때
•
alert() 함수를 사용하여 웹에 경고창 띄우기
<script>
alert('Hello js')
</script>
C++
복사
▪
콘솔에 출력
•
console.log() 사용
자료와 변수
기본 자료형
•
자료(data)
◦
프로그래밍에서 프로그램이 처리할 수 있는 모든 것
•
자료형 (data type)
◦
자료 형태에 따라 나눠 놓은 것
◦
숫자 (number), 문자열 (string), 불(Boolean) 자료형
•
문자열 자료형
◦
문자열 만들기
◦
JS 는 2가지 방법으로 문자열 생성
▪
‘ ‘, “ “ 사용
◦
큰 따옴표와 작은 따옴표 병행 사용
◦
특수문자
▪
이스케이프 \ : 따옴표를 문자 그대로 사용해야 할 때
▪
\n, \t, \\
◦
문자열 연산자
▪
숫자 자료와 마찬가지로 문자열도 기호를 사용해서 연산처리
•
문자 선택 연산자
◦
문자열 내부의 문자 하나를 선택
•
문자 길이 구하기
◦
문자열.length
•
구문 오류
◦
식별자가 예쌍하지 못한 위치에서 등장했다는 오류
•
숫자 자료형
◦
소수점이 있는 숫자와 없는 숫자를 같은 자료형으로 인식
•
불 자료형
◦
JS에서는 참과 거짓 값을 표현할 때 불 자료형을 사용
=== → 값과 자료형을 비교, 둘 다 같아야 참
== → 값만 비교
•
불 부정 연산자
◦
논리 부정 연산자는 ! 기호 사용하며, 참을 거짓으로, 거짓을 참으로 바꾼다
•
불 논리합/논리곱 연산자
◦
&&, ||
•
자료형 검사
◦
typeof 연산자
◦
typeof(’문자열')
▪
⇒”string”
→ string, number, boolean, undefined, function, object, symbol, bigint 중에 하나 출력
•
템플릿 문자열은 백틱(`) 기호로 감싸 만듦
◦
문자열 내부에 ` ${...} ` 기호 사용하여 표현식을 넣으면, 문자열 안에서 계산된다
상수와 변수
상수
•
상수를 만드는 과정을 ‘선언'이라고 표현하고, const 키워드로 다음과 같이 선언
•
const 이름 = 값
•
특정한 이름의 상수는 한 파일에서 한번만 선언
•
상수는 한번만 선언할 수 있으므로, 선언할 때 반드시 값을 함께 지정해줘야 함
•
한번 선언된 상수의 자료는 변경할 수 없음
•
상수와 마찬가지로 특정한 이름의 변수는 한 파일에서 한번만 선언
undefined 자료형
•
상수와 변수로 선언하지 않은 식별자
•
값이 없는 변수
◦
변수를 선언하면서 값을 지정하지 않은 경우에 해당 식별자는 undefined 자료형이 됨
요약
•
상수는 변하지 않는 값을 저장하는 식별자, const 키워드를 사용해 선언
•
변수는 변하는 값을 저장하는 식별자, let 키워드를 사용해 선언
•
상수 또는 변수를 생성하는 것을 선언이라 함
•
상수 또는 변수에 값을 넣는 것을 할당이라 함
자료형 변환
•
문자열 입력
◦
prompt(문자열, 기본 입력 문자열)
◦
prompt() 함수 매개변수의 역할
•
리턴 (return)
◦
함수를 실행한 후 값을 넘기는 것
•
불 입력
◦
confirm() 함수는 prompt() 함수와 비슷한 형태로 사용
◦
confirm() 함수를 사용하면 사용자에게 확인을 요구하는 메시지 창이 나타남
◦
사용자가 [확인] 버튼을 클릭하면 true 리턴, [취소] 버튼 클릭하면 false 리턴
•
숫자 자료형으로 변환
◦
다른 자료형을 숫자 자료형으로 변환
▪
Number() 함수 사용
◦
다른 문자가 들어있어서 숫자로 변환할 수 없는 문자열의 경우
▪
NaN (Not a Number) 라는 값을 출력
•
문자열 자료형으로 변환
◦
다른 자료형을 문자열 자료형으로 변활할 때
▪
String() 함수 사용
ex) String(52.273) ⇒ “52.273”
◦
문자열 연산자를 사용해 자료형 변환
▪
문자열 연결 연산자(+) 사용
ex) 273 + “”
•
불 자료형으로 변환
◦
다른 자료형을 불 자료형으로 변환할 때
▪
Boolean() 함수 사용
▪
대부분의 자료는 불로 변환했을 때 true로 변환
▪
그러나 0, NaN 혹은 빈문자열, null, undefined는 5개의 자료형은 false로 변환됨
◦
논리 부정 연산자를 사용해 자료형 변환
▪
Boolean() 함수를 사용하지 않고, 논리 부정 연산자(!)를 사용해서 다른 자료형을 불 자료형으로 변환
▪
불이 아닌 다른 자료에 논리 부정 연산자를 2번 사용하면 불 자료형으로 변환
예제) inch를 cm 단위로 변경하기
<script>
// 숫자를 입력
const rawInput = prompt('inch 단위의 숫자를 입력해주세요.')
// 입력받은 데이터를 숫자형으로 변경하고 cm 단위로 변경
const inch = Number(rawInput)
const cm = inch * 2.54
// 출력
alert('${inch}inch는 ${cm}cm 입니다.')
</script>
HTML
복사
요약
•
사용자로부터 글자를 입력 받을 때 → prompt() 함수 사용
•
어떤 자료형의 값을 다른 자료형으로 변경하는 것 → 자료형 변환
•
숫자 자료형으로 변환할 때 → Number() 함수 사용
•
문자열 자료형으로 변환할 때 → String() 함수 사용
•
불 자료형으로 변환할 때 → Boolean() 함수 사용
조건문
If 조건문
const date = new Date()
date.getFullYear()
date.getMonth() + 1
date.getDate()
date.getHours()
date.getMinutes()
date.getSeconds()
JavaScript
복사
If-else if-else 문
중첩 조건문
Switch 조건문
switch (자료) {
case 조건 A:
break
case 조건 B:
break
case 조건 C:
break
default:
break
}
JavaScript
복사
조건부 연산자
•
불 표현식 ? 참 결과 : 거짓 결과
Short-circuit Evaluation (SCE)
•
짧은 조건문은 논리 연산자의 특성을 조건문으로 사용
배열
const str = '안녕하세요'
str[2]
str[str.length - 1]
JavaScript
복사
const array = [273, 'String', true, function(){}, {}, [273, 103]]
array Enter
JavaScript
복사
•
배열 요소 추가
◦
arr.push(’item’) (푸시함수 이용해 요소 추가)
◦
arr[arr.length] = ‘귤’ (인덱스 사용해 요소 추가)
•
배열 요소 제거
◦
인덱스로 요소 제거
▪
배열.splice(인덱스, 제거할 요소의 개수)
▪
ex) arr.splice(2, 1)
•
2번째 요소에서 1개를 지워라
◦
값으로 요소 제거
▪
const 인덱스 = 배열.indexOf(요소)
▪
배열.splice(인덱스, 1)
•
배열의 특정 위치에 요소 추가하기
◦
값으로 요소 추가하기
▪
arr.splic(1, 0, “양파")
•
비파괴적 처리
◦
처리 후에 원본 내용이 변경되지 않는 처리를 의미
•
파괴적 처리
◦
처리 후에 원본 내용이 변경되는 처리를 의미
const array = ["apple","orange","banana"]
array.push("graph") //배열 뒷부분에 요소를 추가하는 처리 -> 원본 내용이 변경됨
JavaScript
복사
반복문
for in 반복문
•
배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용
•
배열이 인덱스를 기반으로 반복할 때 사용
for (const 반복변수 in 배열 or 객체) {
문장
}
JavaScript
복사
•
for in 반복문
<script>
const todos = ['우유구매', '메일확인', '수업']
for (const i in todos) {
console.log(`${i}번째 할 일 : ${todos[i]`)
}
</script>
JavaScript
복사
•
for of 반복문
◦
요소의 값을 반복할 때 안정적으로 사용
◦
배열의 값을 기반으로 반복할 때 사용
for (const 반복변수 of 배열 or 객체) {
문장
}
JavaScript
복사
<script>
const todos = ['우유구매', '메일확인', '수업']
for (const todo in todos) {
console.log(`오늘할 일 : ${todo}`)
}
</script>
JavaScript
복사
for문
•
횟수를 기반으로 반복할 때 사용
while 반복문
•
조건을 기반으로 반복할 때 사용
while(불 표현식) {
문장
}
JavaScript
복사
•
confirm() 함수를 사용하여 사용자에게 확인을 받는 대화상자 실행
•
[확인]은 true, [취소]는 false로 입력 받아 조건이 false(거짓)일 때 반복문 종료
break 키워드
•
switch 조건문이나 반복문을 벗어날 때 사용하는 키워드
•
switch 조건문이나 반복문을 벗어날 때 사용
while(true) {
} break
JavaScript
복사
continue 키워드
•
continue 키워드는 반복문 안의 반복 작업을 멈추고 반복문의 처음으로 돌아가 다음 반복 작업을 진행
함수
익명 함수
•
함수는 코드의 집합을 나타내는 자료형
function(){}
JavaScript
복사
→ 함수를 변수처럼 다룰 수 있다 (First Class Function)
예시
<script>
// 변수를 생성합니다.
const 함수 = function() {
console.log('함수 내부의 코드입니다 ..1')
console.log('함수 내부의 코드입니다 ..1')
console.log('함수 내부의 코드입니다 ..1')
console.log('')
}
// 함수 호출
함수() -> 우리가 만든 함수도 기존의 alert(), prompt() 함수처럼 호출할 수 있다.
함수()
// 출력
console.log(typeof 함수) -> 함수의 자료형 확인
console.log(함수) -> 함수 자체도 단순한 자료이므로 출력 가능
</script>
JavaScript
복사
선언적 함수
•
선언적 함수는 이름을 붙여 생성
function 함수() {
}
JavaScript
복사
•
선언적 함수는 다음 코드와 같은 기능을 수행
let 함수 = function(){};
JavaScript
복사
•
선언적 함수 선언
<script>
// 변수를 생성합니다.
const 함수 = function() {
console.log('함수 내부의 코드입니다 ..1')
console.log('함수 내부의 코드입니다 ..1')
console.log('함수 내부의 코드입니다 ..1')
console.log('')
}
// 함수 호출
함수() -> 우리가 만든 함수도 기존의 alert(), prompt() 함수처럼 호출할 수 있다.
함수()
// 출력
console.log(typeof 함수) -> 함수의 자료형 확인
console.log(함수) -> 함수 자체도 단순한 자료이므로 출력 가능
</script>
JavaScript
복사
매개변수와 리턴값
•
prompt() 함수의 매개변수와 리턴값
function prompt(message?:string, _default?:string):string
//prompt()
JavaScript
복사
→ JS는 타입을 적지 않아도 동작 (장점이자 단점) → 그래서 요즘은 typeScript 사용
•
사용자 정의 함수의 매개변수와 리턴값
function 함수():void
// 함수()
JavaScript
복사
•
매개변수와 리턴값을 갖는 함수
function 함수 (매개변수, 매개변수, 매개변수) {
문장
문장
return 리턴값
}
JavaScript
복사
<script>
// 함수 선언
function f(x) {
return x * x
}
// 함수 호출
console.log(f(3))
</script>
JavaScript
복사
예제) 윤년인지 아닌지
<script>
function isLeapYear(year) {
return (year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0)
}
console.log('2020년은 윤년일까? === ${isLeapYear(2020)}')
console.log('2021년은 윤년일까? === ${isLeapYear(2021)}')
console.log('2022년은 윤년일까? === ${isLeapYear(2022)}')
</script>
JavaScript
복사
나머지 매개변수
•
가변 매개변수 함수
◦
호출할 때 매개변수의 개수가 고정적이지 않은 함수
◦
JS에서 이러한 함수를 구현할 때는 나머지 매개변수 (rest parameter) 라는 특이한 형태의 문법 사용
function 함수 이름(...나머지 매개변수) {}
JavaScript
복사
•
나머지 매개변수를 사용한 배열 만들기
<script>
function sample(...items) {
console.log(items)
}
sample(1, 2)
sample(1, 2, 3)
sample(1, 2, 3, 4)
</script>
JavaScript
복사
•
나머지 매개변수와 일반 매개변수 조합하기
function 함수 이름(매개변수, 매개변수, ...나머지 매개변수){}
JavaScript
복사
•
Array.isArray() 메소드
◦
매개변수로 들어온 자료형이 배열인지 숫자인지 확인
•
전개 연산자
◦
배열을 전개해서 함수의 매개변수로 전달
◦
배열의 값들을 하나하나씩 원소값들을 전개해서 들어온다
•
기본 매개변수
◦
여러 번 반복 입력되는 매개변수에 기본값을 지정하여 사용
▪
기본 매개변수는 오른쪽 매개변수에 사용
함수 이름(매개변수, 매개변수=기본값, 매개변수=기본값)
JavaScript
복사
•
가변 매개변수 함수
◦
arguments를 사용한 가변 매개변수 함수
콜백 함수
•
JS는 함수도 하나의 자료형이므로, 매개변수로 전달할 수 있는데, 이렇게 매개변수로 전달하는 콜백 함수
◦
매개변수로 전달한다는 것? → 함수가 함수 자체를 다른 함수에 넘겨서 내부에서 호출할 수 있게
<script>
function callThreeTimes(callback) {
for (let i = 0; i < 3; i++) {
callback(i) -> callback 이라는 매개변수는 함수이므로 호출할 수 있음
}
}
function print(i) {
console.log('${i}번째 함수호출')
}
// 함수 호출
callThreeTimes(print)
</script>
JavaScript
복사
•
익명함수
<script>
function callThreeTimes(callback) {
for (let i = 0; i < 3; i++) {
callback(i) -> callback 이라는 매개변수는 함수이므로 호출할 수 있음
}
}
// 함수 호출
callThreeTimes(function(i) {
console.log('${i}번째 함수호출') -> 익명 함수
})
</script>
JavaScript
복사
→ 콜백함수는 익명함수로 많이 사용
•
다른 곳에서도 사용 가능
•
forEach()
◦
배열이 갖고 있는 함수로써 단순하게 배열 내부의 요소를 사용해서 콜백 함수를 호출
function (value, index, array) {}
JavaScript
복사
<script>
const nums = [273, 53, 103, 32, 57]
//매개변수로 value, index, array를 갖는 콜백 함수 사용
nums.forEach(function (value, index, array) {
console.log('${index}번째 요소 : ${value}')
}
</script>
JavaScript
복사
•
map()
◦
콜백함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수
<script>
const nums = [273, 53, 103, 32, 57]
nums = nums.map(function (value, index, array) {
return value * value
})
nums.forEach(console.log)
-> 매개변수로 console.log 메소드 자체를 넘김
</script>
JavaScript
복사
•
filter()
◦
콜백함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수
<script>
const nums = [0,1,2,3,4,5]
const evenNums = nums.filter(function(value) {
return value % 2 === 0
})
console.log('원래배열 : ${numbs}')
console.log('짝수만 추출: ${evenNums}')
</script>
JavaScript
복사
•
화살표 함수
◦
function 키워드 대신 화살표(⇒)를 사용
◦
익명함수를 편하게 사용할 때 사용
(매개변수) => {
} 불 표현식 || 불 표현식이 거짓일 때 실행할 문장
JavaScript
복사
(매개변수) => 리턴값
JavaScript
복사
<script>
let nums = [273, 53, 103, 32, 57]
/* 배열의 메소드를 연속적으로 사용 */
nums
.filter((value) => value % 2 === 0)
.map((value) => value * value)
.forEach((value) => { -> 메소드 체이닝
console.log(value)
})
</script>
JavaScript
복사
•
타이밍 함수
◦
특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 타이머 함수
▪
setTimeout (함수, 시간)
•
특정 시간 후에 함수를 한 번 호출
▪
setInterval (함수, 시간)
•
특정 시간마다 함수를 호출
▪
clearTimeout(타이머_ID)
•
seTImeout() 함수로 설정한 타이머를 제거
▪
clearInterval(타이머_ID)
•
setInterval() 함수로 설정한 타이머를 제거
•
즉시 호출 함수
◦
함수 즉시 호출하기
(function(){}) ()
JavaScript
복사
<!-- 다른 곳에서 가져온 JS 코드 -->
<script>
let pi = 3.14
console.log('파이값은 ${pi}입니다.')
</script>
<!-- 내가 만든 JS 코드 -->
<script>
let pi = 3.141592
console.log('파이값은 ${pi}입니다.')
</script>
JavaScript
복사
→ 이름 충돌 문제 발생
해결 방법
→ 함수 블록을 사용한 스코프 생성
<!-- 다른 곳에서 가져온 JS 코드 -->
<script>
let pi = 3.14
console.log('파이값은 ${pi}입니다.')
<!-- 블록을 사용한 스코프 생성 -->
{
let pi = 3.141592
console.log('파이값은 ${pi}입니다.')
}
console.log('파이값은 ${pi}입니다.')
// 함수 블록을 사용한 스코프 생성
function sample() {
let pi = 3.141592
console.log('파이값은 ${pi}입니다.')
}
sample()
console.log('파이값은 ${pi}입니다.')
</script>
JavaScript
복사
→ 블록과 함수 블록을 사용해 이름 충돌 문제 해결하기
•
블록을 사용하는 방법과 함수 블록을 사용해 변수 충돌을 막는 방법 모두 최신 JS를 지원하는 웹 브라우저를 사용할 수 있음
•
하지만 구 버전의 JS에서 변수를 선언할 때 사용하던 var 키워드는, 함수 블록을 사용하는 경우에만 변수 충돌을 막을 수 있다
<!-- 다른 곳에서 가져온 JS 코드 -->
<script>
let pi = 3.14
console.log('파이값은 ${pi}입니다.')
</script>
<!-- 내가 만든 JS 코드 -->
<script>
(function() {
let pi = 3.141592
console.log('파이값은 ${pi}입니다.')
})()
</script>
<!-- 즉시 호출 함수를 사용해 변수 이름 충돌 문제를 해결 -->
JavaScript
복사
•
엄격 모드
◦
‘use strict’ 라는 문자열
◦
엄격모드기능으로 JS는 이러한 문자열을 읽어들인 순간부터 코드를 엄격하게 검사
<script>
'use strict'
문장
문장
</script>
JavaScript
복사
◦
선언 없이 변수 사용
<script>
data = 10
console.log(data)
</script>
JavaScript
복사
◦
엄격모드에서는 이러한 코드 사용X
◦
변수를 let 키워드 등으로 선언하지 않았는데 사용했다고 곧바로 오류가 발생
◦
초기 JS는 간단하게 쓸 용도로 만들어짐 → 그러나 점점 다른 용도로 쓰이면서 코드 길어짐
▪
→ 디버깅 어려워짐(무분별하게 사용하는 코드)
<script>
(function() {
'use strict'
문장
문장
})()
</script>
JavaScript
복사
익명 함수와 선언적 함수의 차이
•
익명 함수의 사용
◦
익명 함수는 순차적인 코드 실행에서 코드가 해당 줄을 읽을 때 생성됨
•
익명 함수 호출
<scirpt>
let 익명함수
익명함수 = function() {
console.log('1st 익명함수')
}
익명함수 = funciton() {
console.log('2nd 익명함수')
}
익명함수()
</script>
// 출력 : 2nd 익명함수
JavaScript
복사
•
선언적 함수의 사용
◦
선언적 함수는 순차적인 코드 실행이 일어나기 전에 생성됨
<scirpt>
선언적 함수() -> 선언적 함수를 생성하는 코드 앞에 입력
function 선언적함수() {
console.log('1st 선언적 함수')
}
function 선언적함수() {
console.log('2nd 선언적 함수')
}
</script>
-> 쭉 다 살펴본다 (처음부터 끝까지)
// 출력 : 2nd 선언적 함수
JavaScript
복사
차이 : 생성하는 위치 다름
•
과거 JS는 var 라는 키워드 사용해서 변수 선언
•
현대의 JS는 let 키워드와 const 키워드를 사용해서 변수와 상수를 선언
•
이러한 키워드들은 위험을 원천적으로 차단하기 위해서 오류를 발생
•
선언적 함수와 익명 함수의 조합
◦
선언적 함수는 먼저 생성되고,
◦
이후에 순차적인 코드 진행을 시작하면서
◦
익명함수를 생성
<scirpt>
let 익명함수
익명함수 = function() {
console.log('익명함수')
}
function 선언적함수() {
console.log('선언적 함수')
}
함수()
</script>
// 출력 : 익명함수
JavaScript
복사
→ 따라서 코드의 순서와 관계없이 익명함수 출력
•
블록이 다른 경우에 선언적 함수의 사용
◦
선언적 함수는 어떤 코드 블록(script 태그 또는 함수 등으로 구분되는 공간) 읽어들일 때 먼저 생성
// 블록 1
<scirpt>
선언적 함수()
function 선언적함수() {
console.log('1st 선언적 함수')
}
</script>
// 블록 2
<scirpt>
function 선언적함수() {
console.log('2nd 선언적 함수')
}
</script>
// 블록 3
<scirpt>
선언적 함수()
</script>
JavaScript
복사
→ 보통 익명함수 많이 사용
정리
•
콜백 함수란 매개변수로 전달하는 함수
•
화살표 함수란 익명 함수를 간단하게 사용하기 위한 목적으로 만들어진 함수 생성 문법
◦
() ⇒ {} 형태로 함수 만들고, 리턴값만을 가지는 함수라면,
◦
() ⇒ 값 형태로 사용할 수 있음
•
즉시 호출 함수란 변수의 이름 충돌을 막기 위해서 코드를 안전하게 사용하는 방법
•
JS의 문법 오류를 더 발생시키는 엄격 모드는 실수를 줄일 수 있는 방법
◦
‘use strict’ 이라는 문자열을 블록 가장 위쪽에 배치하여 사용
객체
객체
•
배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키(key)를 사용
•
객체는 중괄호 {...}로 생성하며, 다음과 같은 형태의 자료를 쉽표(,)로 연결해서 입력
키 : 값
JavaScript
복사
객체 선언 예시
<script>
const product = {
제품명 : '건조 망고', -> 쉼표로 구분 {key : value}
유형 : '당절임',
성분 : '망고, 설탕, 나트륨, 색소',
원산지 : '필리핀'
}
</script>
JavaScript
복사
•
요소에 접근하기 ( 대괄호 [] 사용)
product['제품명']
product['유형']
JavaScript
복사
•
요소에 접근하기 ( 온점 . 사용)
product.제품명
product.유형
JavaScript
복사
•
식별자로 사용할 수 없는 단어를 키로 사용할 경우
◦
객체를 생성할 때 키(key)는 식별자와 문자열 모두 사용 가능
▪
대부분의 개발자가 식별자를 키로 사용
▪
식별자로 사용할 수 없는 단어를 키로 사용할 때는 문자열 사용
◦
식별자가 아닌 문자열을 키로 사용했을 때는 무조건 대괄호[...] 사용해야 객체의 요소에 접근 가능
속성과 메소드
•
객체의 속성은 모든 형태의 자료값 가질 수 있다
•
메소드
◦
객체의 속성 중 함수 자료형인 속성
// eat 메소드
<script>
const pet = {
name : 'cloud',
eat : function(food) {}
}
person.eat()
</script>
JavaScript
복사
◦
메소드 내부에서 this 키워드 사용하기
▪
자기 자신의 자신이 가진 속성이라는 것을 표시할 때, this 키워드 사용
<script>
const pet = {
name : 'cloud',
eat : function(food) {
alert(this.name + '은/는' + food + '을/를 먹습니다.')
}
}
person.eat('rice')
</script>
JavaScript
복사
◦
동적으로 객체 속성 추가/제거
<script>
const student = {}
student.name = 'ash'
student.hobby = 'piano'
student.future = 'scientist'
console.log(JSON.stringify(student, null, 2))
</script>
JavaScript
복사
delete 객체.속성
JavaScript
복사
<script>
const student = {}
student.name = 'ash'
student.hobby = 'piano'
student.future = 'scientist'
delete student.future
console.log(JSON.stringify(student, null, 2))
</script>
JavaScript
복사
◦
메소드 간단 선언 구문
원래 버전
eat : function(food) {
alert(this.name + '은/는' + food + '을/를 먹습니다.')
}
JavaScript
복사
→ 귀찮
간단하게 선언
eat(food) {
alert(this.name + '은/는' + food + '을/를 먹습니다.')
}
JavaScript
복사
→ 주의
◦
function(){} 형태로 선언하는 익명함수와, () ⇒ {} 형태로 선언하는 화살표 함수는
◦
객체의 메소드.속성의 this 키워드를 다루는 방식이 다름
→ 특별한 경우가 아니라면, 객체의 메소드는 익명 함수를 사용한다. (화살표 함수 잘 사용 X)
→ this 키워드 사용의미가 다르기 때문
객체 자료형
◦
속성과 메소드를 가질 수 있는 모든 것은 객체
▪
배열도 객체, 함수도 객체
▪
배열인지 확인하려면, Array.isArray() 메소드를 사용
•
(Array도 메소드를 갖고 있으므로 객체)
▪
함수는 ‘실행이 가능한 객체', JS에서는 함수를 일급 객체(first-class object) 또는 first-class citizen에 속한다고 표현
기본 자료형
◦
기본 자료형
▪
숫자, 문자열, 불
▪
이러한 자료형은 객체가 아니므로, 속성을 가질 수 없음
◦
기본 자료형을 객체로 선언하기
▪
숫자 객체, 문자열 객체, 불 객체를 생성
•
단순한 기본 자료형이 아니므로, 이전과 다르게 속성을 가짐
const 객체 = new 객체 자료형 이름()
new Number(10)
new String('Hello')
new Boolean(true)
JavaScript
복사
◦
기본 자료형의 일시적 승급
▪
JS는 사용의 편리성을 위해서
▪
기본 자료형의 속성과 메소드를 호출할 때
▪
일시적으로 기본 자료형을 객체로 승급시킴
▪
명령이 끝나면, 다시 원래 타입으로 돌아온다
◦
프로토타입으로 메소드 추가하기
▪
prototype 객체에 속성과 메소드를 추가하면, 모든 객체(와 기본 자료형)에서
▪
해당 속성과 메소드를 사용할 수 있다
객체 자료형 이름.prototype.메소드 이름 = function() {
}
JavaScript
복사
<script>
// power() 메소드 추가
Number.prototype.power = function(n = 2) {
return this.valueOf() ** n
}
// Number 객체의 power() 메소드 사용
const a = 12
console.log('a.power(): ', a.power()) -> 객체 타입으로 승급
console.log('a.power(3): ', a.power(3))
console.log('a.power()4: ', a.power(4))
</script>
JavaScript
복사
▪
indexOf() 메소드로 JS에서 문자열 내부에 어떤 문자열이 있는지, 배열 내부에 어떤 자료가 있는지
<script>
String.prototype.contain = function(data) {
return this.indexOf(data) >= 0
}
Array.prototype.contain = function(data) {
return this.indexOf(data) >= 0
}
// String 객체의 contain() 메소드 사용
const a = '안녕하세요'
console.log('안녕 in 안녕하세요: ', a.contain('안녕'))
console.log('없는데 in 안녕하세요: ', a.contain('없는데'))
// Array 객체의 contain() 메소드 사용
const b = [273, 32, 103, 57, 52]
console.log('273 in [273, 43, 103, 57, 52]: ', b.contain(273))
console.log('0 in [273, 43, 103, 57, 52]: ', b.contain(0))
</script>
JavaScript
복사
Number 객체
◦
숫자 N번째 자릿수까지 출력하기 → toFixed()
▪
소수점 이하 몇 자리까지만 출력하고 싶을 때 사용
◦
NaN 과 Infinity 확인하기 : isNaN(), isFinite()
▪
Number 뒤에 점을 찍고 사용
Number.isNaN(m)
Number.isFinite(n) -> false 나오면 angks
JavaScript
복사
String 객체
◦
문자열 양쪽 끝의 공백 없애기 → trim()
◦
문자열을 특정 기호로 자르기 → split()
배열 내부의 문자열을 쉼표로 자르기
input = input.map((line) => line.split(','))
JavaScript
복사
JSON 객체
◦
인터넷에서 문자열로 데이터를 주고 받을 때는
◦
CSV, XML, CSON 등의 다양한 자료 표현 방식을 사용
◦
값을 표현할 때는 문자열, 숫자, 불 자료형만 사용할 수 있다
◦
문자열은 반드시 큰따옴표(””)로 만들어야한다
◦
키 key에도 반드시 따옴표(””)
{
"name" : "book",
"price" : 18000,
"publisher" : "ISLAND"
}
JavaScript
복사
◦
JS 객체를 JSON 문자열로 변환할 때는 JSON.stringify() 메소드 사용
console.log(JSON.stringify(data))
console.log(JSON.stringify(data, null, 2)) -> 들여쓰기 2칸으로 설정
JavaScript
복사
◦
JSON 문자열을 JS 객체로 전개할 때는 JSON.parse() 메소드 사용
console.log(JSON.parse(json))
-> JSON 문자열을 다시 JS 객체로 변환
JavaScript
복사
Math 객체
◦
수학과 관련된 기본적인 연산을 할 때는 Math 객체를 사용
▪
Mah 객체 속성으로는 pi, e 와 같은 수학 상수가 있다
▪
Main.sin(), Math.cos(), Math.tan() 같은 삼각함수도 있다
▪
Math.random() → 0~1 미만 랜덤한 숫자 생성
외부 script 파일 읽어들이기
◦
파일 커지면 파일 분리할 필요
<script src="test.js"></script>
JavaScript
복사
Lodash 라이브러리
◦
개발할 때 보조적으로 사용하는 함수들을 제공해주는 유틸리티 라이브러리 중 가장 많이 사용
◦
CDN (Contests Delivery Network)은 콘텐츠 전송 네트워크
◦
min 버전 : JS 코드르 집핑(zipping)한 파일
▪
집핑(zipping) - 데이터를 CDN으로 전송하는 경우, 데이터의 용량을 줄이고자 다음과 같이 소개를 줄이고 모든 코드르 응축
◦
sortBy() 메소드
▪
배열을 어떤 것으로 정렬할지 지정하면, 지정한 것을 기반으로 배열을 정렬해서 리턴
요약
◦
실체가 있는 것 중에서 객체가 아닌 것 → 기본 자료형 이라하며, 숫자,문자열,불이 대표적인 예
◦
객체를 기반으로 하는 자료형을 객체 자료형 → new 키워드를 활용해서 생성
◦
기본 자료형의 승급이란 기본 자료형이 일시적으로 객체 자료형으로 변화하는 것을 의미한다
◦
prototype 객체란 객체의 틀을 의미, 이곳에 속성과 메소드를 추가하면 해당 객체 전체에서 사용
문서 객체 모델 (DOM)
문서 객체 모델 (Document Objects Model)
◦
문서 객체를 조합해서 만든 전체적인 형태
DOMContentLoaded 이벤트
◦
HTML 코드를 JS로 조작
◦
HTML 각각 요소가 JS에서 문서객체이다
▪
innerHTML
•
body 태그가 생성되기 이전에 script 태그로 body 태그를 조작
◦
DOMContentLoaded 이벤트는 웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트
<script>
// DOMContentLoaded 이벤트를 연결
document.addEventListerner('DOMContentLoaded', () => {
const h1 = (text) => '<h1>${text}</h1>'
document.body.innerHTML += h1('DOMContentLoaded 이벤트 발생')
// 문서 객체를 모두 읽어들이면 이 콜백함수가 실행
})
</script>
<body>
</body> -> body에 포함될 것이다
JavaScript
복사
◦
다음과 같이 코드를 구성하면 DOMContented 상태가 되었을 때 콜백 함수를 호출
문서 객체 가져오기
◦
document.body 코드를 사용하여 문서의 body 요소 읽기
document.head
document.body
document.title
// 직접 태그
JavaScript
복사
◦
head 요소와 body 요소 내부에 만든 다른 요소들은 다음과 같은 별도의 메소드르 사용
document.querySelector(선택자)
document.querySelectorAll(선택자)
JavaScript
복사
이름 | 선택자 | 설명 |
태그 선택자 | 태그 | 특정 태그를 가진 요소를 추출 |
아이디 선택자 | #아이디 | 특정 id 속성을 가진 요소를 추출 |
클래스 선택자 | .클래스 | 특정 class 속성을 가진 요소를 추출 |
속성 선택자 | [속성 = 값] | 특정 속성 값을 갖고 있는 요소를 추출 |
후손 선택자 | 선택자_A 선택자_B | 선택자_A 아래에 있는 선택자_B를 선택 |
예제) querySelector() 메소드를 사용해서 h1 태그를 추출하고 조작하기
<script>
document.addEventListener('DOMContentLoaded', () => {
// 요소 읽어들인다
const header = document.queryselector('h1')
// h1 태그 이름으로 요소를 선택
// 텍스트와 스타일을 변경한다
header.textContent = 'HEADERS'
header.style.color = 'white'
header.style.backgroundColor = 'black'
header.style.padding = '10px'
})
</script>
JavaScript
복사
예제) querySelectorAll() 메소드 : 문서 객체 여러개를 배열로 읽어들이는 함수
<script>
document.addEventListener('DOMContentLoaded', () => {
// 요소 읽어들인다
const header = document.queryselector('h1')
// h1 태그 이름으로 요소를 선택
// 텍스트와 스타일을 변경한다
header.forEach((header) => {
header.textContent = 'HEADERS'
header.style.color = 'white'
header.style.backgroundColor = 'black'
header.style.padding = '10px'
})
})
</script>
<body>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
</body>
JavaScript
복사
글자 조작하기
속성 이름 | 설명 |
문서 객체.textContent | 입력된 문자열을 그대로 기입 |
문서 객체.innerHTML | 입력된 문자열을 HTML 형식으로 기입 |
속성 조작하기
메소드 이름 | 설명 |
문서 객체.setAttribute(속성 이름, 값) | 특정 속성에 값을 지정 |
문서 객체.getAttribute(속성 이름) | 특정 속성을 추출 |
스타일 조작하기
CSS 속성 이름 | 자바스크립트 style 속성 이름 |
background-color | backgroundColor |
text-align | textAlign |
font-size | fontSize |
문서 객체 생성하기
◦
document.createElement() 메소드를 사용
document.createElement(문서 객체 이름)
JavaScript
복사
◦
문서 객체 트리(tree) 구조
▪
문서를 어떤 문서 아래에 추가할 지를 지정
부모 객체.appendChild(자식 객체)
document.body.appendChild(head)
JavaScript
복사
문서 객체 이동하기
◦
appendChild() 메소드는 문서 객체를 이동할 때도 사용
▪
문서 객체의 부모(parent)는 언제나 하나여야 하고,
▪
문서 객체를 다른 문서 객체에 추가하면 문서 객체가 이동
부모 객체.appendChild(자식 객체)
JavaScript
복사
문서 객체 제거하기
◦
removeChild() : 문서 객체를 제거
◦
appendChild() 메소드 등으로 부모 객체와 이미 연결이 완료된 문서 객체의 경우
◦
parentNode 속성으로 부모 객체에 접근할 수 있으므로,
◦
일반적으로 어떤 문서 객체를 제거할 때는 다음과 같은 형태의 코드를 사용
문서 객체.parentNode.removeChild(문서 객체)
h1.parentNode.removeChild(h1)
document.body.removeChild(h1)
JavaScript
복사
이벤트 설정하기
◦
addEventListener() 메소드
문서 객체.addEventListener(이벤트 이름, 콜백 함수)
JavaScript
복사
◦
removeEventListener() 메소드
문서 객체.removeEventListener(이벤트 이름, 이벤트 리스너)
JavaScript
복사
const listener = (envet) => {
h1.textContent = '클릭 횟수 : ${counter++}'
}
// 이벤트를 제거하려면, 이벤트 리스너를 변수 또는 상수로 가지고 있어야함
JavaScript
복사
요약
◦
DOMContentLoaded 이벤트는 HTML 페이지의 모든 문서 객체(요소)를 웹 브라우저가 읽어들였을 때 발생시킨다
◦
querySelector() 메소드는 문서 객체를 선택할 때, 사용하는 메소드
◦
textContent 속성과 innerHTML 속성은 문서 객체 내부의 글자를 조작할 때 사용하는 속성
◦
style 속성은 문서 객체의 스타일을 조작할 때 사용하는 속성
◦
이벤트 리스너(이벤트 핸들러)는 이벤트가 발생할 때 실행하는 함수를 의미
이벤트 활용
이벤트 모델 → 이벤트 연결하는 방법
◦
표준 이벤트 모델 : addEventlistener() → 가장 많이 씀
◦
고전 이벤트 모델 : 문서 객체가 가지고 있는 on.. 으로 시작하는 속성에 함수를 할당해서 이벤트를 연결
▪
이벤트 종류 한 종류만 사용 가능 → 권장 x
◦
인라인 이벤트 모델 : on..으로 시작하는 속성을 HTML 요소에 직접 넣어서 이벤트를 연결
키보드 이벤트
◦
keydown
▪
키가 눌릴 때
◦
keypress
▪
키가 입력되었을 때 실행
◦
keyup
▪
키보드에서 키가 떨어질 때
키보드 키 코드 사용하기
이벤트 속성 이름 | 선택자 형태 |
code | 입력한 키 |
keyCode | 입력한 키를 나타내는 숫자 |
altKey | [Alt] 키 눌렀는지 |
ctrlKey | [Ctrl] 키 눌렀는지 |
shiftKey | [Shift] 키 눌렀는지 |
이벤트 발생 객체
◦
이벤트 리스너 내부에서 어떤 변수에 접근할 수 없는 경우
▪
이벤트 리스너를 외부로 빼낸 경우 → 가져다 쓸 수 없다
→ 해결 방법
1.
event.currentTarget 속성 사용
event.currentTarget.value.length
JavaScript
복사
2.
this 키워드 사용
this.value.length
JavaScript
복사
글자 입력 양식 이벤트
localStorage 객체
◦
웹브라우저에 데이터를 저장하는 localStorage 객체와 활용
▪
localStorage.getItem(키) - 저장된 값을 추출, 없으면 undefined가 나옴
•
객체의 속성을 추출하는 일반적인 형태로 localStorage.
•
키 또는 localStorage[키] 형태로 사용할 수도 있음
▪
localStorage.setItem(키, 값), 값을 저장
•
이전과 마찬가지로 객체에 속성을 지정하는 일반적인 형태를 사용할 수도 있음
▪
localStorage.removeItem(키) - 특정 키의 값을 제거
▪
localStorage.clear() - 저장된 모든 값을 제거
예외 처리
오류
◦
구문 오류 (syntax error)
▪
프로그램 실행 전 발생하는 오류
◦
예외(exception) 또는 런타임 오류(runtime error)
▪
프로그램 실행 중 발생하는 오류
예외 (exception)
◦
철자나 괄호를 닫지 않는 등
기본 예외 처리
1.
if 문으로 처리
고급 예외 처리
1.
try catch finally 구문 사용
try {
// 예외 발생할 가능성 있는 코드
} catch {
// 예외 발생했을 때 실행할 코드
} finally {
// 무조건 실행할 코드
}
JavaScript
복사
요약
◦
구문 오류
▪
프로그램 실행 전에 발생하는 코드의 문법적인 문제로 발생하는 오류
◦
얘외
▪
프로그램 실행 중에 발생하는 모든 오류
◦
얘외 처리
▪
얘외가 발생했을 때, 프로그램이 중단되지 않게 하는 처리
▪
구문 오류는 예외 처리로 처리할 수 없음
◦
try catch finally
▪
try 구문 안에서 예외 발생하면 → catch 구문에서 처리,
▪
finally 구문은 예외 발생 여부와 상관없이 실행해야 하는 작업이 있을 때 사용
예외 객체
◦
예외 객체 (exception object)
▪
try catch 구문을 사용할 때, catch의 괄호 안에 입력하는 식별자
▪
아무 식별자나 입력해도 괜찮지만, e나 exception이라는 식별자 사용함
◦
얘외 개체의 속성
▪
name - 예외 이름
▪
message - 예외 메시지
◦
JS의 배열 크기가 한정되어 있기 때문에, 배열을 너무 크게 선언하면 오류를 발생하는 것을 이용해 이를 예외 처리하고, 오류를 출력해보는 코드 → 8-2-1.html
예외 강제 발생
◦
예외를 강제로 발생시킬때는 throw 키워드 사용
throw 문자열
throw new Error(문자열)
JavaScript
복사
◦
자바스크립트 콘솔에서 throw 구문 사용
◦
divide() 함수 이용
◦
JS는 undefined와 NaN이라는 값이 있어서, 다른 프로그래밍 언어에 비해서 예외를 많이 발생하지는 않음
◦
그렇기 때문에 사용자에게 함수를 잘못 사용했다는 것을 강제로라도 인지시켜줄 필요 있음
클래스
객체 지향 패러다임
◦
C를 제외한 모든 프로그래밍 언어는 객체 지향 (Object Oriented)라는 패러다임을 기반으로 만들어진 프로그래밍 언어
◦
객체 지향 패러다임
▪
객체 지향 프로그래밍 객체를 만들고, 객체들의 상호작용을 중심으로 개발하는 방법론
◦
객체 지향 프로그래밍 언어들은 클래스(Class)라는 문법으로 객체를 효율적이고 안전하게 만들어 객체 지향 패러다임을 쉽게 프로그래밍에 적용할 수 있도록 도와줌
추상화 (abstraction)
◦
복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념과 기능을 간추려내는 것,
◦
즉, 프로그램에 필요한 요소만 사용해서 객체를 표현하는 것
클래스 선언하기
class 클래스 이름 {
}
JavaScript
복사
◦
인스턴스 : 클래스를 기반으로 만든 객체
new 클래스 이름()
JavaScript
복사
◦
클래스 선언하고 인스턴스 생성
<script>
class Student {
}
const student = new Student()
const students = [
...
]
</script>
JavaScript
복사
생성자 (constructor)
◦
생성자는 클래스를 기반으로 인스턴스를 생성할 때 처음 호출되는 메소드
◦
따라서 생성자에서는 속성을 추가하는 등 객체의 초기화 처리
메소드 (method)
<script>
class Student {
constructor (이름, 국어, 영어, 수학, 과학) {
this.이름 = 이름
this.국어 = 국어
...
this.과학 = 과학
}
getSum() {
return this.국어 + ~ + this.과학
}
getAverage() {
return this.getSum() / 4
}
toString() {
return `${this.이름}\t{this.getSum()}점\t${this.getAverage()}점\n`
}
}
</script>
JavaScript
복사
const sutdents = []
students.push(new Student('구름', 87, 98, 88, 90))
...
JavaScript
복사
요약
◦
객체 지향 패러다임은 객체를 우선적으로 생각해서 프로그램을 만든다는 방법론
◦
추상화는 프로그램에서 필요한 요소만을 사용해서 객체를 표현하는 것
◦
클래스는 객체를 안전하고 효율적으로 만들 수 있게 해주는 문법
◦
인스턴스는 클래스를 기반으로 생성한 객체를 의미
◦
생성자는 클래스를 기반으로 인스턴스를 생성할 때, 처음 호출되는 메소드
상속 (inheritance)
◦
상속은 클래스의 선언 코드를 중복해서 작성하지 않도록 함으로써 코드의 생산 효율을 올리는 문법
class 클래스 이름 extends 부모클래스 이름 {
}
JavaScript
복사
private 속성과 메소드
◦
클래스 사용자가 클래스 속성(또는 메소드)을 의도하지 않은 방향으로 사용하는 것을 막아, 클래스의 안정성을 확보하기 위해 나온 문법
class 클래스 이름 {
# 속성 이름
# 메소드 이름 () {
}
}
JavaScript
복사
게터(getter)와 세터(setter)
<script>
class Square {
#length
constructor(length) {
this.setLength(lenght)
}
setLength(value) {
if (value <= 0) {
throw '길이는 0보다 커야한다'
}
this.#length = value
}
getLength(value) {
return this.#length
}
getPerimeter() {return 4 * this.#length}
getArea() {return this.#length * this.#length}
}
// 클래스 사용하기
const square = new Square(10)
console.log(`한변의 길이는 ${square.getLength()}입니다`)
// 예외 발생시키기
square.setLength(-10)
</script>
JavaScript
복사
get area() {
}
set length(length) {
}
console.log(`${squareA.length}`)
console.log(`${squareA.area}`)
// 속성을 사용하는 형태로 사용하면,
// 자동으로 게터와 세터가 호출됨
JavaScript
복사
static 속성과 메소드
class Square {
#length
static #counter = 0
static get counter() {
return Square.#counter
}
}
JavaScript
복사
오버라이드
◦
자식 클래스가 부모 클래스의 메소드를 다시 덮어써서 재정의 하는 것
toString() 메소드
◦
자바스크립트는 내부적으로 어떤 객체를 문자열로 만들 때, toString() 메소드를 호출
◦
toString() 메소드를 오버라이드하면, 내부적으로 문자열로 변환되는 형태를 바꿀 수 있음