1. 함수
(1) 함수
- 참조 타입 중 하나 (function 타입)
- 함수 정의 방법
- 함수 선언식
- 함수 표현식 - JavaScript의 함수는 일급 객체에 해당
- 변수에 할당 가능
- 함수의 매개변수로 전달 가능
- 함수의 반환 값으로 사용 가능
(2) 함수 선언식
- 함수의 이름과 함께 정의
- 구성
- 함수의 이름
- 매개변수
- 몸통 (중괄호 내부)
function add(num1, num2) {
return num1 + num2
}(3) 함수 표현식
- 함수를 표현식 내에서 정의
- 표현식 : 어떤 하나의 값으로 결정되는 코드의 단위 - 함수의 이름을 생략하고 익명 함수로 정의 가능
- 함수 표현식에서만 가능 - 구성
- 함수의 이름 (생략 가능)
- 매개변수
- 몸통
const add = function (num1, num2) {
return num1 + num2
}(4) 함수의 특징
- 인자 작성 시 '=' 문자 뒤 기본 인자 선언 가능
const dinner = funtion (name = 'hamburger') {
return `오늘의 저녁 메뉴는 ${name}`
}
dinner() // 오늘의 저녁 메뉴는 hamburger- 매개변수와 인자의 개수 불일치 허용
- n (매개변수) < n (인자)
const noArgs = function () {
return 0
}
noArgs(1, 2, 3) // 0
const twoArgs = function (arg1, arg2) {
return [arg1, arg2]
}
twoArgs(1, 2, 3) // [1, 2]- n (매개변수) > n (인자)
const threeArgs = function (arg1, arg2, arg3) {
return [arg1, arg2, arg3]
}
threeArgs() // [undefined, undefined, undefined]
threeArgs(1) // [1, undefined, undefined]
threeArgs(1, 2) // [1, 2, undefined]- Rest Parameter (...)
- 정해지지 않은 수의 매개변수를 배열로 받음
- rest parameter로 처리한 매개변수에 인자가 넘어오지 않을 경우에는 빈 배열로 처리
const restOpr = function (arg1, arg2, ...restArgs) {
return [arg1, arg2, restArgs]
}
restArgs(1, 2, 3, 4, 5) // [1, 2, [3, 4, 5]]
restArgs(1, 2) // [1, 2, []]- Spread Operator(...)
- 배열 인자를 전개하여 전달 가능
const spreadOpr = function (arg1, arg2, arg3) {
return arg1 + arg2 + arg3
}
const numbers = [1, 2, 3]
spreadOpr(...numbers) // 6(5) 선언식 vs 표현식
- 함수의 타입
- function으로 동일 - 호이스팅
- 함수 선언식 : 함수 호출 이후에 선언해도 동작
- 함수 표현식 : 함수 정의 전에 호출 시 에러 발생 (변수로 평가됨)
(6) 화살표 함수
- 함수를 비교적 간결하게 정의
- funtion 키워드 생략 가능
- 매개변수가 단 하나라면, '()' 생략 가능
- 몸통이 표현식 하나라면, '{}'과 return 생략 가능
const arrow1 = function (name) {
return `hello, ${name}`
}
// 1. function 키워드 삭제
const arrow2 = (name) => {
return `hello, ${name}`
}
// 2. 매개변수가 1개일 때 () 생략 가능
const arrow3 = name => {
return `hello, ${name}`
}
// 3. 몸통이 return을 포함한 표현식 1개일 때 {}와 return 생략
const arrow4 = name => `hello ${name}`2. 문자열
(1) 문자열 관련 주요 메서드
- includes
-string.includes(value)
- 문자열에 value가 존재하는지 판별 후 참 / 거짓 반환 - split
-string.split(value)
- value가 없을 경우, 기존 문자열을 배열에 담아 반환
- value가 빈 문자열일 경우, 각 문자로 나눈 배열을 반환
- value가 기타 문자열일 경우, 해당 문자열로 나눈 배열을 반환
- replace
-string.replace(from, to)
- 문자열에 from 값이 존재할 경우, 1개만 to 값으로 교체하여 반환
-string.replaceAll(from, to)
- 문자열에 from 값이 존재할 경우, 모두 to 값으로 교체하여 반환 - trim
-string.trim()
- 문자열의 시작과 끝의 모든 공백문자 (스페이스, 탭, 엔터 등)를 제거한 문자열 반환
-string.trimStart()
- 문자열 시작의 공백문자를 제거한 문자열 반환
-string.trimEnd()
- 문자열 끝의 공백문자를 제거한 문자열 반환
3. 배열
(1) 배열의 정의와 특징
- 키와 속성들을 담고 잇는 참조 타입의 객체
- 순서를 보장
- 주로 대괄호를 이용하여 생성하고, 0을 포함한 양의 정수 인덱스로 특정 값에 접근 가능
- 배열의 길이는
array.length형태로 접근 가능
(배열의 마지막 원소는array.length - 1로 접근)
(2) 배열 관련 기본 메서드
- reverse
-array.reverse()
- 원본 배열의 요소들의 순서를 반대로 정렬 - push
-array.push()
- 배열의 가장 뒤에 요소 추가
-array.pop()
- 배열의 마지막 요소 제거 - unshift & shift
-array.unshift()
- 배열의 가장 앞에 요소 추가
-array.shift()
- 배열의 첫 번째 요소 제거 - includes
-array.includes(value)
- 배열에 특정 값이 존재하는지 판별 후 참 / 거짓 반환 - indexOf
-array.indexOf(value)
- 배열에 특정 값이 존재하는지 확인 후 가장 첫 번째로 찾은 요소의 인덱스 반환
- 만약 해당 값이 없을 경우 -1 반환 - join
-array.join([separator])
- 배열의 모든 요소를 연결하여 반환
- separator는 선택적으로 지정 가능하며, 생략 시 쉼표를 기본 값으로 사용 - Spread operator (...)
- 배열 내부에서 배열 전개 가능
- 얕은 복사에 활용 가능
const array = [1, 2, 3]
const newArray = [0, ...array, 4]
console.log(newArray) // [0, 1, 2, 3, 4](3) 배열 관련 심화 메서드
- 배열을 순회하며 특정 로직을 수행하는 메서드
- 메서드 호출 시 인자로 callback 함수를 받는 것이 특징
- callback 함수 : 어떤 함수의 내부에서 실행될 목적으로 인자로 넘겨받는 함수 - forEach
- 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
- 반환 값이 없는 메서드
- 3가지 매개변수- element : 배열의 요소
- index : 배열 요소의 인덱스
- array : 배열 자체
const menus = ['치킨', '초밥', '라면']
menus.forEach((menu, index) => {
console.log(menu, index)
// 치킨 0
// 초밥 1
// 라면 2
})- map
- 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
- 콜백 함수의 반환 값을 요소로 하는 새로운 배열 반환
- 기존 배열 전체를 다른 형태로 바꿀 때 유용
const numbers = [1, 2, 3]
const doubleNums = numbers.map((num) => {
return num * 2
})
console.log(doubleNums) // [2, 4, 6]- filter
- 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
- 콜백 함수의 반환 값이 참인 요소들만 모아서 새로운 배열 반환
- 기존 배열의 요소들을 필터링할 때 유용
const numbers = [1, 2, 3, 4, 5]
const oddNums = numbers.filter((num, index) => {
return num % 2
})
console.log(oddNums) // [1, 3, 5]- reduce
-array.reduce(callback(acc, element, [index[, array]])[, initialValue])
- 배열의 각 요소에 대하 콜백 함수를 한 번씩 실행
- 콜백 함수의 반환 값들을 하나의 값에 누적 후 반환
- 주요 매개 변수- acc : 이전 콜백 함수의 반환 값이 누적되는 변수
- initialValue (optional) : 최초 콜백 함수 호출 시 acc에 할당되는 값 (default 값은 배열의 첫 번째 값)
- 빈 배열의 경우 initialValue를 제공하지 않으면 에러 발생
const numbers = [1, 2, 3]
const result = numbers.reduce((acc, num) => {
return acc + num
}, 0)
console.log(result) // 6- find
- 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
- 콜백 함수의 반환 값이 참이면, 조건을 만족하는 첫 번째 요소 반환
- 찾는 값이 배열에 없으면 undefined 반환
const friends = [
{ name: 'Amy', age: 23 },
{ name: 'Bob', age: 25 },
{ name: 'Chris', age: 27}
]
const result = friends.find((friend) => {
return friend.name === 'Chris'
})
console.log(result) // { name: 'Chris', age: 27}- some
- 배열의 요소 중 하나라도 주어진 판별 함수를 통과하면 참 반환
- 모든 요소가 통과하지 못하면 거짓 반환
- 빈 배열은 항상 거짓 반환
const numbers = [1, 2, 3, 4, 5]
const hasOddNumber = numbers.some((num) => {
return num % 2
})
console.log(hasOddNumber) // true- every
- 배열의 모든 요소가 주어진 판별 함수를 통과하면 참 반환
- 하나의 요소라도 통과하지 못하면 거짓 반환
- 빈 배열은 항상 참 반환
const numbers = [1, 2, 3, 4, 5]
const isEveryNumberOdd = numbers.every((num) => {
return num % 2
})
console.log(isEveryNumberOdd) // false4. 객체
(1) 객체의 정의와 특징
- 객체는 속성의 집합이며, 중괄호 내부에 key와 value의 쌍으로 표현
- key : 문자열 타입만 가능
- 띄어쓰기 등의 구분자가 있으면 따옴표로 묶어서 표현 - value : 모든 타입 가능
- 객체 요소 접근은 점 또는 대괄호로 가능
(*key 이름에 띄어쓰기 같은 구분자가 있으면 대괄호 접근만 가능)
(2) 객체와 메서드
- 메서드는 객체의 속성이 참조하는 함수
- 객체.메서드명()으로 호출 가능
- 메서드 내부에서는 this 키워드가 객체를 의미함
const me = {
firstName: 'jjung',
lastName: 'Kim',
fullName: this.firstName + this.lastName
getFullName: function () {
return this.firstName + this.lastName
}fullName은 메서드가 아니기 때문에 정상 출력되지 않음getFullName은 메서드이기 때문에 해당 객체의firstName과lastName을 정상적으로 이어서 반환
(3) 객체 관련 ES6 문법
- 속성명 축약
- 객체를 정의할 때 key와 할당하는 변수의 이름이 같으면 축약 가능
var menus = {
chicken: chicken,
sushi: sushi
}
// 속성명 축약
const menus = {
chicken,
sushi
}- 메서드명 축약
- 메서드 선언시 function 키워드 생략 가능
var obj = {
greeting: function () {
console.log('Hi')
}
}
// 메서드명 축약
const obj = {
greeting() {
console.log('Hi')
}
}- 계산된 속성
- 객체를 정의할 때 key의 이름을 표현식으로 이용하여 동적으로 생성 가능
const meal = 'dinner'
const menus = ['치킨', '초밥', '라면']
const today = {
[key]: value,
}
console.log(today) // {dinner: Array(3)}
console.log(today.dinner) // ['치킨', '초밥', '라면']- 구조 분해 할당
- 배열 또는 객체를 분해하여 속성을 변수에 쉽게 할당할 수 있는 문법
const userInfo = {
name: 'Amy',
phoneNumber: '010-1234-5678',
email: 'amy@amy.com'
}
const name = userInfo.name
const phoneNumber = userInfo.phoneNumber
const email = userInfo.email
// 구조 분해 할당
const { name } = userInfo
const { phoneNumber } = userInfo
const { email } = userInfo
// 여러 개도 가능
const { name, phoneNumber, email } = userInfo- Spread operator
- 객체 내부에서 객체 전개 가능
- 얕은 복사에 활용 가능
const obj = {b: 2, c: 3}
const newObj = {a: 1, ...obj, d: 4}
console.log(newObj) // {a: 1, b: 2, c: 3, d: 4}(4) JSON
- key-value 쌍의 형태로 데이터를 표기하는 언어 독립적 표준 포맷
- 자바스크립트의 객체와 유사하게 생겼으나, 실제로는 문자열 타입
- 따라서 JS의 객체로 조작하기 위해서는 parsing이 필수
- JSON 조작 내장 메서드
-JSON.parse()
- JSON => 자바스크립트 객체
-JSON.stringify()
- 자바스크립트 객체 => JSON
(5) this
- JS의 this는 실행 문맥에 따라 다른 대상을 가리킨다
- class 내부의 생성자 함수
- this : 생성되는 객체 - 메서드
- this : 해당 메서드가 소속된 객체 - 두 가지 경우를 제외하면 모두 최상위 객체 window를 가리킴
- function 키워드와 화살표 함수의 차이
- 함수 내부에 this 키워드가 존재할 경우 : 화살표 함수와 function 키워드로 선언한 함수가 다르게 동작
- 함수 내부에 this 키워드가 존재하지 않을 경우 : 완전히 동일하게 동작
5. lodash
- 자료 구조를 다룰 때 사용하는 유용하고 간편한 유틸리티 함수들을 제공
- CDN import 필요
// 랜덤한 한 개의 요소 추출
_.sample([1, 2, 3, 4]) // 3
// 랜덤한 다수의 요소 추출
_.sampleSize([1, 2, 3, 4], 2) // [2, 3]
// 반전
_.reverse([1, 2, 3, 4]) // [4, 3, 2, 1]
// 범위
_.range(5) // [0, 1, 2, 3, 4]
_.range(1, 5) // [1, 2, 3, 4]
_.range(1, 5, 2) // [1, 3]
try to be happy :D