📚 공부한 내용

객체의 생성 방법

생성자 함수와 리터럴의 차이

// 객체 생성자 함수
let user = new Object();
// 객체 리터널 
let user = {};

• 프로퍼티 추가

let user = {
  name : '홍길동',
  age : 20
}
user.tel = '010-1234-1234';

• 프로퍼티 수정

let user = {
  name : '홍길동',
  age : 20,
  tel : '010-1234-1234'
}
user.tel = '010-4321-4321';

• 프로퍼티 조회

let user = {
  name : '홍길동',
  age : 20,
  tel : '010-4321-4321'
}
console.log(user.name);  // 홍길동

• 프로퍼티 삭제

let user = {
  name : '홍길동',
  age : 20,
  tel : '010-4321-4321'
}
delete user.tel;

배열의 생성 방법

// 배열 리터럴
const a = [1,2,3];
const b = [4,5,6];
const c = [...a,...b];
// 배열 생성자 함수, length 값을 인수로 전달받아 해당 길이의 배열을 생성
// 인수가 전달되지 않았을 때는 length가 0인 빈 배열을 생성, new Array(0)는 []과 동일하다.
const d = new Array();

• 배열 값 조회

console.log(a[1]);  // 2

• 배열 값 추가, 삭제, 수정은 배열 함수를 이용한다.

함수의 생성 방법

const f = new 붕어빵틀(); 클래스 생성.
그럼 함수는 생성자 함수가 없는가?
생성자 함수

함수와 클래스

function 붕어빵틀(재료) {
  return 재료 + '붕어빵';
}
const 팥붕어빵 = 붕어빵틀('팥');
const 슈크림붕어빵 = 붕어빵틀('슈크림');
console.log(팥붕어빵, 슈크림붕어빵);

형변환

함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환됩니다. 이런 과정을 "형 변환(type conversion)"이라고 합니다.

전달받은 값을 의도를 갖고 원하는 타입으로 변환(명시적 변환)해 주는 경우도 형 변환이라 한다.

문자형으로 변환

• String(value) 혹은 숫자.toString(16진수) 함수를 호출해 전달받은 값을 문자열로 변환 할 수도 있다.

let value = true;
console.log(typeof value); // boolean

value = String(value); // 변수 value엔 문자열 "true"가 저장된다. 
console.log(typeof value); // string

암시적 형 변환

let num = 123;

console.log(num + "");
console.log(`${number}`)

숫자형으로 변환

• Number(value) 함수를 사용하면 주어진 값(value)을 숫자형으로 명시해서 변환할 수 있다.

let str = "123";
console.log(typeof str); // string

let num = Number(str); // 문자열 "123"이 숫자 123으로 변화된다.

console.log(typeof num); // number

• 숫자 이외의 글자가 들어가 있는 문자열을 숫자형으로 변환하려고 하면, 그 결과는 NaN이다.

let age = Number("30살입니다.");

console.log(age); // NaN, 형 변환이 실패한다.

• 형변환 규칙

전달받은 값	형 변환 후
undefined	NaN
null	0
true and false	1 과 0
string	문자열의 처음과 끝 공백이 제거되고, 공백 제거 후 남아있는 문자열이 없다면 0, 그렇지 않다면 문자열에서 숫자로 변환한다. 변환에 실패하면 NaN이 된다.

• 문자 기반 폼(form)을 통해 입력받는 경우, 숫자형으로 형 변환이 필요하다.

암시적 형 변환

let str = "123";

console.log(+str);		// 123
console.log(str * 1);	// 123
console.log(str / 1);	// 123

불린형으로 변환

• 논리 연산을 수행할 때 발생하는데, Boolean(value)를 호출하면 명시적으로 불리언으로의 형 변환할 수 있다.
  • Falsy: 숫자 0, 빈 문자열, null, undefined, NaN과 같이 직관적으로도 “비어있다고” 느껴지는 값들은 false가 됩니다.
  • Truthy: 그 외의 값은 true로 변환됩니다.

