개발일기

■ JavaScript 함수

함수란 ?

: 프로그래밍에서 함수는 입력을 받아서 정해진 출력을 하는 것을 의미하며,

  함수의 입력을 파라미터(parameters) 또는 인자(arguments)라 한다.

■ JavaScript 함수를 정의하는 방법

//function statement를 사용
function sum(a, b){
	return a + b;
}

console.log(sum(10, 20));
// 출력 결과 : 30

// arrow function expression을 사용
const multiply = (a, b) => {
	return a * b;
}

console.log(multiply(10, 20));
// 출력 결과 : 200

※ fuction statement 와 arrow function expression 차이

- function statement 는 전통적이며, this, arguments 그리고 생성자 함수로서의 사용을 지원한다.

- arrow function expression은 간결한 문법을 제공하며, 렉싴러 this 바인딩을 통해 this의 값이 항상 일정하게 유지된다.

더 공부가 필요할듯..

# React의 컴포넌트 중 함수 컴포넌트가 하나의 자바스크립트 함수다!

■ JavaScript 연산자

JavaScript 자료형은 데이터를 정해준 유형으로 변수에 저장하기 위해서 사용하며,

선언된 변수를 이용해서 다양한 연산을 할 수 있다.

■ 연산자(Operator)

- 대입 연산자 (Assignment operator)

: 변수의 값을 대입하기 위해 사용하는 연산자로 equal이라 부르는 = 기호를 사용한다.

// 대입 연산자 사용 예제
let a = 10;
let b = 20;

console.log(a);
// 출력 결과 : 10

console.log(b);
// 출력 결과 : 20

■ 산술 연산자(Arithmetic operators)

- 사칙 연산자

: 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)

- 나눗셈의 나머지를 구하는 연산자(%)

- 지수 연산자(**)

// 산술 연산자 사용 예제
let a = 2;
let b = 4;

console.log(a + b);
// 출력 결과 : 6

console.log(a - b);
// 출력 결과 : -2

console.log(a * b);
// 출력 결과 : 8

console.log(a / b);
// 출력 결과 : 0.5

console.log(a % b);
// 출력 결과 : 2

console.log(a ** b);
// 츨력 겨로가 : 16

■ 산술 연산자와 대입연산자 함께 사용

let a = 2;
let b = 4;

a += b; // a = a + b
console.log(a);
// 출력 결과 : 6

a -= b; // a = a - b
console.log(a);
// 출력 결과 : 2 // 위에서 a 가 6이 되었기 때문에 6-4의 결과값인 2가 다시 a 에 대입

a *= b; // a = a * b
console.log(a);
// 출력 결과 : 8

a /= b; // a = a / b
console.log(a);
// 출력 결과 : 2

- 증가 연산자(++)

- 감소 연산자(--)

※ 영화에서 post는 뒤를 의미하고 pre는 앞을 의미하기 때문에 이렇게 기억하면 알기 쉽다!

postfix 방식으로 변수의 뒤에 증감연산자를 붙이게 되면 먼저 증감 전의 값을 반환하고 이후 변수 값이 증감된다.

prefix 방식으로 변수의 앞에 증감 연산자를 붙이게 되면 먼저 변수의 값을 증감시키고 이후 증감된 변수값을 반환한다.

let a = 1;
let b = a++;

console.log(a, b);
// 출려 결과 : 2, 1

let c = 1;
let d = ++c;

console.log(c, d);
// 출력 결과 : 2, 2

※ 사용 시 연산자를 꼭 변수에 붙여야하는 순세에 유의 필요!

■ 관계 연산자(Relational operators)

: 관계 연산자는 변수들 사이의 관계를 비교하기 위해 사용하기 때문에 비교 연산자라고도 한다.

- 비교 연산자(Comparison operators)

: 비교 연산자는 우리가 수학에서 부등호라고 부르는 것과 같은 기호를 사용한다.

  비교 연산자는 항상 왼쪽에 나온 변수를 기준으로 생각하면 쉽다.

  종류) <, >, <=, >=

let a = 1;
let b = 2;

console.log(a < b);
// 출력 결과 : true

console.log(a > b);
// 출력 결과 : false

console.log(a <= b);
// 출력 결과 : true

console.log (a >= b);
// 출력 결과 : false

- 동등 연산자(Equality operators)

: 변수의 값이 같은지 다른지를 비교하고 싶을 때 사용한다.

  종류)  ==, !=

- 일치 연산자(Strict equality operators)

