오늘은 typeof, 연산자, 함수, 호이스팅, 조건문, 반복문, 내장 메서드, 메서드 체이닝 같이 Javascript에서 굉장히 많이 사용하는 개념과 기능에 대해서 배웠다.
내용이 광범위했고, 제목에 없는 내용 중 조건문, 반복문 등은 이미 알고 있기에 정리하지 않으려한다.
긴가민가했던 부분에 대해서 확실하게 정리하기 위해 글을 작성했다.
1. 전위 연산자, 후위 연산자
Javascript에서 사용할 수 있는 연산자 중에 증감 연산자라는 것이 있는데, 그 중에서도 전위 연산자와 후위 연산자가 많이 헷갈려서 정리해보려고 한다.
먼저 코드를 살펴보자.
// ++: 변수 값을 1 증가
// --: 변수 값을 1 감소
let result1, result2;
let num = 10, num2 = 10;
// 후위 연산자(postfix operator): 변수값을 먼저 대입한 다음, `+1이나 -1연산`을 수행
result1 = num++;
console.log(result1, num); // 10 11
console.log(result1); // 10
// result1에 먼저 num값을 할당하고, 그 다음 num에 +1 연산을 수행
// → result1에는 +1이 계산되지 않은 num값이 할당된다.
// 전위 연산자(prefix operator): `+1이나 -1연산`을 먼저 수행하고, 그 다음에 변수에 대입
result2 = ++num2;
console.log(result2, num2); // 11 11
// num2에 먼저 +1 연산을 진행하고, result2에는 +1 연산된 num2값이 할당된다.조금 복잡해보일 수 있는데, 정리하면 다음과 같다.
1) 후위 연산자
첫 번째로 후위 연산자를 살펴볼텐데, 후위 연산자의 코드만을 뽑아보면 다음과 같다.
let result1;
let num = 10;
result1 = num++;
console.log(result1, num); // 10 11
console.log(result1); // 10
먼저 변수 result1은 선언만 하고, 후위 연산자를 확인해볼 변수인 num은 10으로 할당까지 해준다.
결과적으로 본다면 다음과 같다.
1) result1에 일단 num값인 10을 할당
2) num에 +1 연산을 수행
키워드는 일단 할당 → 연산 수행 이라고 볼 수 있다.
result1 = num++; 코드를 세분화해서 보면 다음과 같다고 할 수 있다.
1) result1 = num; // 일단 연산 전에 할당부터
2) num = num + 1; // 그 다음, 연산 수행
2) 전위 연산자
전위 연산자 부분의 코드만 확인해보자
let result2;
let num2 = 10;
result2 = ++num2;
console.log(result2, num2); // 11 11
후위 연산자랑 다르게 result2, num2값이 모두 11인 것을 확인할 수 있다.
사실상 후위 연산자랑 반대라고 생각하면 된다.
먼저 num2 +1 이라는 연산을 하고, +1 연산하여 11이라는 값이 된 num2를 result2에 할당하는 것이다.
결과적으로 본다면 다음과 같다.
1) num2에 +1 연산을 수행 → 11이 됨
2) result2에 연산이 되어 11이라는 값이 된 num2값을 할당
키워드는 후위 연산자랑은 반대인 연산 수행 → 연산 결과 할당 이라고 볼 수 있다.
result2 = ++num2; 코드를 세분화해서 보면 다음과 같다고 할 수 있다.
1) num2 = num2 + 1; // 먼저 11이 됨
2) result2 = num2; // 11을 result2에 할당
2. 함수 선언 방식
함수에 대한 전반적인 내용보다 Javascript에서 사용할 수 있는 함수 선언 방식에 대해 파헤쳐볼 예정이다.
Javascript에서 함수 선언 방식은 3가지가 존재한다.
- 함수 선언문(명시적 함수 선언)
- 함수 표현식
- 화살표 함수
따로 설명할 필요없이 코드로 보면 매우 쉽게 구분할 수 있다. (다만, 문법이 조금 난해할 수 있으므로 자세하게 봐야한다.)
// [함수 선언 방식]
// 1) 명시적 함수 선언(함수 선언문)
function helloWorld() {
console.log('Hello World! 1');
}
helloWorld(); // Hello World! 1
function helloWorld2() {
return 'Hello World! 2';
}
// return (반환값)
// : 함수 내부(body, block) 코드의 "최종 결과값"
// 최종 결과값을 저장하고 보관하기위한 키워드
// return 키워드를 만나면 함수 실행 중단 (return 다음에 코드 더 작성 의미 x)
console.log(helloWorld2()); // Hello World! 2
// 2) 함수 표현식
// - 함수를 변수에 저장하는 형태
const helloWorld3 = function () {
console.log('Hello World! 3');
};
const helloWorld4 = function () {
return 'Hello World! 4';
};
helloWorld3(); // Hello World! 3
console.log(helloWorld4()); // Hello World! 4
helloWorld3();
helloWorld3();
helloWorld3();
helloWorld3();
// => 함수는 "여러 번" 호출 가능!!!!!
// 3) 화살표 함수(arrow function)
// - 함수 선언 문법이 간결해짐
const myFunc1 = (x) => x;
// 아래 함수를 화살표 함수로 바꾼 것임
// function myFunc1(x){
// return x;
// }
const mySum = (x, y) => x + y;
console.log(mySum(5, 2)); // 7
// ※ return을 생략할 수 있지만, body({...}) 내에서 return 구문만 있을 때 생략이 가능
// 코드가 길어지면 return 명시해줘야함
const myMulti = (a, b) => {
let result = a * b;
return result;
};
console.log(myMulti(1, 2)); // 2
// const myMulti = (a, b) => let result = a * b; return result;
// → body내에 return 구문만 있는 것이 아니므로 위 코드는 에러 발생
코드를 조금 간추려서 설명하자면 다음과 같다.
인자 2개를 받아서 +연산을 한 함수를 만든다고 가정하고 진행하겠다.
1) 함수 선언문 (명시적 함수 선언)
// 1) 함수 선언문
// 함수 정의
function add(x, y){
return x + y;
}
add(1, 2); // 3function이라는 키워드를 사용해서 평범(?)하게 만든 기초적인 함수 선언 방법이라고 할 수 있다.
명시적 함수 선언이라는 말은 function이라는 키워드를 사용해서 단독적으로 존재하는 함수라서 이름이 붙여진 것이 아닐까 추리해봤다.
2) 함수 표현식
// 2) 함수 표현식
// 함수 정의
const add = function(x, y){
return x + y;
}
add(1, 2); // 3function이라는 키워드를 사용하는 것은 함수 선언문과 동일하지만, 변수에 할당해서 사용한다는 점이 다르다.
그 외엔 함수 선언문과 모두 같다.
3) 화살표 함수
// 3) 화살표 함수
// 함수 정의
const add = (x, y) => {
return x + y;
}
add(1, 2); // 3
// 함수에 return구문만 존재하는 경우, 아래 처럼 사용할 수도 있다.
const add = (x, y) => x + y;
add(1, 2); // 3
// 그리고 받아오는 인자가 1개일 경우, 괄호도 생략할 수 있다.
// 인자로 전달한 값을 거듭제곱하여 리턴
const square = x => x**x;
square(2); // 4Java와 Python을 할 때는 볼 수 없었던 신기한 방법이라 적응하는데 시간이 엄청 오래 걸린 함수 선언 방식이다.
중간에 => 이런 화살표를 사용한다고 해서 화살표 함수라고 불리는 듯 하다.