멋사 4-4 TIL (JavaScript)

Seunggyu Jung·2023년 4월 4일
JavaScript 꿀팁멋사
0

차근차근 멋사 학습기록

목록 보기
8/10
post-thumbnail

1. 템플릿 리터럴

1-1. 정의

내장된 표현식을 허용하는 문자열 리터럴이다. 쉽게 설명해서, 문자열 내에 이전에 선언된 변수를 그자체로 사용할 수 있게 해주는 리터럴 체계라고 생각하면 편하다.

1-2. 표현식

``안에 문자열을 작성하고, 변수는 ${}안에 작성하면 된다.

const x =10;
const y = 20;
const result = x * y;
console.log(`x값은 ${x}이고, y값은 ${y}이고 두개의 곱은 ${result}입니다.`);

1-3. 특징

  • 기존에 이스케이프 코드인 \n을 사용하지 않고도 행간 줄바꿈 처리가 가능하다는 특징이 있다.
  • 다만, 가독성이 떨어진다는 단점이 있다.
if (true) {
    if (true) {
        if (true) {
            console.log(`h
e
l
l
o
`)
        }
    }
}

2. Array

2-1. array의 특징

  1. 거의 const를 사용하여 표현한다. 여기서 변수가 가리키는 것은 배열 내부의 요소가 아닌, 배열의 틀 그 자체를 가리키기에, 내부 요소에 변화를 줄 수 있다. 이를 mutable(변형가능) 이라 한다.

  1. 문자열 또한 배열의 일부로 배열처럼 표현할 수는 있으나, 배열처럼 인덱스로 호출하는 것은 불가능하다. 이는 문자열이 immutable(불변함) 이기 때문이다.
    const s ='hello world'
console.log(s[0])
s[0] = 'i' // error

  1. 배열의 프로퍼티가 숫자인 경우에는 오직 대괄호만으로 호출 할 수 있지만, 그 외에는 대괄호나 .을 찍어서 호출 할 수 있다.

    arr[1] // O
arr.1 // X
arr.length // O
arr['length'] // O

  2. 배열은 순서가 있다. 배열의 순서를 index라고 하며, 이 순서로 호출하는 것을 indexing이라 한다. 그리고 배열안에 있는 값을 원소(element)라고 한다.

  3. 배열에 다른 원시타입과 객체타입을 포함할 수 있다. 즉, 배열안에 또다른 배열이 들어가 2차원 그 이상으로도 표현이 가능하다는 것이다.

    const arr = [
    [1,2,3],
    [4,5,6],
    [7,8,9]
]
// arr[2][1]
// 8

2-2. pop(), push(), shift(), unshift()

  • 해당 메서드들은 배열의 요소들을 빼거나 더하여 배열 원형을 바꾸는 메서드로, 기능이 겹칠 수 있으나, 추가적인 기능의 유무로 용도가 나뉜다.

  1. pop() : 배열의 맨 마지막 요소를 추출하고, 추출한 값을 반환(return) 한다. 

    const arr = [1, 2, 3, 4, 5]
let lastValue = arr.pop()
arr // (4) [1, 2, 3, 4]
lastValue // 5

  2. shift() : 배열의 맨 앞 요소를 추출하고, 추출한 값을 반환(return) 한다.

    const arr = ["사과", "바나나", "수박"];
let firstValue = arr.shift();
arr // (2) ['바나나', '수박']
firstValue // '사과'

  3. push() : 배열의 맨 마지막에 요소를 추가한다.

    const arr = [1, 2, 3, 4, 5]
arr.push(6)
arr  // (6) [1, 2, 3, 4, 5, 6]

  4. unshift() : 배열의 맨 앞에 요소를 추가한다.

    const arr = ["사과", "바나나", "수박"];
arr.unshift("딸기","참외")
arr // (5) ['딸기', '참외', '사과', '바나나', '수박']

2-3. splice & slice

  • 두 메서드 모두 배열의 범위를 정하여 그 범위의 요소들이 담긴 배열을 반환한다는 공통점인 기능을 하지만, splice의 경우, 원본에 영향을 주면서 작동 한다는 차이점이 있다.
  1. arr.splice(start, deleteCount, items) : 인덱스 start 번째에서 부터 deleteCount개의 요소를 지우고, 그 자리에 items들을 넣는다.
    const arr = [10, 20, 30, 40, 50]