: 변수의 자료형까지 같은지 엄격하게 비교할 수 있도록 일치 연산자 제용

종류) ===, !===

let a = 1;
let b = '1';

console.log(a == b);
// 출력 결과 : true

console.log (a != b);
// 출력 결과 : false

console.log(a === b);
// 출력 결과 : false

console.log(a !== b);
// 출력 결과 : true

※ 사용할 변수의 자료형이 확실치 않을 때는 일치 연산자를 사용하여 자료형까지 완전히 일치하는지 확인하는 것이 중요!

■ 이진 논리 연산자(Binary logical operators)

: 이진 논리 연산이란 true와 false 값만을 가지는 분리형 값을 비교할 때 사용하는 연산자

   그렇기 때문에 이진 논리 연산자의 결과 또한 분리형 값이 된다.

   종류) a && b, a || b

let a = true;
let b = false;

console.log(a && b);
// 출력 결과 : false

console.log(a || b);
// 출력 결과 : true

■ 조건부 연산자(Conditional operator)

: 조건부 연산자는 조건에 따라 결과가 두 개로 나눠지기 때문에 삼항 연산자라고도 불린다.

  영어로는 셋으로 이루어진다 라는 의미를 가진 형용사 ternary를 사용해서 ternary operator라고 한다.

let a = true;
let b = false;

console.log(a ? 1 : 2);
// 출력 결과 : 1

console.log(b ? 1 : 2);
// 출력 결과 : 2

■ JavaScript 간략 설명 및 자료형

사용자가 버튼을 누르거나 정보를 입력하는 등의 동적을 작업을 처리하기 위해 사용한다.

JavaScript는 프로그래밍 언어의 한 종류로 Java와는 무관하며 정식 명칭은 ECMAScript이다.

버전을 매길 때 ECMA 스크립트의 앞 글자를 따서 ES5, ES6 식으로 이름을 짓는다.

스크립트 언어의 한 종류이다.

■ 스크립트 언어의 특징

1. 프로그램이 실행되는 런타임에 코드가 해석된다.
   # C언어나 자바 같은 컴파일이라는 과정을 통해 소스 코드가 해석되고 실행 가능한 형태로 변환된다.
2. 사용 범위가 넓다
   # 모바일 앱 개발을 위한 리액트네이티브나 데이크톱용 앱 개발을 위한 일렉트론 등에서도 사용된다.

■ JavaScript의 문법

- 자료형(Data Type)

프로그래밍 언어에서 데이터를 다루기 위해 미리 정해놓은 데이터의 유형

모든 변수들은 하나의 자료형을 갖게 되며, 일반적인 프로그래밍 언어에서는 변수를 선언하는 시점에 자료형이 결정된다.

하지만 자바스크립트에서는 변수를 선언할 때가 아닌 변수의 데이터가 대입되는 시점에 해당 변수의 자료형이 결정된다.

#예시 :  Integer, Array

// Number type
let n1 = 1234;
let n2 = 5.678;

// String type
let s1 = "hello";
let s2 = 'world';

// Boolean type
let b1 = true;
let b2 = false;

// Null type
let n = null;

// Undefined type
let u1;
let y2 = undefined;

// Array type : 여러 변수를 순서대로 모아 놓은 것
let arr = [1, 2, 3, 4];

// Object type
let obj = { a : "apple", b: "banana", c: "carrot" };

// Number 타입으로만 이루어진 배열
let arr1 = [1, 2, 3, 4, 5];

// String 타입으로만 이루어진 배열
let arr2 = ["h", "e", "l", "l", "o"];

// Number 타입과 String 타입을 함께 사용한 배열
let arr3 = [1, "h", 2, "i"];

// 다양한 자료형들을 함께 사용한 배열
let arr4 = [true, 1, undefined, false, "h", 2, null, "i"];

//자바스크립트에서 객체는 키와 밸류로 이류어진 쌍의 집합을 의미한다.
// 값으로 String 타입만을 사용한 객체
let obj = { a: "apple",  b: "banana", c: "carrot" };

// 값으로 Number 타입만을 사용한 객체
let obj2 = {a: 1, b: 2, c: 2};

// 값으로 다양한 자료형들을 함께 사영한 객체
let obj3 = {a: "hello", b: 100, c: [1, 2, 3, 4] };

// 값으로 객체를 사용한 객체
let obj4 = {
	a : { a1: 1, a2: 2},
    b : { b1: 3, b2: 4},
    c : { c1: 5, c2: 7},
};

