[ JavaScript ] 자바스크립트 기초 (3)

결·2023년 7월 25일

목록 보기

3/9

📌 함수

parameter : 함수에서 입력받는 값에 대한 정의
argument : 실제 입력하는 값

// 함수 선언
function calc(num) {
    console.log((num * 10 / 2 % 3).toString());

}

// 함수 실행
calc(4);

// 결과 : 2

function multiply(x, y) {
    console.log(x * y)
}

multiply(2, 3)

// 결과 : 6

파라미터에 디폴트값을 줄 수 있음.
따로 argument에 값을 지정하지 않을 경우 defalut 값으로 계산.

function multiply(x, y = 10) {
    console.log(x * y)
}

multiply(2, 4)
multiply(2)

/** 결과
8
10
*/

🔎 return

값을 함수의 외부로 받을 수 있음

// 반환 받기
function multiply(x, y) {
    return x * y
}
const result1 = multiply(2, 3);
console.log(result1);

const multiplyTwo = function(x, y){
  return x * y;
}

🧷 Arrow 함수

const 함수이름 = (파라미터) => {
    함수 바디
}

const multiply2 = (x, y) => {
    return x * y;
}
console.log(multiply2(2, 5));

const multiply3 = (x, y) => x * y;
console.log(multiply3(3, 4))

const multiply5 = x => y => z => `x: ${x} y: ${y} z: ${z}`;
console.log(multiply5(2)(5)(7));


// 위와 같은 함수 선언
function multiply6(x) {
    return function(y){
        return function(z){
            return `x: ${x} y: ${y} z: ${z}`;
        }
    }
}

// x: 2 y: 5 z: 7

함수 argument 키워드 사용

const multiplyThree = function (x, y, z) {
    console.log(arguments);
    return x * y * z;
}

console.log(multiplyThree(2, 3, 4))

무한 파라미터 받음

const multiplyAll = function (...arguments) {
    return Object.values(arguments).reduce((a, b) => a * b, 1);
}

console.log(multiplyAll(1, 2, 3, 4, 5, 6, 7, 8, 9, 10))

🧷 즉시실행 함수

(function(x,y){
    console.log(x*y);
})(4,5);

📌 Array Functions

let number = [
    'one',
    'two',
    'three',
    'four',
    'five',
    'six',
    'seven'
]

🔎 push

배열의 마지막에 새로운 값 추가
배열 직접적 변경
반환값을 추가한 길이 반환

console.log(number.push('가나다'));
console.log(number);

🔎 pop

해당 배열의 마지막 인덱스에 해당하는 값을 삭제
값 삭제 후, 해당 값 반환

console.log(number.pop());
console.log(number);

🔎 shift

배열의 첫 번째 값 반환 후, 해당 값 삭제

console.log(number.shift());
console.log(number);

🔎 unshift

배열의 첫 번째에 값 추가
배열의 길이 반환

console.log(number.unshift('one'));
console.log(number);

🔎 splice

배열의 일정부분 삭제
(삭제 시작부분, 삭제 개수)
삭제 부분 배열로 반환

console.log(number.splice(0, 3));
console.log(number);

🔎 concat()

배열 마지막 인덱스에 값 추가
원래 배열 변경X

console.log(number.concat('가나다'));
console.log(number);

🔎 slice()

배열 원하는 부분 삭제
(시작부분, 마지막 부분+1)

console.log(number.slice(0, 3));
console.log(number);

🔎 spread operator

number 배열 안에 있는 값들이 펼쳐져 number2 배열에 저장
...이 없고 배열만 넣으면 그 배열을 넣는 것

let number2 = [
    ...number
];
console.log(number2);
console.log([
    ...number,
] === number)

🔎 join()

console.log(number.join());
console.log(number.join('! '));

🔎 sort()

오름차순 정렬
원래 배열 변경됨

number.sort();
console.log(number);

a, b 비교시,
1. a를 b보다 나중에 정렬하려면(뒤에 두려면) 0보다 큰 숫자 반환
2. a를 b보다 먼저 정렬하려면(앞에 두려면) 0보다 작은 숫자 반환
3. 원래 순서를 그대로 두려면 0을 반환


let num = [
    1,
    9,
    3,
    7,
    5,
];
console.log(num);

