웹 애플리케이션의 대표적인 예는 웹 문서 작성 도구
Google Docs, Google Sheets
별도의 설치 없이 웹 브라우저만으로도 워드, 엑셀과 같은 애플리케이션을 사용할 수 있다. 설치해야만 동작했던 과거의 애플리케이션과 달리 웹 애플리케이션은 웹 브라우저만 있으면 언제 어디서나 사용할 수 있다.
2009년 Node.js가 등장하면서 자바스크립트로도 웹 서버 애플리케이션을 개발할 수 있게 되었다.
페이스북에서 리액트 네이티브를 만들어 공개했다. 이를 활용하면 자바스크립트만으로 모든 운영체제에서 빠르게 작동하는 네이티브 애플리케이션을 만들 수 있다.
크롬 주소창에 about:blank 입력해 크롬이 기본적으로 제공하는 빈 페이지로 들어간다.
Uncaught ReferenceError: alrt is not defined
Uncaught ReferenceError: OO is not defined
OO 부분을 잘못 입력했을 때 발생한다.
앞서 살펴본 것처럼 alert를 alrt로 잘못 입력했을 경우
Uncaught SyntaxError: Invalid or unexpected token
토큰(기호)을 잘못 입력했을 때의 오류
따옴표를 열었으나 닫지 않은 경우
Uncaught SyntaxError: missing ) after argument list
토큰(기호)을 잘못 입력했다는 오류
괄호를 열고서 닫지 않은 경우
<body>
<script>
document.body.innerHTML = "<h1>안녕하세요</h1>"
</script>
</body>
표현식(expression) : 값을 만들어 내는 간단한 코드
문장(statement) : 표현식이 하나 이상 모인 것
프로그램 : 문장이 모인 것
클래스 이름은 항상 대문자로 시작한다.
변수, 인스턴스, 함수, 메소드 이름은 항상 소문자로 시작한다.
여러 단어로 이루어진 식별자는 각 단어의 첫 글자를 대문자로 한다.
두 번째 단어부터 시작 글자를 대문자로 작성한다.
HTML 페이지에는 크게 HTML 태그 주석과 자바스크립트 주석이 있다.
HTML 태그 주석
<!-- 주석 -->프로그래밍에서 프로그램이 처리할 수 있는 모든 것
자료형
문자열 자료형
자바스크립트에서는 문자가 하나든 여러 개든 모두 문자열 자료형이라고 한다.
자바스크립트는 문자 하나만 나타내는 자료형이 따로 없다.
큰따옴표와 작은따옴표 모두 활용해서 문자열 자료형을 만들 수 있지만, 따옴표의 종류는 항상 일관되게 사용하는 게 좋다.
문자열 길이 구하기
문자열.length
함수와 메소드는 모두 '특정 기능을 동작시키도록 작성된 코드의 집합'이다.
메소드는 클래스가 가지고 있는 함수를 말하며, 함수는 메소드를 포괄하는 의미를 가진다.
숫자 자료형
자바스크립트는 실수와 정수를 모두 같은 자료형으로 인식한다.
소수점이 있든 없든 모두 같은 숫자 자료형
불 자료형
true, false
비교 연산자를 사용해서 만들 수 있다.
불 부정 연산자
논리 부정 연산자 !
참을 거짓으로, 거짓을 참으로 바꾼다.
불 논리합/논리곱 연산자
논리합 연산자
논리곱 연산자
&&
||
자료형 검사
typeof(자료)
자료형을 확인할 때는 typeof 연산자를 사용한다.
typeof 연산자 뒤에 괄호는 생략 가능하다.
typeof 273
typeof 연산자는 다음과 같이 문자열과 비교해서 자료형을 확인하는 경우가 많다.
> typeof 10 === 'number'
true템플릿 문자열은 백틱 기호로 감싸서 만든다. 문자열 내부에 ${ } 기호를 사용하여 표현식을 넣으면 표현식이 문자열 안에서 계산된다.
=== 연산자 !== 연산자 : 값과 자료형이 같은지 비교하는 연산자
== 연산자 != 연산자 : 값이 같은지를 비교하는 연산자
상수와 변수
상수(constant) : 항상 같은 수
값에 이름을 한 번 붙이면 값을 수정할 수 없다.
변수 : 변할 수 있는 수
값을 수정할 수 있다.
실제로는 상수가 훨씬 많이 사용됨
상수는 다시 꺼낼 필요가 없으니 쌓을 수 있어서 저장 효율이 좋음
변수는 수시로 넣고 빼야 해서 위를 막을 수 없어 저장 효율이 나쁨
상수를 만드는 과정을 '선언'이라고 표현하고, const 키워드로 선언하면 된다.
상수는 선언할 때 반드시 값을 지정해야 한다.
같은 이름 사용 불가
const 이름 = 값상수는 선언할 때 반드시 값을 지정해야 한다.
> const pi
Uncaught SyntaxError: Missing initializer in const declaration변수
변수를 만들 때는 let 키워드를 사용한다.
같은 이름 사용 불가
let 이름 = 값undefined 자료형
1. 상수와 변수로 선언하지 않은 식별자
2. 값이 없는 변수
변수를 선언하면서 값을 지정하지 않은 경우
상수는 선언할 때 반드시 값을 지정해야 하므로 값이 없는 상수는 존재하지 않는다.
자료형 변환
문자열 입력
문자열 자료형을 입력할 때 사용하는 함수는 prompt()이다.
prompt(메시지 문자열, 기본 입력 문자열) <script>
const input = prompt('message', 'here')
alert(input)
</script>
<script>
const input = prompt('message', '')
alert(input)
</script>
입력창에 값을 입력하고 확인 버튼을 클릭하면 prompt() 함수는 입력한 문자열을 input에 저장한다.
불 입력
confirm() 함수를 사용하여 입력받는다.
confirm(메시지 문자열) <script>
const input = confirm('수락하시겠습니까?')
alert(input)
</script>
confirm() 함수를 사용하면 사용자에게 확인을 요구하는 메시지 창이 나타난다.
사용자가 확인 버튼을 클릭하면 true를 리턴하고, 취소 버튼을 클릭하면 false를 리턴한다.
숫자 자료형으로 변환하기
다른 자료형을 숫자 자료형으로 변환할 때는 Number() 함수를 사용한다.
Number(자료)숫자가 적혀 있는 문자열을 숫자로 변환한다.
> Number("123")
123
> typeof(Number("123"))
'number'
다른 문자가 들어있어서 숫자로 변환할 수 없는 문자열의 경우, NaN(Not a Number)라는 값을 출력한다.
NaN : 숫자로 나타낼 수 없는 숫자를 뜻한다. 숫자 자료형이다.
> typeof(NaN)
'number'숫자 연산자를 사용해서 자료형 변환하기
Number() 함수를 사용하지 않고도 숫자 자료형으로 변환할 수 있다.
숫자가 아닌 다른 자료에서 0을 빼거나 1을 곱하거나 1로 나누면 숫자 자료형으로 변환한다.
문자열 자료형으로 변환하기
String(자료)문자열 연산자를 사용해 자료형 변환하기
String() 함수를 사용하지 않고 문자열 자료형으로 변환할 수 있다.
문자열이 아닌 다른 자료에 빈 문자열을 더하면 문자열 자료형으로 변환한다.
<script>
const rawInput = prompt('inch 단위의 숫자를 입력해주세요.')
const inch = Number(rawInput)
const cm = inch * 2.54
alert(`${inch}inch는 ${cm}cm 입니다.`)
</script>if 조건식
if (조건식) {
// 조건식이 참일 때 실행할 문장
}식(expression)
식 => 계산 => CPU => 결과
조건식이 참일 때 실행할 문장이 한 줄이면 중괄호 생략 가능
> const date = new Date()
undefined
> date.getFullYear()
2021
> date.getMonth()
10
> date.getMonth()+1
11
> date.getDate()
13
> date.getHours()
15
> date.getMinutes()
34
> date.getSeconds()
24자바스크립트는 월을 0부터 세기 때문에 getMonth()메소드에 1을 더한다.
<script>
const date = new Date()
const hour = date.getHours()
if (hour < 12) {
alert('오전입니다.');
} else {
alert('오후입니다.')
}
</script>if else 조건식
if (조건식) {
// 조건식이 참일 때 실행할 문장
} else {
// 조건식이 거짓일 때 실행할 문장
}조건식이 참일 때 실행할 문장이 한 줄이면 중괄호 생략 가능
중첩 조건식
조건식 안에 조건식을 중첩해 사용하는 것
여러 번 중첩하는 것도 가능하다
if - else if 조건식
겹치지 않는 3가지 이상의 조건으로 나눌 때 사용
조건부 연산자
조건식 ? 참일 때 결과 : 거짓일 때 결과자바스크립트에서 항을 3개 갖는 연산자는 조건부 연산자가 유일해서 삼항 연산자라고 부르기도 한다.
<script>
const input = prompt('숫자를 입력해주세요')
const number = Number(input)
const result = (number >= 0) ? '0 이상의 숫자입니다.' : '0보다 작은 숫자입니다.'
alert(result)
</script>짧은 조건식
논리합 연산자를 사용한 짧은 조건식
다음 조건식은 뒤에 어떠한 값이 들어가도 항상 참이다.
true || OOO자바스크립트는 이처럼 참이 확실할 때 추가 연산을 진행하지 않는다. 즉, 논리합 연산자의 좌변이 참이면 우변을 실행하지 않는다.
불 표현식 || 불 표현식이 거짓일 때 실행할 문장논리곱 연산자를 사용한 짧은 조건문
논리곱 연산자는 양변이 모두 참일 때만 참이기 때문에 다음 식은 항상 거짓이다.
false && OOO논리곱 연산자는 좌변이 거짓이면 우변을 실행하지 않는다.
<script>
const input = prompt('정수를 입력해주세요')
const number = Number(input)
if (number % 2 === 0) {
alert(`${input}은 짝수입니다.`)
} else {
alert(`${input}은 홀수입니다.`)
}
</script>태어난 연도를 입력받아 띠 출력하기
<script>
const rawInput = prompt('태어난 해를 입력해주세요.')
const year = Number(rawInput)
const zodiac = '원숭이,닭,개,돼지,쥐,소,호랑이,토끼,용,뱀,말,양'.split(',')
alert(`${year}년에 태어났다면 ${zodiac[year % 12]} 띠입니다.`)
</script>
반복문
배열
배열은 여러 자료를 묶어서 활용할 수 있는 특수한 자료이다.
배열 만들기
배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형이다.
배열은 대괄호[ ]를 사용해 생성하고 내부의 값을 쉼표(,)로 구분해 입력한다.
배열 내부에 들어 있는 값을 요소(element)라고 한다.
어떠한 종류의 자료형도 요소가 될 수 있다.
배열 요소에 접근하기
각각의 요소에 접근하려면 배열 바로 뒤에 대괄호[ ]를 입력하고 그 안에 숫자를 넣는다.
배열의 인덱스는 0부터 시작한다. 가장 앞에 있는 요소를 0번째로 표현한다.
배열[인덱스]배열은 여러 개의 요소를 갖기 때문에 일반적으로 배열 이름을 복수형으로 짓는다.
대괄호 안에 계산식을 넣을 수도 있다.
const numbers = [34, 58, 9, 12, 61]
numbers[i+1]
numbers[i*3]배열 요소 개수 확인하기
배열 내부에 들어 있는 요소의 개수를 확인할 때는 배열의 length 속성을 사용한다.
배열.length배열의 마지막 요소를 선택할 때 배열.length - 1
배열 뒷부분에 요소 추가하기
push() 메소드를 사용해 배열 뒷부분에 요소 추가하기
배열.push(요소)변경된 개수를 반환한다.
인덱스를 사용해 배열 뒷부분에 요소 추가하기
자바스크립트에서 배열의 길이는 고정이 아니다. 다음과 같이 10번째 인덱스에 요소를 강제로 추가할 수 있다. 이때 fruitsA[3] ~ fruitA[9]는 아무것도 없는 empty가 된다.
다음과 같이 length 속성을 사용하여 배열의 마지막 위치에 요소를 추가할 수 있다.
배열 요소 제거하기
배열 요소를 제거하는 방법
1. 인덱스 기반으로 제거하는 경우
2. 값을 기반으로 제거하는 경우
인덱스로 요소 제거하기
배열의 특정 인덱스에 있는 요소를 제거할 때는 splice() 메소드를 사용한다.
배열.splice(인덱스, 제거할 요소의 개수)splice() 메소드의 2번째 매개변수에는 제거할 요소의 개수를 지정한다.
1을 지정하면 1개의 요소만 제거한다는 의미이다.
splice() 메소드는 제거한 요소의 배열을 반환한다.
splice() 메소드는 요소를 중간에 넣을 때도 사용할 수 있다.
값으로 요소 제거하기
값을 기반으로 요소를 제거할 때는 배열 내부에서 특정 값의 위치를 찾는 indexOf() 메소드를 사용해서 값의 위치를 추출한 뒤 splice() 메소드를 사용해 제거한다.
const 인덱스 = 배열.indexOf(요소)
배열.splice(인덱스, 1)indexOf() 메소드는 배열 내부에 요소가 있을 경우 인덱스를 리턴한다. 배열 내부에 요소가 없을 때는 -1을 리턴한다.
배열 내부에서 특정 값을 가진 요소 모두 제거하기
filter() 메소드 사용
배열의 특정 위치에 요소 추가하기
자주 사용하지는 않음
splice() 메소드의 2번째 매개변수에 0을 입력하면 splice() 메소드는 아무것도 제거하지 않으며, 3번째 매개변수에 추가하고 싶은 요소를 입력한다.
배열.splice(인덱스, 0, 요소)
자료의 비파괴와 파괴
자료 처리 연산자, 함수, 메소드는 크게 비파과적 처리와 파괴적 처리로 구분할 수 있다.
처리 후 원본의 상태 변화에 따라 구분한다.
비파괴적 처리 : 처리 후에 원본 내용이 변경되지 않는다.
파괴적 처리 : 처리 후에 원본 내용이 변경된다.
배열의 메소드들은 원본이 변경된다. push() 메소드를 실행한 뒤 array의 값을 보면 원본과 다르다는 것을 알 수 있다.
반복문
for in 반복문
for in 반복문의 반복 변수에는 요소의 인덱스가 들어온다. 이를 활용해서 배열 요소에 접근할 수 있다.
for (const i in array) {
console.log(array[i]) // 인덱스로 요소에 접근한다.
}안정성을 위해 몇 가지 코드를 더 추가해야 해서 for of 반복문을 더 많이 쓴다.
for of 반복문
for of 반복문의 반복 변수에는 요소의 값이 들어간다.
for (const fruit of fruits) {
console.log(fruit)
}for 반복문
for 반복문은 특정 횟수만큼 반복하고 싶을 때 사용하는 반복문이다.
for (let i = 0; i < 반복횟수; i++) {
실행할 문장
}confirm() 함수
'확인' 버튼을 클릭하면 true, '취소' 버튼을 클릭하면 false
break 키워드
<script>
for (let i = 0; true; i++) {
alert(i + '번째 반복입니다.')
const isContinue = confirm('계속 하시겠습니까?')
if (!isContinue) {
break
}
}
alert('프로그램 종료')
</script>continue 키워드
<script>
let output = 0
for (let i = 1; i <= 10; i++) {
if (i % 2 === 1) {
continue
}
output += i
}
alert(output)
</script>break 키워드나 continue 키워드는 반복문의 조건식을 적절하게 만들면 필요 없는 구문이다.
for (let i = 1; i <= 5; i++) {
let output = ''
for (let j = 1; j <= i; j++) {
output += "*"
}
console.log(output)
}
---------------------------------------
*
**
***
****
*****let output = ''
for (let i = 1; i <= 5; i++) {
for (let j = 1; j <= i; j++) {
output += "*"
}
output += '\n'
}
console.log(output)
---------------------------------------
*
**
***
****
*****let output = ''
for (let i = 1; i <= 5; i++) {
for (let j = 1; j <= 5; j++) {
if (j < i) {
output += " ";
} else {
output += "*";
}
}
output += '\n'
}
console.log(output)
---------------------------------------
*****
****
***
**
*let output = ''
for (let i = 5; i >= 1; i--) {
for (let j = 1; j <= 5; j++) {
if (j === i) {
output += "*";
} else {
output += " ";
}
}
output += '\n'
}
console.log(output)
---------------------------------------
*
*
*
*
* let output = ''
for (let i = 5; i >= 1; i--) {
for (let j = 1; j <= 5; j++) {
if (j >= i) {
output += "*";
} else {
output += " ";
}
}
for (let j = 1; j <= 5; j++) {
if (j > i) {
output += "*";
}
}
output += '\n'
}
console.log(output)
---------------------------------------
*
***
*****
*******
*********let output = ''
for (let i = 1; i <= 5; i++) {
for (let j = 5; j >= i; j--) {
output += ' '
}
for (let k = 1; k <= 2 * i - 1; k++) {
output += '*'
}
output += '\n'
}
console.log(output)
---------------------------------------
*
***
*****
*******
*********익명 함수(anonymous function) : 이름이 붙어있지 않은 함수
선언적 함수 : 이름이 있는 함수
최솟값을 구하는 함수
function getMin(arr) {
let min = arr[0]
for (const item of arr) {
if (min > item) {
min = item
}
}
return min
}
const testArr = [52, 273, 32, 103, 275, 24, 57]
console.log(getMin(testArr)) // 24가변 매개변수 함수 : 매개변수 개수가 고정적이지 않은 함수
자바스크립트에서 이러한 함수를 구현할 때는 나머지 매개변수(rest parameter)를 사용한다.
함수의 매개변수 앞에 마침표 3개(...)를 입력하면 매개변수들이 배열로 들어온다.
function 함수이름(...나머지 매개변수) { }function sample(...items) {
console.log(items)
}
sample()
sample(1, 2)
sample(1, 2, 3)
--------------------------------
[]
[ 1, 2 ]
[ 1, 2, 3 ]function getMin(...items) {
let min = items[0];
for (const item of items) {
if (min > item) {
min = item;
}
}
return min;
}
console.log(getMin(52, 273, 32, 103, 275, 24, 57)); // 24나머지 매개변수와 일반 매개변수 조합하기
나머지 매개변수는 항상 마지막에 입력한다.
function 함수이름(매개변수, 매개변수, ...나머지 매개변수) { }Array.isArray()
전개 연산자(spread operator)
함수 호출할 때 배열 앞에 마침표 3개 입력
배열을 전개해서 함수의 매개변수로 전달해준다.
함수이름(...배열)기본 매개변수
함수이름(매개변수, 매개변수=기본값, 매개변수=기본값)자바스크립트에서 함수는 자료이므로 변수에 할당할 수 있고, 함수를 함수의 매개변수로 전달해서 활용할 수 있다.
콜백 함수
자바스크립트는 함수도 하나의 자료형이므로 매개변수로 전달할 수 있다. 이렇게 매개변수로 전달하는 함수를 콜백 함수라고 한다.
function callThreeTimes(callback) {
for (let i = 0; i < 3; i++) {
callback(i)
}
}
function print(i) {
console.log(`${i}번째 함수 호출`)
}
callThreeTimes(print) // 인수로 함수를 전달
-------------------------------------------
0번째 함수 호출
1번째 함수 호출
2번째 함수 호출callThreeTimes() 함수의 매개변수에 print() 함수를 전달했다.
그리고 callThreeTimes() 함수 내부에서 print() 함수를 호출한다.
매개변수를 통해 함수를 받고, 그 함수를 통해 결과값을 호출한다.
콜백 함수 - 익명 함수 사용하기
인수에 바로 익명 함수 입력하기
function callThreeTimes(callback) {
for (let i = 0; i < 3; i++) {
callback(i)
}
}
callThreeTimes(function (i) {
console.log(`${i}번째 함수 호출`)
})
---------------------------------------
0번째 함수 호출
1번째 함수 호출
2번째 함수 호출배열이 갖고 있는 메소드 중에서 콜백 함수를 활용하는 메소드는 다음과 같은 형태의 콜백 함수를 사용한다.
function (value, index, array) { }콜백 함수를 활용하는 함수
forEach()
콜백 함수를 활용하는 가장 기본적인 함수는 forEach() 메소드이다.
forEach() 메소드는 배열이 갖고 있는 함수(메소드)이다.
const numbers = [273, 52, 103, 32, 57]
numbers.forEach(function (value, index, array) {
console.log(index, value, array)
})
map()
map() 메소드도 배열이 갖고 있는 함수이다.
map() 메소드는 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수이다.
let numbers = [273, 52, 103, 32, 57]
numbers = numbers.map(function (value, index, array) {
return value * value
})
numbers.forEach(console.log)
일반적으로는 매개변수에 3개 모두 입력하지 않고, value만 사용하거나 value와 index만 사용하는 경우가 많다.
let numbers = [1, 2, 3, 4, 5]
numbers = numbers.map(function (value) {
return value * value
})
numbers.forEach(console.log)filter()
filter() 메소드는 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수이다. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환한다. filter() 메소드도 배열이 갖고 있는 함수이다.
const numbers = [1, 2, 3, 4, 5]
const evenNumbers = numbers.filter(function (value) {
return value % 2 === 0
})
console.log(evenNumbers) // [ 2, 4 ]화살표 함수
콜백 함수를 쉽게 입력할 수 있는 함수 생성 방법
화살표 함수는 function 키워드 대신 화살표=>를 사용하여 함수를 생성한다.
(매개변수) => 리턴값let numbers = [1, 2, 3, 4, 5]
numbers = numbers.map((value) => value * value)
console.log(numbers) // [ 1, 4, 9, 16, 25 ]let numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
numbers.filter((value) => value % 2 === 0).map((value) => value * value).forEach((value) => {
console.log(value)
})0
4
16
36
64객체
const product = {
name: 'a',
type: 'b',
weight: 10,
};
console.log(product["name"]); // a
console.log(product.name); // a객체는 중괄호{ }로 생성한다.
객체는 요소에 접근할 때 키를 사용한다.
객체 뒤에 대괄호[ ]를 사용하고 키를 입력하면 객체의 요소에 접근할 수 있다.
대괄호를 사용하는 방법 외에 점.을 사용할 수도 있다.
※ 식별자로 사용할 수 없는 단어를 키로 사용할 경우 무조건 대괄호를 사용해야 객체의 요소에 접근할 수 있다.
속성과 메소드
배열 내부에 있는 값을 요소(element)라고 한다. 객체 내부에 있는 값은 속성(property)이라고 한다. 배열의 요소와 마찬가지로 객체의 속성도 모든 형태의 자료형을 가질 수 있다.
const object = {
number: 273,
string: 'abc',
boolean: true,
array: [52, 273, 103, 32],
method: function () {console.log('AAA')}
}
console.log(object['method']) // [Function: method]
console.log(object.method) // [Function: method]
속성과 메소드 구분하기
객체의 속성 중 함수 자료형인 속성을 특별히 메소드(method)라고 부른다.
기본적으로 화살표 함수는 메소드로 사용하지 않는다.
메소드 내부에서 this 키워드 사용하기
메소드 내에서 자기 자신이 가진 속성을 출력하고 싶을 때는 자신이 가진 속성임을 분명하게 표시해야 한다. 자기 자신이 가진 속성이라는 것을 표시할 때는 this 키워드를 사용한다.
<script>
const pet = {
name: 'nana',
eat: function (food) {
alert(this.name + '는 ' + food + '를 먹습니다.')
}
}
pet.eat('사슴고기')
</script>
동적으로 객체 속성 추가/제거
객체를 처음 생성한 후에 속성을 추가하거나 제거하는 것을 동적으로 속성을 추가한다 또는 동적으로 속성을 제거한다고 표현한다.
동적으로 객체 속성 추가하기
다음과 같이 객체를 생성한 후 속성을 지정하고 값을 입력하면 된다.
JSON.stringify() 메소드를 사용했는데 일단 객체를 콘솔 출력에서 쉽게 볼 수 있는 방법이라고 기억해두자.
<script>
const person = {}
person.name = 'nana'
person.hobby = 'music'
person.job = 'doctor'
// 자바스크립트 객체 -> JSON으로 변환
console.log(JSON.stringify(person))
</script>
<script>
const person = {}
person.name = 'nana'
person.hobby = 'music'
person.job = 'doctor'
// 자바스크립트 객체 -> JSON으로 변환
console.log(JSON.stringify(person, null, 2))
</script>
동적으로 객체 속성 제거하기
객체의 속성을 제거할 때는 delete 키워드를 사용하고 형태는 다음과 같다.
delete 객체.속성 <script>
const person = {}
person.name = 'nana'
person.hobby = 'music'
person.job = 'doctor'
delete person.hobby
console.log(JSON.stringify(person))
</script>
메소드 간단 선언 구문
function () {} 형태로 메소드를 선언할 수 있다고 했다. 최신 버전의 자바스크립트에서는 메소드를 조금 더 쉽게 선언할 수 있는 전용 구문이 있다.
<script>
const pet = {
name: 'nana',
eat (food) {
alert(this.name + '는 ' + food + '를 먹습니다.')
}
}
pet.eat('사슴고기')
</script>화살표 함수를 사용한 메소드
function () {} 형태로 선언하는 익명 함수와 () => {} 형태로 선언하는 화살표 함수는 객체의 메소드로 사용될 때 this 키워드를 다루는 방식이 다르다.
<script>
const test = {
a: function () {
console.log(this)
},
b: () => {
console.log(this)
}
}
test.a() // 현재 코드에서 test 객체를 출력
test.b() // window 객체를 출력
</script>
window 객체는 웹 브라우저 자체를 나타내는 웹 브라우저에서 실행하는 자바스크립트의 핵심 객체라고 생각하면 된다. 이처럼 메소드 내부에서 this 키워드를 사용할 때 의미가 달라지므로 화살표 함수를 메소드로 사용하지 않는 편이다.
객체의 속성과 메소드 사용하기
자바스크립트에서 사용하는 자료는 크게 기본 자료형(primitives)과 객체 자료형(object)으로 구분할 수 있다.
기본 자료형 : 숫자, 문자열, 불
객체 자료형: 함수, 배열, ... 이외 전부
자바스크립트는 기본 자료형이 객체 자료형이 될 수도 있다.
객체 자료형
속성과 메소드를 가질 수 있는 모든 것은 객체이다. 예를 들면 배열도 객체이다.
다음과 같이 a라는 이름의 배열을 선언하고 배열에 속성을 지정한 후 확인해보면 배열이 속성을 가질 수 있다는 것을 알 수 있다.
함수도 객체이다. 다음과 같이 함수 b를 선언하고 함수에 속성을 지정한 후 확인해보면 함수가 속성을 가질 수 있다는 것을 알 수 있다.
그래서 typeof 연산자를 사용해서 배열의 자료형을 확인해보면 "object"라고 출력된다. 배열인지 확인하려면 Array.isArray() 메소드를 사용한다.(Array도 메소드를 갖고 있으므로 객체이다.)
함수는 '실행이 가능한 객체'라는 특이한 자료로 typeof 연산자를 사용해서 자료형을 확인하면 "function"을 출력한다. 함수는 객체의 특성을 완벽하게 가지고 있으므로 자바스크립트에서는 함수를 일급 객체(first-class object)에 속한다고 표현하기도 한다.
기본 자료형
자바스크립트에서는 실체가 있는 것(undefined, null 등이 아닌 것) 중에 객체가 아닌 것을 기본 자료형(primitive types)이라고 부른다. 숫자, 문자열, 불이 기본 자료형이다.
이러한 자료형은 객체가 아니므로 속성을 가질 수 없다. 예를 들어 숫자에 속성을 추가해보겠다.
속성이 추가된 것처럼 보이지만 그 다음 코드를 보면 c.sample이 undefined로 나오므로 속성이 추가되지 않았다는 것을 알 수 있다. 문자열과 불 자료형도 같은 결과가 나온다.
기본 자료형을 객체로 선언하기
자바스크립트는 기본 자료형을 객체로 선언하는 방법을 제공한다. 숫자, 문자열, 불 등으로 자료형을 변환하는 함수(Numberm String, Boolean)는 다음과 같이 사용한다.
const 객체 = new 객체 자료형 이름()이렇게 사용하면 숫자 객체, 문자열 객체, 불 객체를 생성할 수 있다.
new Number(10)
new String('안녕하세요')
new Boolean(true)단순한 기본 자료형이 아니므로 이전과 다르게 속성을 가진다. 다음과 같이 new Number()를 사용해서 숫자를 생성하면 숫자와 관련된 연산자도 모두 활용할 수 있으며, 속성과 메소드를 활용할 수 있다.
속성을 가질 수 있다.
콘솔에서 단순하게 a를 출력하면 객체 형태로 출력된다.
숫자와 똑같이 활용할 수 있고 valueOf() 메소드를 사용해서 값을 추출할 수도 있다.
new 키워드 쓰는 거 잊지 말기
기본 자료형의 일시적 승급
자바스크립트는 사용의 편리성을 위해서 기본 자료형의 속성과 메소드를 호출할 때 일시적으로 기본 자료형을 객체로 승급시킨다. 그래서 속성과 메소드를 사용할 수 있는 것이다.
따라서 기본 자료형의 경우 속성과 메소드를 사용할 수는 있지만, 속성과 메소드를 추가로 가질 수는 없다고 생각하면 된다.
속성 존재 여부 확인
객체 내부에 어떤 속성이 있는지 확인해보는 코드는 굉장히 자주 사용되는 코드이다.
객체에 없는 속성에 접근하면 undefined 자료형이 나온다.
조건문으로 undefined인지 확인하면 속성 존재 여부를 확인할 수 있다.
const product = {
name: 'book',
price: 10000,
};
if (product.name !== undefined) {
console.log('name 속성이 존재한다.')
} else {
console.log('name 속성은 존재하지 않는다.')
}
-----------------------------------------------
name 속성이 존재한다.일반적으로 더 간단하게 검사하려고 다음과 같이 사용하기도 한다.
객체의 특정 속성이 false로 변환될 수 있는 값이 아닐 때 사용하는 코드이다.
const product = {
name: 'book',
price: 10000,
};
if (product.name) {
console.log('name 속성이 존재한다.')
} else {
console.log('name 속성은 존재하지 않는다.')
}
-----------------------------------------------
name 속성이 존재한다.배열 기반의 다중 할당
한 번에 여러 개의 변수에 값을 할당하는 다중 할당 기능
[식별자, 식별자, 식별자, ...] = 배열객체 기반의 다중 할당
{속성 이름, 속성 이름} = 객체const object = {
name: 'book',
price: 10000,
};
const {name, price} = object{식별자=속성 이름, 식별자=속성 이름} = 객체const object = {
name: 'book',
price: 10000,
};
// name 속성을 a 라는 이름으로, price 속성을 b 라는 이름으로
const {a=name, b=price} = object프로토타입으로 메소드 추가하기
어떤 객체의 prototype이라는 속성이 바로 객체 전용 옷(틀)이라고 할 수 있다.
prototype 객체에 속성과 메소드를 추가하면 모든 객체(와 기본 자료형)에서 해당 속성과 메소드를 사용할 수 있다.
객체 자료형 이름.prototype.메소드 이름 = function () {
}일반적으로 프로토타입에 속성을 추가하지 않는다. 하지만 프로토타입에 메소드를 추가하면 다양하게 활용할 수 있다.
Number.prototype.power = function (n = 2) {
return this.valueOf() ** n
}
const a = 12
a.power()String.prototype.contain = function (data) {
return this.indexOf(data) >= 0
}
const a = '안녕하세요'
a.contain('안녕')Array.prototype.contain = function (data) {
return this.indexOf(data) >= 0
}
const b = [273, 32, 103, 57, 52]
b.contain(273)function f1() {
this.name = "홍길동";
}
f1.prototype.test1 = function () {
console.log("test1() 호출됨!");
};
var obj1 = new f1();
obj1.test1();