[Javascript] 02. Javascript (함수/ 문자열/ 배열)

블록 스코프 vs 전역 스코프
- 스코프 = 유효 범위
  - 메모리를 비워줘야하는 시점 (변수가 필요 없다는 기준)
- 블록 스코프
  - { } => 블록 (조건문, 반복문, 등에 사용)

할당
- a = b : b를 a에 할당한다.
- 할당 : 최초에 무언가를 a에 넣는 행위
- 재할당 : 같은 공간(메모리 -> 변수 a)에 무언가를 넣는 행위

변수선언 키워드 = var(0%), let(5%), const(95%)

pass by value ve pass by reference
- 원시값 : 값에 의한 전달 (pass by value)
- 객체값 : 참조에 의한 전달 (pass by reference)
```
const a = [1]
const b = a

a.push(2)
console.lob(b)
// (2) [1,2]
// 객체들은 가리키는 주소값을 넣어준 것 따라서 같은 객체를 가리키니 값의 변화 있음.
```
- let sb1 = 1 let sb2 = 2 sb1 = sb2 sb2 = 3 // sb 라는 변수에 할당된 값 = 2

함수

JavaScvipt에서 함수

참조타입 중 하나로 function 타입에 속함
함수 정의하는 방법 2가지
- 함수 선언식(function declaration)
- 함수 표현식(function expression)
<참고> 함수-> 일급 객체에 해당
- 일급 객체 : 변수에 할당가능/ 함수의 매개변수로 전달 가능/ 함수의 반환값으로 사용 가능

함수 선언식 (function statement, declaration)
- 함수의 이름과 함께 정의하는 방식
- 3가지 부분으로 구성
  - 함수의 이름(name)
  - 매개변수(args)
  - 몸통 (중괄호 내부)
```
function name(args) {
    // do something
}

function add(num1, num2) {
    return num1 + num2
}

add(1,2) // 함수 호출
```

함수 표현식 (function expression)
- 함수를 표현식 내에서 정의하는 방식 ( 표현식 : 어떤 하나의 값으로 결정되는 코드의 단위)
- 함수의 이름을 생략하고 익명 함수로 정의 가능
  - 익명함수(anonymous function) : 이름 없는 함수
  - 익명함수는 함수 표현식에서만 가능
```
const name = function (args) {
    // do something
}

const add = function (num1, num2){
    return num1+num2
}
add(1,2)
```
javascript의 함수는 인자의 개수 불일치 허용
- 매개변수보다 인자의 개수가 많은 경우
  - 앞에서부터 차례대로, 뒤에 무시
- 매개변수보다 인자의 개수가 적을경우
  - 부족한 부분 undefined로
Rest Parameter
- ...(rest parameter)를 사용하면 함수가 정해지지 않은 수의 매개변수를 배열로 받음 (python *args와 유사)
- 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

함수 선언식 vs 함수 표현식

함수 선언식(declaration)함수 표현식(expression)

차이점

익명 함수 불가능, 호이스팅 O

익명 함수 가능, 호이스팅X

함수의 타입
- 선언식 함수와 표현식 함수 모두 타입은 function으로 동일
호이스팅 - 함수 선언식
- 함수 선언식으로 선언한 함수는 var로 정의한 변수처럼 hoisting 발생
- 함수 호출 이후에 선언해도 동작함
```
add(2,7) // 9
function add (num1, num2) {
	return num1 + num2
}
```

호이스팅 - 함수 표현식
- var로 만든 변수에서는 '호이스팅' 발생
- let, const로 만든 변수에서는 '호이스팅이 발생하지 않는 것 처럼' 동작
- 함수 표현식으로 정의된 변수는 변수로 평가되어 변수의 scope 규칙을 따름
- 함수 표현식을 var로 작성한 경우, 변수가 선언 전 undefined로 초기화 되어 다른 에러가 발생

Arrow Function

function 키워드를 생략해서 함수를 비교적 간결하게 정의하는 문법
매개변수가 단 하나 뿐이라면 () 도 생략 가능
함수 몸통이 표현식 하나라면 {}과 return도 생략 가능
기존 function 키워드 사용방식과 차이점은 후반부 this 키워드를 학습후 설명

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}'

문자열 (String)

javascript 문자열

문자열 관련 주요 메서드

includes
- string.includes(value) : 문자열에 value가 존재 하는지 판별 후 참/ 거짓 반환
```
const str = 'a santa at nasa'

str.includes('santa') // true
str.includes('asan') // false
```