num.sort((a, b) => {
    return a > b ? 1 : -1;
});

console.log(num);

반대로 정렬 (내림차순 정렬)

num.sort((a, b) => a > b ? -1 : +1);
console.log(num);

🔎 map()

기본 배열 변경X

console.log(number.map((x) => `num : ${x}`));

🔎 filter()

조건 만족하는 값들 찾음

numbers = [1, 2, 5, 7, 2, 8, 11];
console.log(numbers.filter((x) => x % 2 === 0))

🔎 find()

조건을 만족하는 값 찾으면 해당 값 반환 후, 그 뒤는 보지 않음

console.log(numbers.find((x) => x % 2 === 0));

🔎 findIndex()

조건을 만족하는 값 찾으면 해당 값의 인덱스반환 후, 그 뒤는 보지 않음

console.log(numbers.findIndex((x) => x % 2 === 0));

🔎 reduce()

초기값 0이 p에 입력
numbers 배열의 첫 번째 값 1이 n에 입력
p + n 실행 => 0 + 1 의 결과값 1이 반환
(3)에서의 반환값 1이 p에 입력
배열의 두 번째 값 8이 n에 입력
p + n 실행 => 1 + 8 의 결과값 9가 반환
(6)에서의 반환값 9가 p에 입력
numbers 리스트의 모든 값들을 다 순회할때까지 반복
=> 결과적으로 모든 값을 더해 25 반환

📌 객체

정의하고 싶은 것들을 성격이 비슷한 것끼리 묶는 역할

this 키워드
: 함수가 정의되어 있는 현재 객체 가리킴

let info = {
    year: '2023',
    month: '7월',
    go: function () {
        return `오늘은 ${this.year}년 ${this.month}월 입니다.`;
    }
};

console.log(info);
console.log(info.year);

const key = 'month';
console.log(info[key]);
console.log(info.go());

🔎 객체 선언시 변수 선언 방법

const yearKey = 'year';
const yearValue = '2023';

const monthKey = 'month';
const monthValue = '7월';

const info2 = {
    [yearKey]: yearValue,
    [monthKey]: monthValue,
    go: function () {
        return `${this.year}년 입니다!`
    }
};
console.log(info2);
console.log(info2.go());

값 변경

info2['month'] = '8월';
console.log(info2);

속성 추가
: 없는 키 값과 value값 입력시 추가됨

info2['day'] = '25일';
console.log(info2);

속성 삭제

delete info2['day'];
console.log(info2);

⭐⭐⭐ const로 선언시 변경 불가한데 어떻게 속성 수정/추가/삭제가 가능한가 ❓❗

📣 객체의 특성

const 로 선언시 객체 자체 변경 불가능
객체 안의 프로퍼티나 메서드는 변경 가능

const harry = {
    name: '해리포터',
    group: '그리핀도르'
}
console.log(harry);

CASE 1 - 객체 자체 변경시

harry = {};

CASE 2 - 객체 프로퍼티 및 메서드 변경시

harry['group'] = '슬리데린';
console.log(harry);

🔎 모든 key/value 가져오기

console.log(Object.keys(harry));    // 키값이 Array로 반환
console.log(Object.values(harry));  // Value값을 Array로 반환

🔎 `:` 생략

name만 쓰는 것은 name:name 과 같음
키가 string에 해당되는 것이 들어가고 value에는 name에 해당하는 변수값이 들어감

const name = '해리포터';
const harry2 = {
    name,       // => === name : name 과 같음 => 키가 string에 해당되는 값이 들어가고 value에는 name에 해당하는 변수값이 들어감
};
console.log(harry2);

📌 Copy by Value 🆚 Copy by Reference

기본적으로 모든 primitive 값은 Copy by Value
객체는 Copy by Reference
primitive ?
: object 를 제외하고 생성된 모든 다른 데이터 타입

🧷 Copy by Value

값에 의한 전달

let original = '안녕하세용';
let clone = original;

console.log(original);
console.log(clone);

clone += ' 좋은 아침입니다.'
console.log(original);
console.log(clone);

🔎 동작원리

값을 변수 originale 에 선언
original 을 clone 에 복사
변수 clone 에 글자 더함

