let string = "ryzen";
let num = 9;
let bool = true;
// 숫자형으로 형 변환
console.log(Number(string)); // NaN
console.log(Number(bool)); // 1
// 문자열로 형 변환
console.log(String(num)) // 9
console.log(String(bool)) // true
// 불린형으로 형 변환
console.log(Boolean(string)) // true
console.log(Boolean(num)) // true
변수들을 형 변환해 출력한 결과
자동 형 변환
+ 연산 시 자동 형 변환
+ 연산은 문자열을 연결하는 기능이 강함
문자열 + 문자열을 제외한 데이터 타입 ⇒ 문자열로 형 변환 후 + 연산
문자열을 제외한 데이터 타입 + 문자열을 제외한 데이터 타입 ⇒ 숫자형으로 형 변환 후 + 연산
NaN과 + 연산을 하면 NaN 이 나옴
let string = "ryzen";
let num = 9;
let bool = true;
console.log(string + num); // ryzen + 9 => ryzen9
console.log(string + bool); // ryzen + true => ryzentrue
console.log(num + bool); // 9 + 1 => 10
변수들을 + 연산한 결과
let string = "ryzen";
let num = 9;
let bool = true;
console.log("NaN과 + 연산");
console.log(NaN + string); // NaN + ryzen => NaNryzen
console.log(NaN + num); // NaN + 9 => NaN
console.log(NaN + bool); // NaN + 1 => NaN
변수들을 NaN과 + 연산한 결과
let string = "ryzen";
let num = 9;
let bool = true;
console.log("undefined와 + 연산");
console.log(undefined + string); // undefined + ryzen => undefinedryzen
console.log(undefined + num); // NaN + 9 => NaN
console.log(undefined + bool); // NaN + 1 => NaN
// - 연산
let string = "ryzen";
let num = 9;
let bool = true;
console.log(string - num); // NaN - 9 => NaN
console.log(string - bool); // NaN - 1 => NaN
console.log(num - bool); // 9 - 1 => 8
변수들을 - 연산한 결과
let string = "ryzen";
let num = 9;
let bool = true;
console.log("NaN과 - 연산");
console.log(NaN - string); // NaN - NaN => NaN
console.log(NaN - num); // NaN - 9 => NaN
console.log(NaN - bool); // NaN - 1 => NaN
변수들을 NaN과 - 연산한 결과
let string = "ryzen";
let num = 9;
let bool = true;
console.log("undefined와 - 연산");
console.log(undefined - string); // NaN - NaN => NaN
console.log(undefined - num); // NaN - 9 => NaN
console.log(undefined - bool); // NaN - 1 => NaN
변수들을 undefined와 - 연산한 결과
let string = "ryzen";
let num = 9;
let bool = true;
console.log("null과 - 연산");
console.log(null - string); // 0 - NaN => NaN
console.log(null - num); // 0 - 9 => -9
console.log(null - bool); // 0 - 1 => -1
변수들을 null과 - 연산한 결과
* 연산 시 자동 형 변환
// * 연산
let string = "ryzen";
let num = 9;
let bool = true;
console.log(string * num); // NaN * 9 => NaN
console.log(string * bool); // NaN * 1 => NaN
console.log(num * bool); // 9 * 1 => 9
변수들을 * 연산한 결과
let string = "ryzen";
let num = 9;
let bool = true;
console.log("NaN과 * 연산");
console.log(NaN * string); // NaN * NaN => NaN
console.log(NaN * num); // NaN * 9 => NaN
console.log(NaN * bool); // NaN * 1 => NaN
변수들을 NaN과 * 연산한 결과
let string = "ryzen";
let num = 9;
let bool = true;
console.log("undefined와 * 연산");
console.log(undefined * string); // NaN * NaN => NaN
console.log(undefined * num); // NaN * 9 => NaN
console.log(undefined * bool); // NaN * 1 => NaN
변수들을 undefined와 * 연산한 결과
let string = "ryzen";
let num = 9;
let bool = true;
console.log("null과 * 연산");
console.log(null * string); // 0 * NaN => NaN
console.log(null * num); // 0 * 9 => 0
console.log(null * bool); // 0 * 1 => 0
변수들을 null과 * 연산한 결과
/ 연산 시 자동 형 변환
// / 연산
let string = "ryzen";
let num = 9;
let bool = true;
console.log(string / num); // NaN / 9 => NaN
console.log(string / bool); // NaN / 1 => NaN
console.log(num / bool); // 9 / 1 => 9
변수들을 / 연산한 결과
let string = "ryzen";
let num = 9;
let bool = true;
console.log("NaN과 / 연산");
console.log(NaN / string); // NaN / NaN => NaN
console.log(NaN / num); // NaN / 9 => NaN
console.log(NaN / bool); // NaN / 1 => NaN
변수들을 NaN과 / 연산한 결과
let string = "ryzen";
let num = 9;
let bool = true;
console.log("undefined와 / 연산");
console.log(undefined / string); // NaN / NaN => NaN
console.log(undefined / num); // NaN / 9 => NaN
console.log(undefined / bool); // NaN / 1 => NaN
변수들을 undefined와 / 연산한 결과
let string = "ryzen";
let num = 9;
let bool = true;
console.log("null과 / 연산");
console.log(null / string); // 0 / NaN => NaN
console.log(null / num); // 0 / 9 => 0
console.log(null / bool); // 0 / 1 => 0
변수들을 null과 / 연산한 결과
% 연산 시 자동 형 변환
// % 연산
let string = "ryzen";
let num = 9;
let bool = true;
console.log(string % num); // NaN % 9 => NaN
console.log(string % bool); // NaN % 1 => NaN
console.log(num % bool); // 9 % 1 => 0
변수들을 % 연산한 결과
let string = "ryzen";
let num = 9;
let bool = true;
console.log("NaN과 % 연산");
console.log(NaN % string); // NaN % NaN => NaN
console.log(NaN % num); // NaN % 9 => NaN
console.log(NaN % bool); // NaN % 1 => NaN
변수들을 NaN과 % 연산한 결과
let string = "ryzen";
let num = 9;
let bool = true;
console.log("undefined와 % 연산");
console.log(undefined % string); // NaN % NaN => NaN
console.log(undefined % num); // NaN % 9 => NaN
console.log(undefined % bool); // NaN % 1 => NaN
변수들을 undefined와 % 연산한 결과
let string = "ryzen";
let num = 9;
let bool = true;
console.log("null과 % 연산");
console.log(null % string); // 0 % NaN => NaN
console.log(null % num); // 0 % 9 => 0
console.log(null % bool); // 0 % 1 => 0
변수들을 null과 % 연산한 결과
** 연산 시 자동 형 변환
// % 연산
let string = "ryzen";
let num = 9;
let bool = true;
console.log(string ** num); // NaN ** 9 => NaN
console.log(string ** bool); // NaN ** 1 => NaN
console.log(num ** bool); // 9 ** 1 => 9
변수들을 ** 연산한 결과
let string = "ryzen";
let num = 9;
let bool = true;
console.log("NaN과 ** 연산");
console.log(NaN ** string); // NaN ** NaN => NaN
console.log(NaN ** num); // NaN ** 9 => NaN
console.log(NaN ** bool); // NaN ** 1 => NaN
변수들을 NaN과 ** 연산한 결과
let string = "ryzen";
let num = 9;
let bool = true;
console.log("undefined와 ** 연산");
console.log(undefined ** string); // NaN ** NaN => NaN
console.log(undefined ** num); // NaN ** 9 => NaN
console.log(undefined ** bool); // NaN ** 1 => NaN
변수들을 undefined와 ** 연산한 결과
let string = "ryzen";
let num = 9;
let bool = true;
console.log("null과 ** 연산");
console.log(null ** string); // 0 ** NaN => NaN
console.log(null ** num); // 0 ** 9 => 0
console.log(null ** bool); // 0 ** 1 => 0
// 함수 선언
function 함수이름(매개변수) {
// 함수 호출시 실행될 코드
}
// 함수 호출
함수이름(인자)
// 함수 선언
function showMessage() {
console.log("Hello");
}
// 함수 호출
showMessage();
함수 선언식으로 함수 선언 후 호출
// 함수의 호이스팅
showMessage(); // 함수 선언전에 호출
// 함수 선언
function showMessage() {
console.log("Hello");
}
함수 선언전 호출
익명 함수 (Anonymous Function)
이름이 붙어 있지 않는(함수명이 없는) 함수
호이스팅이 일어나지 않는다.
선언 후 실행하지 않으면 에러가 난다.
함수 표현식에서 사용한다.
// 익명 함수 선언
function (매개변수) {
// 함수 호출 시 실행될 코드
}
// 익명 함수 선언만 한 경우
function (name) {
console.log(name + "님 어서오세요!");
}
// 에러 메시지
Uncaught SyntaxError: Function statements require a function name
익명 함수를 선언만 할 경우
// 익명 함수 즉시 실행
(function (name) {
console.log(name + "님 어서오세요!");
})("CloudCoke");
익명 함수를 즉시 실행한 경우
함수 표현식 (Function Expressions)
호이스팅이 일어나지 않는다.
가독성이 조금 떨어진다.
// 함수 선언과 동시에 변수 선언 및 변수 초기화
const 변수이름 = function (매개변수) {
// 함수 호출시 실행될 코드
}
// 함수 호출
변수이름(인자)
const showMessage = function () {
console.log("Hi");
};
// 함수도 값이다
console.log(showMessage);
// 함수 호출
showMessage();
함수 표현식으로 함수 선언 후 호출
화살표 함수 (Arrow Function)
함수 표현식을 조금 더 간결한 문법으로 만드는 방법이다.
ES6에서 추가된 문법
// 기본적인 화살표 함수 선언
const 변수 이름 = (매개 변수) => {
// 함수 호출 시 실행될 코드
}
// 함수 호출
변수 이름(인자)
화살표 함수 문법
// 함수 표현식으로 함수 선언시
const sum = function (a, b) {
return a + b;
};
console.log(sum(1, 2));
함수 표현식으로 함수 선언 후 호출
// function 키워드 생략
const sum = (a, b) => {
return a + b;
};
console.log(sum(1,2))
화살표 함수로 함수 선언 후 호출
// 함수의 유일한 문장이 return일 때 return 및 중괄호({}) 생략
const sum = (a, b) => a + b
console.log(sum(1,2))
화살표 함수 return 생략
// 만약 매개 변수가 1개일 경우에는 ()도 생략 가능(선택 사항)
// 매개 변수가 없는 함수는 () 필요!!!
// 함수 표현식
const sum = function (a) {
return a + 1;
};
console.log(sum(1))
// 화살표 함수
const sumArrow = a => a + 1
console.log(sumArrow(1))
// 함수 선언
function 함수이름 (매개변수[Parameter]) {
// 함수가 호출되었을 때 실행할 코드
}
// 함수 호출
함수이름(인자[Argument]);
// 함수 선언 시 매개변수 초기값 지정
function 함수이름 (매개변수[Parameter] = 초기값) {
// 함수가 호출되었을 때 실행할 코드
}
// 함수 호출
함수이름(인자[Argument]);
함수 사용 이유
중복 코드를 피하기 위함
가독성을 높여줌
// 레드벨벳 멤버 이름 출력 [함수 미 사용]
let name = "주현";
console.log("이름 : " + name);
name = "슬기";
console.log("이름 : " + name);
name = "승완";
console.log("이름 : " + name);
name = "수영";
console.log("이름 : " + name);
name = "예림";
console.log("이름 : " + name);
// 레드벨벳 멤버 이름 출력 [함수 사용]
function redVelvet(name) {
console.log("이름 : " + name);
}
redVelvet("주현");
redVelvet("슬기");
redVelvet("승완");
redVelvet("수영");
redVelvet("예림");
함수 동작 원리
Call Stack : 현재 실행 중인 기능을 추적하고, 계산을 수행한다.
LIFO(Last In First Out) 방식으로 Stack에 저장된다.
function a() {
console.log("a 함수 호출");
b();
return 1;
}
function b() {
console.log("b 함수 호출");
c();
return 2;
}
function c() {
console.log("c 함수 호출");
return 3;
}
a();
함수 실행 결과1. Javascript가 실행되면 Global Execution Context(anonymous)가 생성되어 Call Stack에 추가된다.2. a 함수를 호출하면 Call Stack에 a 함수를 추가하고 a 함수 호출을 콘솔에 출력한다.3. a 함수 내부에서 b 함수를 호출한다.4. b 함수 호출하면 Call Stack에 b 함수를 추가하고 b 함수 호출을 콘솔에 출력한다.5. b 함수 내부에서 c함수를 호출한다.6. c 함수를 호출하면 Call Stack에 c 함수를 추가하고 c 함수 호출을 콘솔에 출력한다.7. return을 만나 c 함수를 종료한다.8. c 함수가 종료되어 Call Stack에서 제거되고 다시 return을 만나 b 함수를 종료한다.9. b 함수가 종료되어 Call Stack에서 제거되고 다시 return을 만나 a 함수를 종료한다.10. a 함수가 종료되어 Call Stack에서 제거되고 Global Execution Context(anonymous)만 남는다.11. 모든 실행이 완료되어 Global Execution Context(anonymous)도 Call Stack에서 제거된다.
함수의 호이스팅(Hoisting)
호이스팅(Hoisting)이란?
인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.
덕분에 함수를 호출하는 코드를 함수 선언보다 앞에 작성할 수 있다.
함수의 호이스팅(Hoisting)
showMessage();
function showMessage() {
let text = "javascript";
console.log("hello wolrd! " + text);
}
showMessage 함수 실행 결과1. Javascript가 실행되면 Global Execution Context(anonymous)가 생성되어 Call Stack에 추가된다.2. showMessage 함수가 호출되면서 Call Stack에 추가되고 showMessage 함수 내부에 있는 코드들이 실행된다.3. showMessage 함수가 종료되어 Call Stack에서 제거되고 Global Execution Context(anonymous)만 남는다.4. 모든 실행이 완료되어 Global Execution Context(anonymous)도 Call Stack에서 제거된다.