slpit
- string.split(value)
  - value가 없을 경우, 기존 문자열을 배열에 담아 반환
  - value가 빈 문자열일 경우 각 문자로 나눈 배열을 반환
  - value가 기타 문자열인 경우, 해당 문자열로 나눈 배열을 반환
```
const str = 'a cup'

str.split() // ['a cup']
str.split('') // ['a',' ','c','u','p']
str.split(' ') // ['a', 'cup']
```

replace
- string.replace(from, to)
  - 문자열에 from 값이 존재하는 경우 1개만 to 값으로 교체하여 반환
- string.replaceAll(from, to)
  - 문자열에 from 값이 존재할 경우, 모두 수 값으로 교체하여 반환
```
const str = 'a b c d'

str.replace(' ', '-') // 'a-b c d'
str.replaceAll(' ','-') // 'a-b-c-d'
```

trim
- string.trim()
  - 문자열 시작과 끝의 모든 공백문자(스페이스, 탭, 엔터 등)를 제거한 문자열 반환
- string.trimStart()
  - 문자열 시작의 공백문자를 제거한 문자열 반환
- string.trimEnd()
  - 문자열 끝의 공백문자를 제거한 문자열 반환
```
const str = '    hello    '
str.trim() // 'hello'
str.trimStart() // 'hello    '
str.trimEnd() // '    hello'
```

배열(Arrays)

배열의 정의와 특징

키와 속성들을 담고 있는 차조 타입의 객체(object)
=> 이유 : 자바스크립트에서 배열은 '정식 배열'이 아니다. '유사배열객체' 이다.
순서를 보장하는 특징이 있음
주로 대괄호를 이용하여 생성하고, 0을 포함한 양의 정수 인덱스로 특정 값에 접근 가능
배열의 길이는 array.length 형태로 접근 가능 ( 마지막 원소는 array.length -1 로 접근 )

const numbers = [1,2,3,4,5]

console.log(numbers[0])	// 1
console.log(numbers[-1]) // undefined
console.log(numbers.length) // 5

console.log(numbers[numbers.length -1]) // 5
console.log(numbers[numbers.length -2]) // 4

배열 관련 주요 메서드

reverse

array.reverse()
- 원본 배열의 요소들의 순서를 반대로 정렬

const numbers = [1,2,3,4,5]
numbers.reverse()
console.log(numbers) // [5,4,3,2,1]

push & pop

array.push() : 배열의 가장 뒤에 요소 추가
array.pop() : 배열의 마지막 요소 제거

const numbers = [1,2,3,4,5]

numbers.push(100)
console.log(numbers)	// [1,2,3,4,5,100]

numbers.pop()
console.log(numbers) 	// [1,2,3,4,5]

unshift & shift

array.unshift() : 배열의 가장 앞에 요소 추가
array.shift() : 배열의 첫 번째 요소 제거

const numbers = [1,2,3,4,5]

numbers.unshift(100)
console.log(numbers)	// [100,1,2,3,4,5]

numbers.shift()
console.log(numbers)	// [1,2,3,4,5]

includes

arrays.includes(value) : 배열에 특정 값이 존재하는지 판별 후 참 또는 거짓 반환

const numbers = [1,2,3,4,5]
console.log(numbers.includes(1)) 	// true
console.log(numbers.includes(100))	// false

indexOf
- array.indexOf(value)
  - 배열에 특정 값이 존재하는지 확인 후 가장 첫 번째로 찾은 요소의 인덱스 반환
  - 만약 해당 값이 없을 경우 -1 반환
```
const numbers = [1,2,3,4,5]
let result

result = numbers.indexOf(3)		// 2
console.log(result)

result = numbers.indexOf(100)	// -1
console.log(result)
```

join

array.join([separator])
- 배열의 모든 요소를 연결하여 반환
- separator(구분자)는 선택적으로 지정 가능하며, 생략시 쉼표를 기본 값으로 사용

const numbers = [1,2,3,4,5]
let result

result = numbers.join()		// 1,2,3,4,5
console.log(result)

result = numbers.join('')	// 12345
console.log(result)

result = numbers.join(' ')	// 1 2 3 4 5
console.log(result)

result = numbers.join('-')	//1-2-3-4-5
console.log(result)

Spread operator(...)

배열 내부에서 배열 전개 가능
얕은 복사에 활용 가능

const array = [1,2,3]
const newArray = [0, ...array, 4]

console.log(newArray)	// [0,1,2,3,4]

배열을 순회하며 특정 로직을 수행하는 메서드