const x = [1, 2, 3]
arr.splice(2, 2, ...x); // (2) [30, 40] // 잘려나간 것
arr // (6) [10, 20, 1, 2, 3, 50] // 배열이 바뀜
arr.splice(2, 2); // 2번째 인덱스에서 값 2개를 삭제. 삽입되는 값은 없음. //  [1, 2]
arr // [10, 20, 3, 50]
  • 예외 : splice의 파라미터에 값이 1개만 들어갈 경우, start -1 번째 빼고 다 잘려나간다는 특이점이 있다.
    const arr = [10, 20, 3, 50]
arr.splice(1);  // 0번째까지 남기고 뒤에는 다 날림  // [20, 3, 50]
arr // [10]
  1. arr.slice(start, end) : 인덱스 start 번째에서 end - 1번째 까지의 요소들을 추출한다. 단, 원본은 바뀌지 않았다.
    const arr = ["apple", "banana", "cherry", "durian", "elderberry"];
console.log(arr.slice(1, 4)); // (3) ['banana', 'cherry', 'durian']
console.log(arr)  // (5) ['apple', 'banana', 'cherry', 'durian', 'elderberry']
console.log(arr.slice(0)) // 전부 출력 // (5) ['apple', 'banana', 'cherry', 'durian', 'elderberry']

2-4. forEach & map

  • 두 메서드 모두 배열의 요소들을 순환하는 기능을 하지만, map은 새로운 배열을 생성한다는 차이점이 있다.

  1. arr.forEach((item, index) => ) : 콜백함수에 들어가는 파라미터가 item과 index이다.

    // 배열안에 1~100까지 forEach로 넣는 방법
const arr1 = Array(100).fill(0)
const arr2 = []
arr1.forEach((item,index) => arr2.push(index + 1))

  2. arr.map((v,i) => ) : 콜백함수에 들어가는 파라미터가 value와 index이다.

    // map으로 1~100까지인 배열 만들기
const arr = Array(100).fill(0)
arr.map((v,i) => i +1)

2-5. filter()

  • filter((v,i) => v)는 value 값에 원하는 조건을 입력하여, 해당 요소만 추출한 새로운 배열을 만들어준다. 원본 배열은 그대로 유지된다.
    // 짝수 찾는 방법
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
arr.filter(function(el){
    return el % 2 === 0
}) // (5) [2, 4, 6, 8, 10]
arr // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

2-6. reduce((a,c) => a + c, 0)

  • reduce()는 보통 배열의 요소들을 더할 때 사용되는 메서드로, a는 누적된 값(accumulator), c는 현재값(currentValue)을 의미하며, 맨 뒤에 inital value 0이 반드시 들어가야한다.
    const arr = [1, 2, 3, 4, 5]
arr.reduce((a,c) => a + c, 0)  // 15 // 0은 반드시 넣어라

2-7. includes()

  • arr.includes(n)은 arr 배열의 요소에 n이 포함되어 있는지를 boolean 값으로 반환해주는 메서드로, 요소의 타입과 컨텐츠가 정확하게 n과 일치해야 true를 반환한다.
    const arr = ['hello' , 'world', 10 , 'seunggyu']
arr.includes('hello') // true
arr.includes('h3l') // false
arr.includes('10')  // false

2-8. join()

  • arr.join('n')은 배열 arr의 문자열 요소들을 'n'으로 이어 하나의 문자열로 반환해준다.
    const arr = ['hello' , 'world', 'seunggyu']
arr.join("!")  // 'hello!world!seunggyu'

2-9. sort()

  • arr.sort()는 배열 arr을 오름차순 또는 내림차순으로 정리하여 원본을 변형시키는 메서드로, 주로 sort안에 다음과 같은 화살표 함수와 함께 쓰기에 암기해주는 것이 좋다.
    참고로, sort((a,b) => a - b)메서드의 작동 원리는 a,b 두 요소의 차를 구해 0보다 작거나 같으면 그대로 유지하며 양수인 경우 b가 앞으로 가면서 순서를 잡는다. 물론, 내림차순은 이의 반대원리로 작동된다. + 폴더에 실무사용코드가 있으므로 참고!!
    // 오름차순
const nums = [3, 1, 11, 8, 10];
console.log(nums.sort((a, b) => a - b));
nums // (5) [1, 3, 8, 10, 11]
// 내림차순
const nums = [3, 1, 11, 8, 6];
console.log(nums.sort((a, b) => b - a));
nums // (5) [11, 8, 6, 3, 1]