👉 clone 은 original의 값을 복사한 것일 뿐, 실제 메모리상으로는 다른 곳이다
👉 clone 의 내용 변경시 변수 clone 이 가리키고 있는 메모리 공간만 변화됨 !

🧷 Copy by Reference

참조에 의한 전달

let originalObj = {
    name: '해리포터',
    group: '그리핀도르',
};

let cloneObj = originalObj;
console.log(originalObj);
console.log(cloneObj);

originalObj['name'] = '헤르미온느';
console.log(originalObj);
console.log(cloneObj);

console.log(original === clone);
console.log(originalObj === cloneObj);

🔎 동작원리

객체가 메모리에 할당
=> originalObj 는 다른 공간을 가리키고 있음
=> 이 공간은 실제 Object 가 존재하는 곳을 가리킴
originalObj 를 cloneObj 에 저장
=> originalObj는 값이 아닌 주소를 가리키고 있음
=> cloneObj 는 똑같이 가리키고 있는 공간을 복사
👉 공간이 가리키는 곳의 값이 변경됨

📝 QUIZ

const yuJin1 = {
    name: '안유진',
    group: '아이브',
};

const yuJin2 = yuJin1;

const yuJin3 = {
    name: '안유진',
    group: '아이브',
};

console.log(yuJin1 === yuJin2);     // True => 같은 메모리 공간을 참조했기 때문
console.log(yuJin1 === yuJin3);     // False => 값은 같지만 실제로는 다른 메모리 공간을 참조하기 때문에 다름
console.log(yuJin2 === yuJin3);     // False => 값은 같지만 실제로는 다른 메모리 공간을 참조하기 때문에 다름

🧷 Spread Operator

Object를 새로 선언했기 때문에 Copy by Value

const yuJin4 = {
    ...yuJin3
};
console.log(yuJin4);
console.log(yuJin4 === yuJin3);

const yuJin5 = {
    year: '2003',
    ...yuJin3
};
console.log(yuJin5);

spread operator 은 순서가 중요

const yuJin6 = {
    name: '가나다',
    ...yuJin3
};
console.log(yuJin6);

const yuJin7 = {
    ...yuJin3,
    name: '가나다',
};
console.log(yuJin7);

📌 에러 핸들링

try ... catch : 에러 잡는데 사용

에러 발생시킬 때 -> 던진다 (throw)
명시적으로 인지할 때 -> 잡는다 (catch)

try {
    ...
} catch {
    ...
} finally {
    ...
}

try
throw : 새로운 객체 생성. 에러를 던지는 순간 함수의 다음 코드 실행X
catch : 에러를 던지면 바로 catch 문으로 이동해 실행
finally : try 의 에러여부 상관없이 무조건 실행

function runner() {
    try {
        console.log('Hello');

        throw new Error('문제 생김');
        console.log('World');
    }
    catch (e) {
        console.log('------Catch-------')
        console.log(e);
    } finally {   
        console.log('----------finally-------------')
    }
};

runner();

📒 코드팩토리 - <9시간만에 끝내는 코드팩토리의 Javascript> https://inf.run/8E6Q

결

이전 포스트

[ JavaScript ] 자바스크립트 기초 (2)

다음 포스트

[ JavaScript ] Class and OOP

1개의 댓글

happy

2023년 7월 25일

유익한 글이었습니다.

답글 달기

[ JavaScript ] 자바스크립트 기초 (3)

JavaScript

📌 함수

🔎 return

🧷 Arrow 함수

🧷 즉시실행 함수

📌 Array Functions

🔎 push

🔎 pop

🔎 shift

🔎 unshift

🔎 splice

🔎 concat()

🔎 slice()

🔎 spread operator

🔎 join()

🔎 sort()

🔎 map()

🔎 filter()

🔎 find()

🔎 findIndex()

🔎 reduce()

📌 객체

🔎 객체 선언시 변수 선언 방법

📣 객체의 특성

🔎 모든 key/value 가져오기

🔎 : 생략

📌 Copy by Value 🆚 Copy by Reference

🧷 Copy by Value

🔎 동작원리

🧷 Copy by Reference

🔎 동작원리

📝 QUIZ

🧷 Spread Operator

📌 에러 핸들링

[ JavaScript ] 자바스크립트 기초 (2)

[ JavaScript ] Class and OOP

1개의 댓글

🔎 `:` 생략