JavaScript for React 1

-  변수 선언하기  

 

- const

var pizza = true;
pizza = false;
console.log(pizza); // false

위의 코드는 선언된 변수 pizza가 재선언이 되는 경우다. 변경되지 않는 변수는 const로 선언하면 변경되지 않는다.

const pizza = true;

- let 

var topic = "자바스크립트";
if (topic) {
    var topic = "리액트";
    console.log('블록', topic) // 블록 리액트
}

console.log('글로브', topic); // 글로벌 리액트

topic의 재선언을 했을 때, if 블록 밖에서도 변경됨.

var topic = "자바스크립트";
if (topic) {
    let topic = "리액트";
    console.log('블록', topic) // 블록 리액트
}

console.log('글로브', topic); // 글로벌 리액트

 

if 블록 안에서만 변경된다. → 구문적인 변수 영역 규칙  

---

- 템플릿 문자열

: 백틱(`)을 사용한 문자열로 연결 대신 사용할 수 있고, 중간에 변수를 삽입("${}")할 수도 있다.  

 

console.log(lastName+ ","+firstName + " " + middleName);

console.log(`${lastName} , ${firstName} ${middleName}`);

위의 2개의 코드는 같은 값을 출력한다.  

---

- 함수

함수 선언 방식으로는 크게 2가지가 있다.

함수 선언, 함수 표현식

 

- 함수 선언  

function logCompliment() {
    console.log("함수 선언식");
};

logCompliment();

- 함수 표현식

const logCompliment2 = function() {
    console.log("함수 표현식");
};
logCompliment2();

차이점으로는 함수 선언은 호이스팅(호출 후 선언)이 가능하지만, 표현식은 에러가 난다.  

 

- 인수 넘기기

const logCompliment = function(one,two) {
    console.log(`${one}: ${two}`);
};
logCompliment2("이창민", "LeeChangMin");

- default parameter  

function logActivity(name="오성원", activity="테니스") {
	console.log(`${name}은 ${activity}를 좋아합니다.`);
}

const defaultPerson = {
	name: {
    	first: "성원",
        last: "오"
	},
    favActivity: "테니스"
};

function logActivity(p=defaultPerson) {
	console.log(`${p.name.first}은 ${p.favActivity}를 좋아합니다.);
}

- Arrow Functions

함수 표현식으로 선언시 기본적인 형태

const FUNC = function(parameter) {
	return `${parameter}`;
}

이때, 함수 표현의 function을 생략할 수 있다.

const FUNC = (parameter) => {
	return `${parameter}`;
}

만약 코드가 한줄인 경우, return과 괄호를 생략해서 다음과 같이 표현 가능 하다.

const FUNC = (parameter) => `${parameter}`;

 

- 객체 반환

기본적으로 Js에서 함수는 중괄호로 표현하지만, 객체를 반환하는 경우는 소괄호로 둘러야 한다.

const person = (firstName, lastName) => ({
	first: firstName,
    last: lastName
});

console.log(person("현석","오"));

- 화살표 함수와 영역

일반 함수는 this를 새로 바인딩한다.

const A = {
    lst: ['짜장밥','간장계란밥'],
    print: function(delay=1000) {
        setTimeout(function() {
            console.log(this.lst.join(","));
        }, delay);
    }
}
A.print();

위의 코드에서 this는 A가 아닌 window 객체이다.

A를 가리키기 위해, this를 사용한 함수를 Arrow function으로 선언해주면 된다.

const A = {
    lst: ['짜장밥','간장계란밥'],
    print: function(delay=1000) {
        setTimeout(()=> {
            console.log(this.lst.join(","));
        }, delay);
    }
}
A.print();

이때, print함수를 arrow func로 선언시, this는 window를 가리킨다.