3. object(객체)

  • 유사배열객체로, 중괄호 안에 key : value의 형태로 요소들을 정렬하는 참조 타입이다.
    이는 재할당으로만 변경이 가능한 원시타입과 달리, 변수가 참조를 하는 타입이기에 동적으로 프로퍼티를 생성 및 갱신을 할 수 있어 유지보수에 상당히 유용하다.
    참고로 프로퍼티는 key : value를 의미한다.
    // 객체 사용 예시
const test = {
    group : ['ein', 'zwei', 'drei', 'vier' ,'funf'],
    duty : "Go Home and GEt Rest",
    trouble : function (){
        return "After School Class"
    }
}
// value가 함수인 경우는 key도 함수의 형태로 작성해야 호출이 가능하다.
test.trouble() // After School Class
// 1. 동적 추가
test.solution = "pass_exam"
test //  {group: Array(5), duty: 'Go Home and GEt Rest', solution: 'pass_exam', trouble: ƒ}
// 2. 동적 갱신
test.duty = "work_hard"
test.duty // "work_hard"
// 3. 동적 삭제
delete test.trouble;
test //  {group: Array(5), duty: 'work_hard', solution: 'pass_exam'}

3-1. hasOwnProperty

  • 객체를 돌며 해당 프로퍼티 키의 존재 유무를 boolean값으로 반환한다. 여기서 유의할 점은 객체의 프로퍼티 키는 문자열 형태로 작성하도록 한다.
    단어끼리 합쳐서 사용하는 메서드는 대부분 앞글자를 대문자로 작성하여 구별한다.(has'O'wn'P'roperty)
    console.log(test.hasOwnProperty('lunch')); // false
console.log(test.hasOwnProperty('trouble')); // true

3-2. 프로퍼티 호출방식

  • aespa.keys() 와 같은 다른언어의 사용 방식이 아닌 Object를 붙여 사용한다는 것이 중요하다.
console.log(Object.keys(test))  // (3) ['group', 'duty', 'trouble']
console.log(Object.values(test))  // (3) [Array(5), 'Go Home and GEt Rest', ƒ]

4. 함수 function()

4-1. 함수의 특징 : 왜 함수를 사용하는가?

1. 재사용성이 높아짐

  • 코드를 작성하다보면 같은 명령 코드를 여러 곳에서 사용해야하는 경우가 생긴다. 그때마다 장황하게 명령코드들을 작성하면, 가독성이 현저하게 떨어지며, 부팅속도 또한 늦어질 수 밖에 없다.
    함수는 반복되는 코드들을 간결하게 정리하여 재사용성을 높인다. 
    function Hock(){
    console.log('hello')
    console.log('hello')
    console.log('hello')
    console.log('hello')
    console.log('hello')
    console.log('hello')
    console.log('hello')
}
Hock()  // Hock()하나만 있으면 위의 7줄의 코드가 실행된다.
Hock()
Hock()

2. 유지보수가 용이함

  • 함수는 처음 선언할 때만 자세하게 기술하고, 나머지 함수들은 콜백 함수들이기에, 유지보수가 필요하면 최상단의 첫번째 함수만 수정하면 된다.
    function 밥짓기() {
	코드...  // 여기만 수정하면 유지보수가 끝난다.
}
밥짓기()
밥짓기()
밥짓기()
밥짓기() * 100

3. 구조 파악이 용이함

  • 함수의 이름을 정할 때, 그 함수의 역할을 유추할 수 있는 이름을 지어주면, 협업이나 유지보수를 할 때, 해당 함수의 역할이나 전체적인 코드의 구조를 파악을 보다 수월하게 할 수 있다.
    밥짓기() // 해당 함수가 밥을 짓기 위한 함수라는 것을 파악할 수 있음
국끓이기()
테이블 셋팅하기()
반찬덜기()
// 해당 코드는 식사준비를 위한 코드라는 것을 알 수 있음

4-2. 함수의 구조 및 종류