console.log( Boolean(1) ); 		 // 숫자 1(true)
console.log( Boolean(0) ); 		 // 숫자 0(false)
console.log( Boolean("hello") ); // 문자열(true)
console.log( Boolean("") ); 	 // 빈 문자열(false)
console.log(Boolean("0")); // 문자형 "0"은 true지만, 숫자형 0은 false이다. 
console.log(Boolean(" ")); // 공백이 있는 문자열도 비어있지 않은 문자열이기 때문에 true로 변환됩니다. .trim 함수를 통해 공백을 제거할 수 있다.

암시적 형 변환

!!0	// false
!!1 // true

객체를 원시형으로 변환

numeric string

let width = '105.3px';
let height = '300px';
console.log(Number(width));
console.log(window.parseFloat(width, 10), parseFloat(width, 10));	// 실수. 숫자를 해석하다 문자를 만나면 해석을 중지한다. 따라서 문자뒤에오는 숫자는 읽을 수 없다. 두 번째 인자인 진수를 표시 해줍시다.
console.log(window.parseInt(width, 10), parseInt(width, 10));		// 정수. 숫자를 해석하다 문자를 만나면 해석을 중지한다. 따라서 문자뒤에오는 숫자는 읽을 수 없다. 두 번째 인자인 진수를 표시 해줍시다.

연산자

• 피연산자(operand) 는 연산자가 연산을 수행하는 대상
  • '피연산자’는 '인수(argument)'라는 용어로 불리기도한다.
• 피연산자를 하나만 받는 연산자는 단항(unary) 연산자라고 한다.
• 두 개의 피연산자를 받는 연산자는 이항(binary) 연산자라고 한다.

let x = 1;
let y = 3;
let z = 2;
x = -x;
console.log( x ); // -1, 단항 마이너스 연산자는 부호를 뒤집는다.

console.log( y - z ); // 1, 이항 마이너스 연산자는 뺄셈을 한다.

