JS 기본개념

1. 변수

JS에서 변수 선언은 선언 → 초기화→할당 단계를 거쳐서 수행된다.

• 선언 단계: 변수명을 등록하여 JS 엔진에 변수의 존재를 알린다.
• 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보, 암묵적으로 undefined를 할당하여 초기화한다.

var name = 'suyeon'
let age = 23;
const skills = ['javascript', 'react', 'react-native']

• var: 변수 선언을 한 번 더 했음에도 불구하고, 에러가 뜨지 않고 새로운 값이 출력된다. (치명적인 단점이다)

var name = 'suyeon'
console.log(name) //suyeon

var name = 'choi'
console.log(name) //choi

• let: 변수 재선언이 되지 않는다. (const도 마찬가지) 변수 재할당이 가능한 것이 특징이다. 

var name = 'suyeon'
console.log(name) //suyeon

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

• const: 변수 재선언, 재할당 모두 불가능하다. 
• 호이스팅
  • JS는 ES6에서 도입된 let,const를 포함하여 모든 선언 (var, let, const, function, function*, class)을 호이스팅한다. 
  • 변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되는 특징이다.
  • 즉, 변수 선언은 런타임 이전 단계에서 먼저 실행된다.
  • 하지만, var로 선언된 변수와 달리 let으로 선언된 변수를 선언문 이전에 참조하면 참조에러 (ReferenceError)가 발생한다. (var 변수는 선언과 초기화가 한번에 이루어지는 반면, let 변수는 선언과 초기화가 분리되어 진행된다.)

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

• 변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한해 let을 사용하는 것이 좋다. 

---

2. 함수

JS에서는 함수도 하나의 데이터 타입이다. 즉, 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정할 수도 있고, 다른 함수 내에 중첩되어 정의될 수도 있다. 

 

함수 선언(정의)

• 함수 이름
• 괄호 안에서 쉼표로 분리된 매개변수들
• 중괄호{ } 안에서 함수를 정의하는 JS 표현들

function square(number) {
	return number*number;
}

• 매개변수(number)는 값으로 함수에 전달된다. 함수가 매개변수의 값을 바꾸더라도 전역적으로나 함수를 호출하는 곳에는 반영되지 않는다.

function myFunc(theObject) {
  theObject.make = "Toyota";
}

var mycar = {make: "Honda", model: "Accord", year: 1998};
var x, y;

x = mycar.make; // x 의 값은 "Honda" 입니다.

myFunc(mycar);
y = mycar.make; // y 의 값은 "Toyota" 입니다.
                // (make 속성은 myFunc에서 변경되었습니다.)

• 위의 예처럼 변화는 함수 외부에서 확인할 수 있다. 

함수 표현식

• 함수 표현식에 의해 함수가 만들어질 수 있다. 이 같은 함수를 익명이라고 한다.

var square = function(number) = { return number*number };
var x = square(4) // x=16

• 따로 함수 이름 지정도 가능하다. 함수 내에서 자신을 참조하는데 사용되거나, 디버거 내의 스택 추적에서 함수 식별에 사용할 수 있다.

var factorial = function fac(n) { return n<2 ? 1 : n*fac(n-1) }

console.log(factorial(3));

• 함수 표현식은 다른 함수의 매개변수로 함수를 전달할 때 편리하다. 다음 예는 첫 번째 인자로 함수를, 두 번째 인자로 배열을 받는 map함수를 보여준다.

function map(f,a) {
	var result = []; // 새 배열 생성 
    var i; // 새 변수 선언 
    for (i=0; i!=a.length; i++)
    	result[i] =f(a[i]);
    return result;
}

var f = function(x) {
	return x*x*x;
}

var numbers = [0, 1, 2, 5, 10];
var cube = map(f, numbers);
console.log(cube) // [0, 1, 8, 125, 1000]

 

화살표 함수

• 화살표 함수는 ES6문법으로 function 키워드를 이용하는 것보다 간단하게 함수를 표현할 수 있다.
• 화살표 함수는 항상 익명이다.

let sum = (a,b) => a+b //화살표 함수

let sum = function(a,b) {
	return a+b;
} // 기본 방식

alert(sum(1,2)) //3