1. 함수 선언문(일반적인 함수형태)

  • 가장 보편적인 함수의 형태로, 함수의 이름과 파라미터로 구성이 된다.
  • 파라미터(parameter)는 함수를 선언할때 사용하는 매개변수를 의미하며, 아규먼트(argument)는 함수에 입력받는 실제 값을 의미한다.
    function ein(a,b) {  // a와 b가 본 함수의 파라미터
	let z = a + b;
    return Z ** 2
 }
 console.log(ein(1,2)) // 1, 2가 해당 함수의 아규먼트

2. 화살표 함수(주로 실무에서 사용!!)

  • 표현방식이 간단하여 실무의 거의 모든 함수들이 화살표함수를 사용한다.
  • 함수의 내부에서 한 줄 표현식만 반환하면, return 키워드 없이 한 줄로도 표현이 가능하다.
    const zwei = (a,b) => (a + b) ** 2
// 만악 함수 실행시 전달하는 인자가 한 개라면 소괄호를 생략가능
const drei = a => a ** 2

3. 익명 함수(이름 없이 선언하는 함수)

  • 함수를 선언할 때, 따로 이름을 선언하지 않는 것을 의미한다.
  • 이 경우, 변수명을 선언하여 사용한다.
    cosnt vier = function (a,b) {
	let z = a + b;
    return Z ** 2
 }
 console.log(vier(1,2))  // 변수로 선언하여 다양하게 사용함

4. 콜백함수

  • 외부에서 선언된 함수를 아규먼트에 작성하여 끌어오는 함수
  • 함수의 순수성을 유지시키고, 코드 간결화에 큰 기여를 한다.
  • 함수의 순수성은 하나의 함수에 하나의 함수만 작성되어 있는 것을 의미한다.
    function funf(a,b,c) {
    let z = c(a,b) + c(a,b) // 여기서 ein(a,b)를 쓰면 함수의 순수성이 깨지는 것
    return z * 2
}
funf(7, 3, ein) // ein은 외부에서 선언된 함수명이다.

4-3. return과 console.log의 차이

1. return

  • return은 지시자라고 불리며, return을 만나면, 함수는 즉시 실행을 멈추고 함수를 호출하는 곳에 반환 값을 할당한다.
  • return이 선언되지 않는 빈 함수는 undefined를 반환한다.
  • return만 선언되고 반환값이 없는 함수도 undefined를 반환한다.
  • return undefined도 undefined를 반환한다.
    function hello1(){
    //빈 코드
}
function hello2(){
    return
}
function hello3(){
    return undefined
}
hello1() // undefined
hello2() // undefined
hello3() // undefined

2. console.log

  • console은 웹 브라우저의 디버깅 콘솔에 접근 할 수 있게 하는 메서드들 제공하는 객체로, 아무전역객체에서 접근이 가능하다.
  • log는 웹 콘솔에 메시지를 출력해주는 메서드이다.
  • 이 둘을 종합하면, console.log는 작성된 컨텐츠를 웹 콘솔에 출력해주는 메서드이기에, 함수내의 return과 같은 역할을 하지 못한다.
    function hello4(){
    console.log('hello')
    console.log('hello')
    console.log('hello')
    return	// undefined 반환
    console.log('hello')
    console.log('hello')
    console.log('hello')
}
hello4()  // hello * 3

4-4. JavaScript 함수의 결점

  • 아규먼트가 파라미터보다 적거나 많아도 오류를 출력하지 않는다는 단점이 있다.
    function 함수1(a, b, c){
    return a + b + c
}
함수1(10, 20, 30, 40) // 60 // error가 발생하지 않는다. 
함수1(10, 20)  // 30 // error가 발생하지 않는다.

4-5. 함수의 특이점

  • 파라미터에 값을 미리 선언할 수 있다.
  • 단, 아규먼트에서 값을 고정하더라도, 반환값 변수의 순서대로 고정된다.
    function 함수1(a=10, b=20, c=30){
    return a + b + c
}
함수1(1, 1) // 32
// a와 c에 들어갈 것이라 생각했지만, a와 b에 들어감
function 함수1(a=10, b=20, c=30){
    return a + b + c
}
함수1(a=1, c=1) // 32

4-6. 즉시 실행 함수

(function() {
    console.log('이 함수는 만들어지자마자 바로 실행됩니다!');
  })();

function 함수(){

}

함수()
profile
Seunggyu Jung
감동을 주고픈 개발자(준비생)
이전 포스트

멋사 4-3 TIL (JavaScript)

다음 포스트

멋사 4-6 TIL(JavaScript)

0개의 댓글