[리액트 스터디] 1장. JS 기초

변수와 상수

✔ 변수: 변경될 수 있는 값을 저장하는 저장소
✔ 상수: 변경할 수 없는 값을 저장하는 저장소

💬 var를 이용한 변수 선언은 ES6 이전까지 사용되었었는데...
📢 var는 이름을 중복해 선언해도 실행할 수 있습니다.
👉 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있겠으나, 코드가 많아지고 복잡해질 때 혼란을 야기하고 코드의 복잡도를 높이는 까닭에 가급적 사용을 피하는 추세입니다.

let name = 1;
let name = 2; (error) name은 이미 선언되었습니다.

var age = 25;
var age = 30;

🔰 네이밍 규칙

✔ 특수문자는 _와 $ 만 허용. ($는 jQuery변수)
✔ 변수의 이름을 숫자로 시작 금지.
✔ 예약어 금지. (JS에서 사용하는 단어 혹은 명령어)
✔ 대소문자 구별.

💬 null vs undefined
📢 null : 개발자가 특정 변수에 값이 없다는걸 의도적으로 알리기 위해 사용한다.
📢 undefined : 변수를 생성하고 아무런 값도 할당하지 않거나, 존재하지 않는 객체 프로퍼티에 접근할경우 undefined가 반환된다.
👉 즉 undefined는 자바스크립트 엔진에 의해 초기화된 값으로, 개발자가 임의로 undefined를 할당하면 본래의 취지에 어긋날 뿐더러 타 개발자에게 혼란을 줄 수 있으므로 권장되지 않는다. 변수에 값이 없다는걸 명시하고 싶다면 undefined가 아니라 null을 할당한다.

📢 함수가 반환하는 null
함수가 유효한 값을 반환할 수 없는 경우에 명시적으로 null을 반환하기도 한다.
예를 들어 HTML 요소를 검색하는 document.qureySelecter 메서드는 조건부에 부합하는 HTML 요소를 검색할 수 없는 경우 에러 대신 null을 반환한다.
👉 이에 대해서는 null 보다는 undefined를 반환하는 것이 타당하다는 의견도 있다.

var element = document.querySelector('.myClass');
// HTML 문서에 myClass 클래스를 가진 요소가 없다면 null을 반환한다.
console.log(element); // null

🔰 형 변환

✔ 묵시적 형 변환: 자바스크립트 엔진이 스스로 알아서 변환.
(숫자) + (문자) = (문자)
✔ 명시적 형 변환: 내장 함수 등을 이용해 의도적으로 다른 자료형으로 변경하는 작업.
ex1) parseInt(변환하려는 문자열,진수) ※ 문자로 시작한다면 NaN을 반환
ex2) String(); Boolean();

연산자

🔰 비교 연산자

💬 == 와 === 의 차이?
📢 값을 비교하는 기능은 같지만, ===은 자료형까지 비교한다.
+) != 와 !== 도 이하동문.

let numA = 2;
let numB = 2;
let numC = '2';
console.log(numA === numB); true
console.log(numB === numC); false
console.log(numA == numC); true

🔰 null 병합 연산자

✔ ?? 을 사용하면, 값이 확정된 변수를 쉽게 찾아 낼 수 있습니다.

let varA = 10;
let varB = 20;
let varC;
console.log(varA ?? varB);
10둘다 값이 확정된 상태에선 ?? 연산자 기준 왼쪽의 값을 연산 결과로 반환합니다.
console.log(varC ?? varB);
20varC는 값을 할당하지 않아 undefined 값을 갖습니다. 때문에 이미 값이 확정된 변수인 varB의 값인 20을 연산 결과로 반환합니다.

예제) 변수 user에 해당 사용자 이름이 있다면 이름을, 이름이 없다면 닉네임을 저장하시오.

let name;
let nickname = "sun";
let user = name ?? nickname;
console.log(user);sun

🔰 삼항 조건 연산자

조건식 ? 참일 때 명령 수행 : 거짓일 때 명령 수행

조건문

🔰 switch문

✔ switch 문은 비교할 조건이 많을 때 사용하는 조건문입니다. 식이나 값을 case문과 비교해 정확히 일치할 때만 수행합니다.
✔ switch 문에서는 break문을 사용합니다. break가 없어도 오류가 발생하지는 않지만, 조건식과 일치해 실행한 case 문 이후의 명령까지 모두 차례로 수행해버립니다.

let country = "ko"

switch (country){
	case "ko": {
    	console.log("한국");
        break;
    }
    case "us": {
    	console.log("미국");
        break;
    }
    case "dk":{
    	console.log("덴마크");
        break;
    }
}

반복문

🔰 break

break문을 사용하면 조건식에서 정의한 반복문의 종료조건과 관계없이 반복을 강제로 종료할 수 있습니다.

for (let idx = 1; idx <=100; idx++){
	if(idx > 10){
    	console.log("종료");
        break;
    }
    console.log(idx);
}

ㄴ10보다 클 때 반복을 종료하므로, 1부터 10까지 숫자만 출력하게 됩니다.

🔰 continue

break문과 유사하게 동작하지만, 반복을 멈추는 대신 다음 반복 과정으로 건너뜁니다.