• => 왼쪽의 인수를 이용하여 => 오른쪽에 있는 표현식을 평가한다.
• 중괄호는 본문이 여러 줄로 구성되어 있을 때 사용하고, 이 때 반드시 return 지시자로 결과값을 반환해야 한다. 
• 인수가 하나 있을 때는 괄호( )가 생략 가능하고, 인수가 하나도 없을 땐 괄호를 비워 놓으면 된다. 
• 콜백함수: 어떤 이벤트나 특정 시점에 도달했을 때 시스템에서 나중에 호출하는 함수 (호출방식에 의한 구분)

var nums = [1, 4, 9];
var oddArr = numbers.filter( x => (x%2) !== 0 );
console.log(oddArr); // [1, 9]

---

3. 조건문 

• if/ else문

function Component() {
	if (true) {
    	return <p> true면 보입니다 </p>;
    }
    else {
    	return null;
    }
}

// JS에서 쓰던 if문은 컴포넌트의 return() 안, 즉 JSX 내에서는 사용 불가
// <div> if (조건) {statement} </div>

• 삼항 연산자

삼항연산자는 주로 JSX에서 사용된다.

function Component() {
	return (
    	<div>
        	{
            	1 === 1 ? <p>참</p> : null
            }
        </div>
    )
}

• && 연산자

if문을 작성할 때 "만약 이 변수가 참이면 <p></p>를 뱉고, 참이 아니면 null을 뱉자"를 작성할 때 &&를 사용하여 편리하게 작성이 가능하다. 밑 예제는 위 예제와 동일하다.

function Component() {
	return (
    	<div>
        	{ 1===1 && <p>참<p> }
        </div>
    )
}

• switch/ case문

if문을 중첩해서 여러 개 사용할 때 사용한다.

function reducer(state, 액션) {
	switch (액션.type) {
    	case '수량증가': 
        	return 수량증가된 state;
        case '수량감소':
        	return 수량감소된 state;
        default: // else문과 동일
        	return state;
    }
}

• enum

"경우에 따라 다른 HTML을 보여주고 싶은 경우"

function Component() {
	var 현재상태 = 'info';
    return (
    	<div>
        	{
            	{
                	info: <p>상품정보</p>,
                    shipping: <p>배송정보</p>,
                    refund: <p>환불정보</p>
                }[현재상태]
            }
         </div>
    )
}

• if문이 아니라 JS 오브젝트자료형에 보여주고 싶은 HTML을 전부 작성한다.
• 마지막에 object{ } 뒤에 대괄호를 붙여서 "key값이 현재상태인 자료를 뽑겠다"라고 사용하는 것이다. 

---

4. 반복문

• for문
• do...while문
• while문
• 레이블문
• break문
• continue문
• for...in문
• for...of문
• for...each문

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration

루프와 반복 - JavaScript | MDN

---

5. Array

• forEach: 배열의 각 원소별로 지정된 함수를 실행한다.

var arr = [1, 2, 3];
arr.forEach(function(value)) {
	console.log(value); // 1 2 3
});

• map: 배열의 각 원소별로 지정된 함수를 실행한 결과로 구성된 새로운 배열을 반환한다.

var arr = [1, 2, 3, 4];
var isEven = function(value) {
	return value%2 === 0; // '==='은 변수 유형과 값을 모두 비교한다.
};

var newArr = arr.map(isEven);
console.log(newArr); // [false, true, false, true]

• filter: 지정된 함수의 결과 값을 true로 만드는 원소들로만 구성된 별도의 배열을 반환한다.

var arr = [1, 2, 3, 4];
var isEven = function(value) {
	return value%2 === 0; // '==='은 변수 유형과 값을 모두 비교한다.
};

var newArr = arr.filter(isEven);
console.log(newArr); // [2, 4]

http://blog.302chanwoo.com/2017/08/javascript-array-method/

 

---

6. 템플릿 리터럴

• 내장된 표현식을 허용하는 문자열 리터럴이다. 
• 표현식/문자열 삽입, 여러 줄로 이뤄진 문자열과 문자 보간 등의 기능을 제공한다.
• 이중 따옴표, 작은 따옴표 대신 백틱(` `)을 사용한다.

---사용 X---
console.log("string text line 1\n"+
"string text line 2");
// "string text line 1
// string text line 2"

---사용 O---
console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

• 표현식을 일반 문자열에 사용할 때 사용한다.

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);
// "Fifteen is 15 and not 20."

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

Template literals - JavaScript | MDN

---