메서드 호출 시 인자로 callback 함수를 받는것이 특징
- callback 함수 : 어떤 함수의 내부에서 실행될 목적으로 인자로 넘겨받는 함수를 말함

forEach
- array.forEach(callback(element[, index[,array]]))
  - 배열의 각 요소에 대해 콜백함수를 한 번씩 실행
  - 콜백 함수는 3가지 매개변수로 구성
    - element: 배열의 요소
    - index : 배열 요소의 인덱스
    - array : 배열 자체
  - 반환 값(return)이 없는 메서드
```
array.forEach((element, index, array)) => {
    // do something
}

const fruits = ['딸기','수박','사과','체리']

fruits.forEach((fruit, index) => {
    console.log(fruit, index)
    // 딸기 0
    // 수박 1
    // 사과 2
    // 체리 3
})
```

map
- array.map(callback(element[, index[, array]]))
  - 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
  - 콜백 함수의 반환값을 요소로하는 새로운 배열 반환
  - 기존 배열 전체를 다른 형태로 바꿀 때 유용
```
array.map((element, index, array)=>{
    // do something
})

const numbers = [1,2,3,4,5]

const doubleNums = numbers.map((num)=>{
    return num * 2
})

console.log(doubleNumbs) // [2,4,6,8,10]
```

filter
- array.filter(callback(element[, index[, array]]))
  - 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
  - 콜백 함수의 반환 값이 참인 요소들만 모아서 새로운 배열을 반환
  - 기존 배열의 요소들을 필터링할 때 유용
```
array.filter((element, index, array)=>{
    // do something
})

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)에 누적 후 반환
  - reduce 메서드의 주요 매개변수
    - acc : 이전 callback 함수의 반환 값이 누적되는 변수
    - initialValue(optional) : 최초 callback 함수 호출 시 acc에 할당 되는 값 default 값은 배열의 첫 번째 값
```
array.reduce((acc, element, index, array) => {
    // do something
}, initialValue)


const numbers = [1,2,3]
const result = numbers.reduce((acc, num) => {
    return acc + num
}, 0)

console.log(result)		// 6
```

find

array.find(callback(element[, index[, array]]))
- 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
- 콜백 함수의 반환 값이 참이면, 조건을 만족하는 첫 번째 요소를 반환
- 찾는 값이 배열에 없으면 undefined 반환

array.find((element, index, array)) {
    // do something
}

const avengers = {
    { name : 'Tony Stark', age:45},
    { name : 'Steve Rogers' age: 32},
    { name : 'Thor', age : 40 },
}

const result = avengers.find((avenger)=>{
    return avenger.name === 'Tony Stark'
})

console.log(result) 	// {name: "Tony Stark", age: 45}

some
- array.some(callback(element[, index[, array]]))
  - 배열의 요소 중 하나라도 주어진 판별 함수를 통화하면 참을 반환
  - 모든 요소가 통과하지 못하면 거짓 반환
  - 빈 배열은 항상 거짓 반환
```
array.some((element, index, array) => {
    // do something
})
```

every
- array.every(callback(element[, index[, array]]))
  - 배열의 모든 요소가 주어진 판별함수를 통과하면 참을 반환
  - 하나의 요소라도 통과하지 못하면 거짓 반환
  - 빈 배열은 항상 참 반환
```
array.every((element, index, array) => {
    // do something
})
```

'프로그래밍언어 > Javascript' 카테고리의 다른 글

[Javascript] 03. Javascript (프로토타입/클래스/This) (0)	2022.04.29
[Javascript] 01. Javascript (2)	2022.04.25

Subin's Study Log

[Javascript] 02. Javascript (함수/ 문자열/ 배열)

함수

JavaScvipt에서 함수

함수 선언식 vs 함수 표현식

Arrow Function

문자열 (String)

문자열 관련 주요 메서드

배열(Arrays)

배열의 정의와 특징

배열 관련 주요 메서드

배열을 순회하며 특정 로직을 수행하는 메서드

'프로그래밍언어 > Javascript' 카테고리의 다른 글

댓글

티스토리툴바

[Javascript] 02. Javascript (함수/ 문자열/ 배열)

함수

JavaScvipt에서 함수

함수 선언식 vs 함수 표현식

Arrow Function

문자열 (String)

문자열 관련 주요 메서드

배열(Arrays)

배열의 정의와 특징

배열 관련 주요 메서드

배열을 순회하며 특정 로직을 수행하는 메서드

'프로그래밍언어 > Javascript' 카테고리의 다른 글

관련글

댓글

티스토리툴바