for(let idx = 1; idx <=10; idx++){
	if(idx % 2 === 0){
    	continue;
    }
	console.log(idx);
}

결과적으로 이 코드는 idx가 홀수일 때만 console.log(idx)를 실행하게 됩니다.

함수

🔰 함수의 인수와 매개변수

function getArea(width, height){
	let area = width * height;
    console.log(area);
}

getArea(10, 20)
① 함수를 호출하면서 소괄호 안에 두개의 값을 콤마로 구분하여 작성합니다. 👉(10, 20)
작성한 값은 호출한 함수로 전달되는데, 이 값을 '인수(argument)'라고 합니다.
② 인수로 전달된 값을 함수에서 사용할 수 있게 저장하는 변수를 '매개변수(parameter)'라고 합니다.👉(width, height)
코드에서 width는 10, height는 20이라는 값을 받습니다.

🔰 함수 표현식

자바스크립트는 함수 선언 이외에 함수 표현식을 사용하는 방법이 있습니다. 함수 표현식이란 함수를 생성하고 값으로 저장하는 방법입니다.

let greeting = function(){
	console.log("hello");
};
greeting();

💬 함수 표현식으로 만든 함수는 함수 선언으로 만든 함수와는 달리 호이스팅 되지 않습니다.

🔰 콜백함수

함수는 다른 함수의 인수(=값)으로도 전달할 수 있는데, 이를 '콜백함수'라고 합니다.

function parentFunc(callBack){
	console.log("parent");
    callBack();
}
function childFunc(){
	console.log("child");
}
parentFunc(childFunc);

🔰 화살표함수

ES6 이후 사용되는 함수표현식의 단축문법입니다.

let funcA = (매개변수) => 반환값;
아래와 동일
let funcA = function(매개변수){
return 반환값;
}

스코프

🔰 전역/지역 스코프

✔ 전역 스코프: 전역 스코프를 갖는 변수(전역 변수)를 코드 어디에서나 접근 가능.
✔ 지역 스코프: 지역 스코프를 갖는 변수(지역 변수)를 특정 영역에서만 접근 가능.
✔ 함수 내부 혹은 조건문이나 반복문 같이 블록 내부에서 선언하게되면 지역스코프를 갖는다.
+) 변수가 아닌 함수도 스코프를 갖습니다.

🔰 블록/함수 스코프

✔ 블록 스코프: JS의 변수나 함수는 { } 로 둘러쌓인 부분을 뜻하는 '블록'을 기준으로 지역 스코프가 결정됩니다. 블로 기준으로 스코프가 정해진다고 하여 '블록 스코프'라 부르고, 대다수의 언어는 변수를 선언한 블록에 따라 지역 스코프가 정해집니다.
✔ 함수 스코프: 그러나 JS의 지역 스코프는 이외에도 함수를 기준으로 지역 스코프를 정하는 '함수 스코프'가 있습니다.
✔ var로 선언한 변수는 블록 스코프를 갖는 let/const와는 달리 함수 스코프를 갖습니다.
👉 조건문 내부에서 선언해도 조건문 외부에서 접근할 수 있으며, 이는 var로 선언한 변수가 함수 스코프이기 때문에 함수 내부에서 선언한 변수만 지역 스코프를 갖습니다.
👉 이렇듯 var는 대다수 프로그래밍 언어에서는 잘 쓰지 않는 '함수 스코프'를 가지고 있어서 혼란에 빠뜨릴 여지가 많습니다. let/const를 애용합시다.

객체

객체는 숫자형이나 문자형과 같은 원시 자료형과는 달리, 다양한 값을 담는 자료형입니다.

let person = {
	name: "이정환",
    age: 25
}

1줄: key는 name, value는 "이정환"인 프로퍼티.
2줄: key는 age, value는 25인 프로퍼티.
❗ key에는 문자형만 사용하며, 중복되면 마지막 작성한 프로퍼티만 남습니다. 복수의 단어로 이루어진 key를 사용하려면 반드시 "따옴표"로 묶어줘야 합니다.

🔰 프로퍼티 추가/수정/삭제

✔ 추가/수정: 객체이름.key이름 = value내용;
(ex: person.gender = "male")
✔ 삭제: delete 객체.key;
(ex: delete cat.name)

🔰 in 연산자

객체에서 해당 프로퍼티의 존재 여부를 확인할 때 주로 사용.

let person = {
	age:10
};
let isNameExist = "name" in person;
console.log(isNameExist);  // false

배열

💬 배열 vs 객체 ?
📢 둘 다 여러 데이터를 저장할 수 있고, 저장할 데이터의 자료형에도 아무런 제약이 없지만...
📢 객체는 key가 있지만 배열에는 없다.
👉 객체는 특정 데이터에 접근할 때 key를 이용하지만, 배열은 데이터 위치인 인덱스를 이용하여 접근합니다.

let food = ["탕수육","짬뽕","군만두"]
console.log(food[0]);  // 탕수육
console.log(food[1]);  // 짬뽕
console.log(food[2]);  // 군만두

❗ 인덱스는 0부터 시작합니다.