함수

함수 선언 방법 및 호출

• 매개변수[Parameter] : 함수 내부에서만 사용할 수 있는 변수
• 인자[Argument] : 함수 호출 시 매개변수에 들어갈 값

// 함수 선언
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();

함수의 호이스팅(Hoisting)

호이스팅(Hoisting)이란?

• 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.
• 덕분에 함수를 호출하는 코드를 함수 선언보다 앞에 작성할 수 있다.

함수의 호이스팅(Hoisting)

showMessage();
function showMessage() {
  let text = "javascript";
  console.log("hello wolrd! " + text);
}

return문

• 함수가 실행 중에 return문을 만나면 함수 실행을 종료한다.
• 이때 return문 옆에 작성한 값을 함수를 호출한 지점으로 반환해 준다.
• return문 뒤에 값이 없으면 undefined를 반환한다.
• 함수에서 return문을 작성하지 않아도 기본으로 들어가 있다.

function showMessage() {
  console.log("hello world! 1");
  return;
  console.log("hello world! 2");
}

console.log(showMessage()); // undefined

function showMessage() {
  return "hello world";
}

console.log(showMessage()); // hello world

참조

• https://designer-ej.tistory.com/entry/Web-Call-Stack-자바스크립트의-콜스텍
• https://developer.mozilla.org/ko/docs/Glossary/Hoisting
• https://blog.bitsrc.io/master-javascript-call-by-sharing-parameter-passing-7049d65163ed
• https://cabulous.medium.com/javascript-execution-context-part-2-call-stack-and-multiple-execution-contexts-dbe428a94190
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/return

변수

변수 선언

• 변수 선언 시 초기화

// [변수 선언 예약어] [변수명] = [값]
let num = 1;

console.log(num); // 1

• 변수 선언 후 초기화

// [변수 선언 예약어] [변수명]
// [변수명] = [값]
let num;
num = 1;

console.log(num); // 1

• 변수 선언 및 초기화 후 재 할당

let num = 1;
num = 2;

console.log(num); // 2

• 변수 선언 및 초기화 후 재 선언 [불가능]

let num = 1;
let num = 2;

Uncaught SyntaxError: Identifier 'num' has already been declared

상수

상수 선언

• 상수 선언 시 초기화

// [변수 선언 예약어] [변수명] = [값]
const num = 1;

console.log(num); // 1

• 상수 선언 후 초기화 [불가능]

// [변수 선언 예약어] [변수명]
// [변수명] = [값]
const num;
num = 1;

Uncaught SyntaxError: Missing initializer in const declaration

• 상수 선언 및 초기화 후 재 할당 [불가능]

const num = 1;
num = 2;

Uncaught TypeError: Assignment to constant variable.

• 상수 선언 및 초기화 후 재 선언 [불가능]

const num = 1;
const num = 2;

Uncaught SyntaxError: Identifier 'num' has already been declared

let과 const 사용 이유

let과 const

• let과 const는 2015년 ECS6에서 추가됨
• 그전까지는 var를 사용해왔음
• var에 문제점이 있어서 ECS6 이후부터는 let과 const 사용을 권장하고 있음

var의 문제점

1. 호이스팅(hoisting)

console.log(hoi); // undefined
var hoi;
hoi = 1;
console.log(hoi); // 1

• 호이스팅 과정
  • 자바스크립트가 코드를 위에서 아래로 순차적으로 처리하지만 실행 전에 전체적으로 코드를 검사함
  • 코드 검사가 끝나면 코드를 실행
  • 코드 검사 시 var가 초기화되어있지 않고 선언만 되어 있으면 var를 최상단으로 옮김
  • var로 선언한 변수를 undefined로 초기화해버림

2. 재 선언 가능

• 재 선언이 가능해 코드가 길어질 시 같은 변수명을 사용해도 오류가 나지 않아 문제를 발생시킬 수 있음

var num = 1;
var num = 2;

console.log(num); // 2

연산자

산술 연산자

+ - * / %

console.log(1 + 1); // 2

console.log(2 - 1); // 1

console.log(3 * 3); // 9

console.log(4 / 2); // 2

console.log(5 % 2); // 5를 2로 나눈후 나머지 값 1

대입 연산자

=
변수 선언이나 값 할당 시 사용한다.
대입 연산자 우측에 있는 값을 왼쪽에 넣는다고 볼 수 있다.

let num = 1;
const num2 = 2;

단항 산술 연산자

++ --

// 선반영
let num = 1;
console.log(++num); // 2
console.log(num); // 2

// 후반영
let num = 1;
console.log(num++); // 1
console.log(num); // 2

// 선반영
let num = 7;
console.log(--num); // 6
console.log(num); // 6

// 후반영
let num = 7;
console.log(num--); // 7
console.log(num); // 6

비교 연산자

== != < <= > >= : 값만 비교
=== !== : 값과 타입까지 비교

console.log(1 == 1); // true
console.log(1 != 1); // false
console.log(2 < 1); // false
console.log(2 <= 1); // false
console.log(2 > 1); // true
console.log(2 >= 1); // true

console.log(1 == true) // true
console.log(1 === true) // false
console.log(1 != false) // true
console.log(1 !== false) // true
console.log(0 != false) // false
console.log(0 !== false) // true

console.log(1 == "1"); // true
console.log(1 === "1") // false

논리 연산자

|| : or 연산자

// true || true => true
// true || false => true
// false || false => true
// false || false => false
let num10 = 10;
let num5 = 5;

if (num10 > 5 || num5 > 10) {
    console.log("True")
} else {
    console.log("False")
}
// True

&& : and 연산자

// true && true => true
// true && false => false
// false && true => false
// false && false => false
let num10 = 10;
let num5 = 5;

if (num10 > 5 && num5 > 10) {
    console.log("True")    
} else {
    console.log("False")
}
// False

! : not 연산자

// !(true) => false
// !(false) => true

console.log(!true); // false
console.log(!false); // true

• 인터프리터 언어이다.
• Frontend와 Backend를 같이 할 수 있는 언어이다.
• 브라우저에서 동적 요소를 프로그래밍하는 언어이다.

컴파일 언어

• 번역기가 번역을 하듯이 내가 작성한 언어를 컴파일러가 기계어로 변환을 해줌
• 100줄의 코드가 한번에 변환됨

인터프리터 언어 or 스크립트 언어

• 기계가 알아서 코드를 해석해서 결과물까지 도출해 준다
• 한줄을 실행할 때마다 변환됨

Java vs Javascirpt

• java는 객체지향 언어 ( c++)
• javascript는 prototype 언어
• python은 함수형 언어

Javascript 장점

• 타입 지정이 없음
• 처음 배우는 사람에게 좋음

Javascript 사용하는 방법

• 브라우저 자체 console 창 이용

• html 파일에서 작성

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      console.log("hello world!");
    </script>
  </head>
  <body></body>
</html>

<!-- script 부분에 작성 -->

• html 파일에서 javascript 파일 연결해서 작성

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="public/js/index.js"></script>
  </head>
  <body></body>
</html>

// index.js
console.log('Hi')