• 덧셈 연산자 +
  • 이항 연산자 +의 피연산자로 문자열이 전달되면 덧셈 연산자는 덧셈이 아닌 문자열을 병합(연결) 연산자가 된다.
  • console.log((2 + 2 + '1' ); // '221'이 아니라 '41'이 출력된다.
2 + 2가 먼저 실행되고 결과값인 4가 + '1' 문자열 연결 연산자 실행이 되기 때문이다.
  • 또한 문자형을 숫자형으로 변경하는 Number()와 같은 역할을 하기도 한다.

let num1 = "1";
let num2 = "2";

// 이항 덧셈 연산자가 적용되기 전에, 두 피연산자는 숫자형으로 형변환 한다. 
// 따라서 "12"가 아닌 3이 출력된다.
console.log( +num1 + +num2 ); // 3

• 뺄셈 연산자 -
• 곱셈 연산자 *
• 나눗셈 연산자 /
• 나머지 연산자 %
• 거듭제곱 연산자 **

연산자 우선순위

하나의 표현식에 둘 이상의 연산자가 있는 경우, 실행 순서는 연산자의 우선순위(precedence) 에 의해 결정 된다.

괄호는 모든 연산자보다 우선순위가 높기 때문에 자바스크립트에서 정의한 연산자 우선순위를 무력화시킨다.

우선순위 숫자가 클수록 먼저 실행되고, 순위가 같으면 왼쪽부터 시작해서 오른쪽으로 연산이 수행된다.

동일한 기호의 단항 연산자는 이항 연산자보다 우선순위가 더 높다.

할당 연산자

할당 연산자=는 우선순위가 3으로 아주 낮기 때문에
x = 2 * 2 + 1과 같은 표현식에서 계산이 먼저 이뤄지고, 그 결과가 x에 할당된다.

값을 반환하는 할당 연산자

자바스크립트에서 대부분의 연산자들은 값을 반환한다.
+와 -뿐만 아니라 = 역시 값을 반환한다.
x = value을 호출하면 value가 x에 쓰여지고, 이에 더하여 value가 반환된다.

let a = 1;
let b = 2;

let c = 3 - (a = b + 1);  

// 1. b(2)가 1과 덧셈 연산자로 덧셈
// 2. a에 결과값 3이 할당됨, 할당되는 순간 결과값 3이 반환
// 3. 3 - 3이 실행되고 결과값 0이 c에 할당된다.

할당 연산자 체이닝

할당 연산자는 여러 개를 연결할 수도 있다.

let a, b, c;

a = b = c = 2 + 2;

// 가독성을 위해 아래와 같이 작성을 권장한다.
c = 2 + 2;
b = c;
a = c;

복합 할당 연산자

let n = 2;
n = n + 5;
n = n * 2;
console.log( n ); // 14

// 위의 코드를 아래와 같이 변경할 수 있다.

let n = 2;
n += 5; // n은 7(n = n + 5와 동일)
n *= 2; // n은 1(n = n * 2와 동일)

console.log( n ); // 14

복합 할당 연산자는 산술 연산자와 비트 연산자에도 적용할 수 있습니다. /=, -= 등...

let n = 2;

n *= 3 + 5;

// 복합 할당 연산자의 우선순위는 할당 연산자와 동일때문에
console.log( n ); // 16  (*=의 우측이 먼저 평가되므로, 위 식은 n *= 8과 동일하다.)

증가/감소 연산자

• 증가(increment) 연산자 ++: 변수를 1 증가시킨다.

• 감소(decrement) 연산자 --: 변수를 1 감소시킨다.

증가·감소 연산자는 변수에만 쓸 수 있습니다. 10++와 같이 값에 사용하려고 하면 에러가 발생한다.

• ++와 -- 연산자는 변수 앞이나 뒤에 올 수 있습니다.
  • counter++와 같이 피연산자 뒤에 올 때는, '후위형(postfix form)'이라고 부른다.
  • ++counter와 같이 피연산자 앞에 올 때는, '전위형(prefix form)'이라고 부른다.
  • 피연산자인 counter를 1만큼 증가시켜 준다는 점에서 동일하지만
    전위형은 증가·감소 후의 새로운 값을 반환하는 반면, 후위형은 증가·감소 전의 기존 값을 반환한다.

let count = 0;
let a = count++;

console.log(a);		 // 0
console.log(count);  // 1, count 값은 증가되어있다.

따라서
값을 증가시키고 난 후, 증가한 값을 바로 사용하려면 전위형 증가 연산자를 사용하고
값을 증가시키지만, 증가 전의 기존값을 사용하려면 후위형 증가 연산자를 사용하자.

비트 연산자

쉼표 연산자

let a = (1 + 2, 3 + 4);

//  첫번째 표현식 1 + 2은 평가가 되지만 그 결과는 버려지고, 3 + 4만 평가되어 a에 할당된다.
console.log( a ); // 7 (3 + 4의 결과)

• for문에서 주로 사용한다.

// 한 줄에서 세 개의 연산이 수행됨
for (a = 1, b = 3, c = a * b; a < 10; a++) {
 ...
}

비교 연산자

• 보다 큼·작음: a > b, a < b
• 보다 크거나·작거나 같음: a >= b, a <= b
• 같음(동등): a == b. 등호 =가 두 개 연달아 오는 것에 유의하세요. a ​​= b와 같이 등호가 하나일 때는 할당을 의미합니다.
• 같지 않음(부등): 같지 않음을 나타내는 수학 기호 ≠는 자바스크립트에선 a != b로 나타냅니다. 할당연산자 = 앞에 느낌표 !를 붙여서 표시합니다.

불린형 반환

비교 연산자 역시 값을 반환한다. 반환 값은 불린형이다.

true가 반환되면, ‘긍정’, ‘참’, '사실’을 의미합니다.
false가 반환되면, ‘부정’, ‘거짓’, '사실이 아님’을 의미합니다.

let result = 5 > 4; // 비교 결과를 변수에 할당
console.log( result ); // true

문자열 비교

'사전' 순으로 문자열을 비교
console.log( 'Z' > 'A' ); // true

• 비교 알고리즘

1. 두 문자열의 첫 글자를 비교합니다.
2. 첫 번째 문자열의 첫 글자가 다른 문자열의 첫 글자보다 크면(작으면), 첫 번째 문자열이 두 번째 문자열보다 크다고(작다고) 결론 내고 비교를 종료합니다.
3. 두 문자열의 첫 글자가 같으면 두 번째 글자를 같은 방식으로 비교합니다.
4. 글자 간 비교가 끝날 때까지 이 과정을 반복합니다.
5. 비교가 종료되었고 문자열의 길이도 같다면 두 문자열은 동일하다고 결론 냅니다. 비교가 종료되었지만 두 문자열의 길이가 다르면 길이가 긴 문자열이 더 크다고 결론 냅니다

정확히는 사전 순이 아니라 유니코드 순입니다.
따라서 A보다 a가 크다

다른 형을 가진 값 간의 비교

비교하려는 값의 자료형이 다르면 자바스크립트는 이 값들을 숫자형으로 바꾼다.

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

동등 연산자

동등 연산자(equality operator) ==은 0과 false를 구별하지 못합니다.
console.log( 0 == false ); // true

일치 연산자

일치 연산자(strict equality operator) ===를 사용하면 형 변환 없이 값을 비교할 수 있습니다.
일치 연산자는 엄격한(strict) 동등 연산자입니다. 자료형의 동등 여부까지 검사
console.log( 0 === false ); // false

‘불일치’ 연산자 !==는 부등 연산자 !=의 엄격한 버전

null이나 undefined와 비교하기

동등 연산자 ==를 사용하여 null과 undefined를 비교

동등 연산자를 사용해 null과 undefined를 비교하면 특별한 규칙이 적용돼 true가 반환
console.log( null == undefined ); // true

일치 연산자 ===를 사용하여 null과 undefined를 비교

두 값의 자료형이 다르기 때문에 일치 비교 시 거짓이 반환됩니다.
console.log( null === undefined ); // false

null vs 0

console.log( null > 0 ); // (1) false
console.log( null == 0 ); // (2) false
console.log( null >= 0 ); // (3) true

(3)에서 null은 0보다 크거나 같다고 했기 때문에, (1)이나 (2) 중 하나는 참이어야 하는데 둘 다 거짓을 반환

동등 연산자 ==와 기타 비교 연산자 <, >, <=, >=의 동작 방식이 다르기 때문입니다. (1)에서 null > 0이 거짓을, (3)에서 null >= 0이 참을 반환하는 이유는 (기타 비교 연산자의 동작 원리에 따라) null이 숫자형으로 변환돼 0이 되기 때문입니다.

그런데 동등 연산자 ==는 피연산자가 undefined나 null일 때 형 변환을 하지 않습니다. undefined와 null을 비교하는 경우에만 true를 반환하고, 그 이외의 경우(null이나 undefined를 다른 값과 비교할 때)는 무조건 false를 반환합니다. 이런 이유 때문에 (2)는 거짓을 반환합니다.

비교가 불가능한 undefined

undefined를 다른 값과 비교해서는 안 됩니다.

console.log( undefined > 0 ); // false (1)
console.log( undefined < 0 ); // false (2)
console.log( undefined == 0 ); // false (3)

(1)과(2)에선 undefined가 NaN으로 변환되는데(숫자형으로의 변환), NaN이 피연산자인 경우 비교 연산자는 항상 false를 반환합니다.
undefined는 null이나 undefined와 같고, 그 이외의 값과는 같지 않기 때문에 (3)은 false를 반환합니다.