[JavaScript 기초] 자료형 / 함수 선언

강의명 : 제임스코딩 풀스택 개발 입문 5주 완성 - 섹션 5. JavaScript 기초

1. undefined vs null

2. 함수 선언

3. 호이스팅 (hoisting)

4. 함수 생성 실습

 

강의명 : 한입 크기로 잘라 먹는 리액트(React.js) - 섹션 1. JavaScript 기본

1. 명시적 형변환

2. Null 변환 연산자

 

---

 

1. undefined vs null

- undefined : 아직 값이 할당되지 않은 상태
- null : 의도적으로 값이 없음을 나타내는 경우 사용

let a;
console.log(a);

let b = null;
console.log(b);

console.log(null === undefined);

 

 

 

 

2. 함수 선언

- 함수 선언식 / 함수 표현식 / 화살표 함수 (2가지 형태)

//함수 선언식
function plus(a,b) {
    return a+b;
}

//함수 표현식
const plus2 = function(a,b){
    return a+b;
}

//화살표 함수
const plus3 = (a,b) => {
    return a+b;
}
const plus4 = (a,b) => a+b;


console.log(plus(1,2));
console.log(plus2(1,2));
console.log(plus3(1,2));
console.log(plus4(1,2));

 

 

- 함수 파라미터 전달

## default argumetation
function fn(x = "default 값") {
	return x;
}
console.log(fn()); // default 값


## 더 많은 파라미터가 전달 -> 뒷 부분 무시
function minus(x, y) {
	return x - y;
}
minus(5,4,2); // 1


## 더 적은 파라미터가 전달 -> 뒷 부분 'undefined'로
function fn(x, y) {
    return `${x},${y}`;
}
console.log(fn(1)); // '1,undefined'

 

 

 

 

3. 호이스팅 (hoisting) 

(MDN) 호이스팅 : interpreter가 코드를 실행하기 전 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상

 

: JVM은 코드를 실행하기 전, 소스코드를 평가하며 소스코드 실행을 위해 필요한 변수와 함수의 메모리 공간을 사전에 확보하는 평가 과정인 호이스팅을 진행한다.

 

- 변수의 호이스팅

• var 키워드 변수 : 호이스팅 과정에서 undefined 로 값이 초기화되기 때문에 변수 선언 코드를 실행하기 전에도 해당 변수에 접근할 수 있다.
• let, const 키워드 변수 : 호이스팅 과정에서 값의 초기화가 발생하지 않기 때문에 변수 선언 코드를 실행하기 전까지는 해당 변수에 접근할 수 없다. (호이스팅 과정에서 변수의 메모리 확보만 진행되고 어떤 값도 할당되지 않은 상태)

 

- 함수의 호이스팅

• 함수 선언식으로 정의된 함수 : 호이스팅 과정에서 선언문이 실행되고 생성되기 때문에 함수 선언 코드를 실행하기 전에도 해당 함수를 호출할 수 있다. (호이스팅이 적용)
• 함수 표현식으로 정의된 함수 : 변수 호이스팅의 방식으로 호이스팅되기 때문에 표현식 이전 위치에서 함수를 호출할 수 없다. (호이스팅이 적용되지 않음)

 

 

 

4. 함수 생성 실습

: 사용자로부터 숫자를 입력받아 약수를 String 형태로 출력하는 함수 만들기

 

- JS에서 변수 선언은 'let', 'const', 'var' 3가지

- JS에서 '==='가 값과 type을 모두 비교하는 연산자 ('=='는 값만 비교)

- promt 함수 : html에 팝업창을 생성해서 사용자 입력값을 받아내는 함수

## 함수 선언식
function factor(n) {
    let result = "";
    for(let i=1; i<=n; i++){
        if(n%i === 0){
            result += i + " ";
        }
    }
    return result.slice(0,-1);
}

let input = prompt("숫자를 입력하세요");
console.log(factor(input));

 

 

 

---

 

1. 명시적 형변환

① String Type으로 형변환

- String() 함수 : null 과 undefined 타입 변수에도 사용 가능

- toString() method : null 과 undefined 타입 변수에서 사용 불가

                                 number.toString(radix) 형태로 사용해 숫자를 원하는 진수 표현에 맞춰 변환 가능

String(20);	//'20'
String(true);	//'true'

const a = 20;
a.toString()	  //'20'
a.toString(2)	 //'10010', 2진수 표현으로

let b;
String(b);	//'undefined'
b.toString();	//에러 발생, undefined 타입에 적용 불가능

 

② Number Type으로 형변환

- Number() 함수 : 정수 혹은 실수 타입으로 변환 (인자에서 숫자만 뽑아서 변환)

- parseInt() 함수 : 정수 타입으로 변환, 원하는 진수 표현에 맞춰 변환 가능

console.log(Number("10"));		//10
console.log(Number("10.5"));		//10.5

console.log(parseInt(10.5));		//10
console.log(parseInt(0o10));		//8
console.log(parseInt("10"));		//10
console.log(parseInt("10.5"));		//10
console.log(parseFloat("10.5"));	//10.5

//참고 : 숫자 외에 다른 문자가 포함된 String을 입력받는 경우
console.log(Number("10개"));		//NaN
console.log(parseInt("10개"));		//10
console.log(Number("총 10개"));		//NaN
console.log(parseInt("총 10개"));	//NaN

 

 

 

2. Null 변환 연산자

(좌 피연산자) ?? (우 피연산자)

 

- 좌우 피연산자 중 null이나 undefined이 아닌 값을 선택

- 왼쪽 피연산자를 먼저 평가, null이나 undefined가 아니면 오른쪽 피연산자를 평가하지 않고 왼쪽 피연사자를 리턴

- 왼쪽 피연산자가 null 이나 undefined이면, 오른쪽 피연산자를 리턴

let a = null;	// a는 null
let b;		// b는 undefined

console.log(a ?? b);
console.log(b ?? a);
console.log(10 ?? b);
console.log(a ?? 10);