- 동적 타이핑(Dynamic Typing)

동적으로 자료형이 결정되는 것을 다이나믹 타이핑, 한글로는 동적 타이핑이라고 부르며,

자바스크립트는 동적 타이핑 방식을 사용한다.

자바스크립트는 변수를 선언할 때 다른 프로그래밍 언어처럼 변수의 자료형을 먼저 쓰지 않고

var을 사용하며, var는 변수를 의미하는 영단어인 variable을 뜻한다.

※ 변수를 선언할 때 var 외에 let을 사용하며 두 방식에는 차이점이 있다.

var 변수가 함수 외부에서 선언될 때의 범위는 전역이다.
즉, 함수 블록 외부에서 var를 사용하여 선언된 모든 변수를 윈도우상에서 사용이 가능하다.

단점 : 유연한 변수 선언으로 간단한 테스트에는 편리하나, 코드량이 많아질 경우
어디에서 어떻게 사용될지 파악하기 어렵다.

let 으로 선언된 변수는 블록 스코프를 가진다.
즉, 변수가 선언된 블록(중괄호로 둘러쌓인 영역, {})과 그 하위 블록 내에서만 사용할 수 있다.
이때, 하나의 블록은 중괄호 속에서 존재하며 중괄호 안에 있는 것은 모든 블록 범위에 해당된다.

// let 사용의 예
let x = "global";

if (x == "global"){
	let x = "block-scoped";

	console.log(x); // block-scoped
}
console.log(x); // global

# let은 변수 재할당이 가능하다.

 let name = 'bathingape'
    console.log(name) // bathingape

    let name = 'javascript'
    console.log(name) 
    // Uncaught SyntaxError: Identifier 'name' has already been declared

    name = 'react'
    console.log(name) //react

const는 일정한 상수 값을 선언하는데 사용한다.
let과 같이 const로 선언된 변수도 블록스코프 ({})를 가지므로 외부에서 접근이 불가하다.

function example() {
  if (true) {
    var x = 10; // 함수 스코프를 가지는 변수
    let y = 20; // 블록 스코프를 가지는 변수
    const z = 30; // 블록 스코프를 가지는 상수

    console.log(x); // 10
    console.log(y); // 20
    console.log(z); // 30
  }

  console.log(x); // 10
  console.log(y); // ReferenceError: y is not defined
  console.log(z); // ReferenceError: z is not defined
}

example();

# var x는 함수 스코프를 가지기 때문에 if 블록 외부에서도 접근이 가능하다.
# let y와 const z는 블록 스코프를 가지기 때문에 if 블록 외부에서는 접근할 수 없어 에러가 발생한다.

# const는 변수 재선언, 변수 재할당 모두 불가능하다.

    const name = 'bathingape'
    console.log(name) // bathingape

    const name = 'javascript'
    console.log(name) 
    // Uncaught SyntaxError: Identifier 'name' has already been declared

    name = 'react'
    console.log(name) 
    //Uncaught TypeError: Assignment to constant variable.

■ 호이스팅

호이스팅(Hoisting)이란? var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것철머 동작하는 특성이다.

자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅이라 한다.

# var로 선언된 변수와 달리 let으로 선언된 변수를 선언문 이전에 참조하면 참조 에러 발생(ReferenceError)

console.log(foo); // undefined
var foo;

console.log(bar); // Error: Uncaught ReferenceError: bar is not defined
let bar;

let 으로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대 (Temporal Dead Zone; TDZ)에 빠진다.

변수는 선언단계 > 초기화 단계 > 할당 단계 에 걸쳐 생성

#var로 선언된 변수는 선언단계와 초기화 단계가 한번에 이루어지진다.

// 스코프의 선두에서 선언 단계와 초기화 단계가 실행된다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 있다.

console.log(foo); // undefined

var foo;
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

# let으로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.

// 스코프의 선두에서 선언 단계가 실행된다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 없다.

console.log(foo); // ReferenceError: foo is not defined

let foo; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

※ 변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정하여 let을 사용하는 것이 좋다.
객체를 재할당 하는 경우는 생각보다 흔하지 않고 const를 사용하면 의도치 않은 재할당을 방지해주기 때문에 안전하다.

1. 재할당이 필요한 경우에 한정하여 let을 사용한다.
   이 때 변수의 스코프는 최대한 좁게 만든다.
2. 재할당이 필요없는 상수와 객체에는 const를 사용한다.