[JavaScript] 기본

출처 : 한 입 크기로 잘라먹는 리액트

변수와 상수

// 1. 변수
let nmae;

// 2. 상수
const name;

 

변수 명명 규칙(네이밍 규칙)

1. $, _ 제외한 기호는 사용할 수 없음.
2. 숫자로 시작할 수 없음.
3. 예약어를 사용할 수 없음.

 

변수 명명 가이드

1. 변수명은 다른 사람도 알아보기 쉽도록 명명한다.

안좋은 예

let a = 1;
let b = 1;
let c = a - 1;

 

좋은 예

let salesCount = 1;
let refundCount = 1;
let totalSalesCount = salesCount - refundCount;

 

 

---

 

자료형(타입)

자료형(Type) = 집합

 

 

원시타입

• 기본형 타입이라고도 불림
• 프로그래밍에 있어 가장 기본적인 값들의 타입을 의미함
• 동시에 한개의 값만 변수에 저장될 수 있음

Number Type

• 숫자
• 사칙연산
• 연산이 실패했을때 나타나는 값 NaN

String Type

• 문자열
• 덧셈 연산

let myName = "KUN";
let myLocation = "서울";
let introduce = myName + myLocation;

// 템플릿 리터럴 문법
let introductText = `${myName}은 ${myLocation}에 거주합니다`;

 

Bollean Type

• true & flase
• 참이나 거짓을 반환
• 상태를 의미

 

Null Type

• 변수에 아무것도 들어있지 않을 때

let empty = null;

 

Undefined Type

• 변수를 선언하고 아무런 값을 할당하지 않았을 때 자동으로 들어가는 값
• Null과의 차이점 : null은 직접 명시적으로 직접 값에 할당을 해줘야함. undefined 미처 초기화하지 못했거나 아니면 존재하지 않는 어떠한 값을 불러오려고할 때 발생함.

let none;
console.log(none);

//콘솔에 undefined가 찍힘

 

 

---

형 변환 (Type Casting)

어떤 값의 타입을 다른 타입으로 변경하는 것을 말함

묵시적 형 변환(암묵적 형변환)

개발자가 직접 설정하지 않아도 알아서 자바스크립트 엔진이 형 변환 하는 것을 말함

let num = 10;
let str = "20";

const result = num + str;
console.log(result);

// 콘솔 : 1020
// 덧셈하는 과정에서 num이 String타입으로 변환됨

 

명시적 형 변환

개발자가 직접 함수 등을 이용해 형 변환을 일으킴

// 프로그래머 내장함수 등을 이용해서 직접 형 변환을 명시 

let str1 = "10";
let strToNum1 = Number(str1);
console.log(10 + strToNum1);
// 콘솔 : 20

// 문자열 -> 숫자
let str2 = "10개";
let strToNum2 = parseInt(str2);
console.log(strToNum2);
// 콘솔 : 10
// 주의할 점 : 첫 시작이 숫자면 변환을 잘 하는데 "fsdf10개" 형태로 쓰면 제대로 형변환되지 않음

// 숫자 -> 문자열
let num1 = 20;
let numToStr1 = String(num);
console.log(numToStr1 + "입니다");
// 콘솔 : 20입니다

 

 

---

 

연산자(1)

• 프로그래밍에서의 다양한 연산을 위한 기호, 키워드

 

대입 연산자

=

 

산술 연산자

+

-

*

/

%

 

복합 대입 연산자

산술+대입이 복합되어있음

let num 7 = 10;
// 둘다 같은 계산 
num7 += 20;
num7 = num7 + 20; 

// 모든 산술연산자 사용 가능 
num7 -= 20;
num7 *= 20;
num7 /= 20;
num7 %= 20;

 

 

증감 연산자

값을 1씩 늘리거나 줄일 때 사용

let num8 = 10;
num8++;
console.log(num8);
// 콘솔 : 11

//변수명 앞에 증감연산자를 사용하면 해당 코드 줄에서 바로 연산이 이루어짐

console.log(++num8); //전위 연산
console.log(num8--); //후위 연산 : 다음 라인부터 적용됨

 

 

논리 연산자

let or = ture :: false;

let and = ture && false;

let not = !true;

console.log(or, and, not);
// 콘솔 : ture false false

 

 

비교 연산자

let comp1 = 1 === 2;
let comp2 = 1 !== 2;

console.log(comp1, comp2);
// 콘솔 : false ture

let comp1 = 1 == 2;
// 이렇게 사용하게되면 자료형까지 비교가 안됨 
let comp1 = 1 === "1"; // false
let comp1 = 1 == "1"; // true

let comp3 = 2 > 1;
let comp4 2 < 1;
console.log(comp3, comp4);
// 콘솔 : true false

let comp5 = 2>- 2;
let comp6 = 2<=2;
console.log(comp5, comp6);
// 콘솔 : true ture

 

 

---

 

연산자(2)

 

null 병합 연산자

존재하는 값을 추려내는 기능

null이나 undefined가 아닌 값을 찾아내는 연산자

let var1;
let var2 = 10;
let var3 = 20;

let var4 = var1 ?? var2;
console.log(var3);
// 콘솔 : 10

let var4 = var1 ?? var2;
let var5 = var1 ?? var3;
console.log(var5);
// 콘솔 : 20

let var6 = var2 ?? var3;
console.log(var6);
// 콘솔 : 10

 

 

typeof 연산자

값의 타입을 문자열로 반환하는 기능을 하는 연산자

let var7 = 1;
var7 = "hello";

let t1 = typeof var7;
console.log(t1);
// 콘솔 : string

 

 

삼항 연산자

항을 3개 사용하는 연산자

조건식을 이용해서 참, 거짓일 때의 값을 다르게 반환함 

let var 8 = 10;
//요구사항 : 변수 res에 var8의 값이 짝수 -> "짝", 홀수 -> "홀"
let res = var8 % 2 === 0 ? "짝" : "홀";
console.log(res);
// 콘솔 : 짝

 

 

---

조건문

• 특정 조건을 만족했을 때에만 실행되는 코드를 작성하기 위한 문법

 

if

let num = 10;

// ()안에는 조건 {}안에는 조건이 참이 되었을때 실행될 코드 
if(num >= 10) { 
console.lof("num은 10 이상입니다");
}
else if(num >= 5){
// 첫번째 조건이 거짓일 때 해당 조건이 참일 때 실행될 코드 
console.log("num은 5 이상입니다");
}else{
// 위의 모든 조건이 거짓일 때 실행될 코드
console.log("조건이 거짓입니다!");
}

 

switch

다수의 조건을 처리할 때 if보다 더 직관적임

let animal = "cat";

// 비교하고싶은 변수
switch(animal) {
	case "cat" : {
    console.log("고양이");
    // 해당 case가 참일때 break를 걸지 않으면 아래 case들이 모두 실행됨
    break;
    }
    case "dog": {
    console.log("강아지");
    break;
    }
    case "bear: {
    console.log("곰");
    break;
    }
    case "snake":{
    console.log("뱀");
    break;
    }
// 어떠한 case에도 해당되지 않을 때
	defalut : {
    console.log("그런 동물은 모릅니다.");
    }
}

 

 

---

 

반복문

• 어떠한 동작을 반복해서 수행할 수 있도록 만들어 주는 문법

 

for문

for(초기식; 조건식; 증감식){
	console.log("반복!");
}

// 초기식 : count 변수 
// 조건식 : 언제까지 반복될것인지 - 참일때는 진행 거짓일때는 반복 멈춤
// 증감식 : 반복될떄마다 count 변수를 얼마나 증가시킬지

for(let idx=0; idx < 5; idx++){
	console.log("반복!");
}

 

for(let idx=0; idx < 5; idx++){

	//해당 조건이 만족할때는 아래 코드들이 실행되지않고 건너뛰어서 다음 반복 실행
	if(idx % 2 === 0 ){
    	continue;
    }

	console.log("반복!");
    
    // 반복문 돌다가 if문 활용해서 break할 수 있음
    if(idx >- 5( {
    break;
    }
}

 

 

---

함수

함수 선언

// 함수 선언
// greeting : 함수명
funcion greeting () {
//함수가 실행될 코드 
console.log("안녕하세요");
}

console.log("호출 전");
// 함수 실행
greeting();
console.log("호출 후");


// 함수 실행 흐름알기
//콘솔 : 호출 전 - 안녕하세요 ! - 호출 후

 

// 매개변수 받기
function getArea(width, height){

	//중첩 합수
	function another(){
   	console.log("another"); 
    }

let area = width * height;

// 반환값 or 리턴값
// return 값을 반환한 이후의 밑 코드는 실행되지 않음 
return area;
}

let area1 = getArea(10, 20); //인수 넘기기
console.log(area1):

// 콘솔 : another - 200

 

호이스팅

자바스크립트에서는 선언문을 호출하는 코드보다 밑에 작성해도 함수를 끌어올려서 실행하여 오류가 나지 않음 

let area1 = getArea(10, 20);
console.log(area1):

// 콘솔 : another - 200

function getArea(width, height){
	function another(){
   	console.log("another"); 
    }

let area = width * height;

return area;
}

 

 

함수 표현식

• 값으로 함수를 생성하는 것을 함수 표현식이라함
• 함수 표현식으로 생성된 함수는 호이스팅 적용 안됨 

function funcA() {
	console.log("funcA");
}

// 함수를 변수에 담을 수 있음
let varA = funcA;
console.log(varA);
// 콘솔 : funcA


let varB = function (){ // 이름 생략 => 익명함수
	console.log("funcB");
}
varB();

//선언식으로 생성된게 아니어서 
//let varB = function funcB(){
//	console.log("funcB");
//}
// funcB(); 로는 호출이 안됨

 

 

화살표 함수

함수를 이 전보다 더 간결하고 빠르게 생성할 수 있음 

let varC = () => {
return 1;
}

// or

let varC = () => 1;

console.log(varC());
//콘솔 : 10

let varD = (value) => {
console.log(value);
return value + 1;
}

console.log(varD(10));
//콘솔 : 11

 

 

콜백함수

• 자신이 아닌 다른 함수에, 인수로써 전달된 함수를 의미함

여기서 sub 함수가 callBack 함수 

 

function main(value) {
// 함수가 내용이 그대로 찍힘
console.log(value);
// 콘솔 : f sub() {
// console.log("i am sub");
// }

// 함수 실행
value();
// 콘솔 : i am sub
}

//함수 표현식 + 화살표 응용
main(() => {
	console.log("i am dub");
});

 

 

콜백함수 활용

아래와 같이 작성하면 비슷한 함수를 만들어나갈때 중복코드가 발생함

function repeat(count) {
	for(let idx = 1; idx <=count; idx++){
		console.log(idx);
	}
}

function repeatDouble(count) {
	for(let idx = 1; idx <=count; idx++){
		console.log(idx * 2);
	}
}

repeat(5); //콘솔 : 1 - 2 - 3 - 4 - 5
repeatDouble(5); //콘솔 : 2 - 4 - 6 - 8 - 10

 

콜백함수를 활용해서 개선

function repeat(count, callback){
	for(idx = 1; idx <= count; idx++){
    	callback(idx);
    }
}

repeat(5, function (idx){
	console.log(idx);
});

// 화살표 함수
repeat(5, (idx) => {
	console.log(idx * 2);
});

repeat(5, function (idx){
	console.log(idx * 3);
});

 

 

---

 

스코프

• 우리말로 "범위"를 뜻함
• 변수나 함수에 접근하거나 호출할 수 있는 범위를 말 함

a라는 변수는 함수밖에서 접근할 수가 없음 

 

접근 가능한 영역을 스코프라고 함 

 

전역 스코프

• 전체 영역에서 접근 가능

 

지역 스코프

• 특정 영역에서만 접근 가능 
• 중괄호 안에 있는 변수들은 지역 스코프 

 

let a = 1; // 전역 스코프 

function funxA() {
	let b = 2; // 지역 스코프
	console.log(a);
}

funcA();

if(true) {
	let c = 1; // 지역 스코프 
}

for (let i = 0; i < 10; i++){
	let d = 1; // 지역 스코프 
}

함수도 변수처럼 지역 스코프를 갖게 되는데 조건문이나 반복문안에서는 지역스코프를 갖지 않음 
(함수 안에서만 지역 스코프를 가짐)

 

 

---

 

객체 (1) 

• 원시 타입이 아닌 객체 타입의 자료형
• 여러가지 값을 동시에 저장할 수 있는 자료형을 의미 

 

객체 생성

프로퍼티는 개수 제한 없음

프로퍼티의 value 자료형으로 아무거나 사용 가능 

name의 키 값은 문자/숫자 값으로만 사용 가능함 

let obj1 = new Object(); // 객체 생성자
let obj2 = {}; // 객체 리터럴 (대부분 사용) 

// 객체 프로퍼티 (객체 속성) - key : value
let person = {
	name : "KUN",
    age: 4,
    hoppy : "산책",
    // 띄어쓰기 쓰려면 따옴표 사용
    "like dog" : true,
};

 

객체 프로퍼티

점 표기법

점 표기법을 이용해 특정 프로퍼티에 접근할 수 있음 

let name = person.name;
console.log(name);

 

괄호 표기법

접근하고자 하는 프로퍼티 네임을 문자열로 불러옴 (반드시 쌍따옴표와 함께 문자열로 사용해야함)

동적으로 프로퍼티를 변화시키면서 꺼내와야할 때 사용 

let age = person["age"];

// 변수에 넣어서 사용 가능 
let property = "hobby";
let hobby = person[property];
console.log(hobby);
//콘솔 : 산책

 

 

새로운 프로퍼티 추가

person.jop = "fe developer";
person["favoriteFood"] = "수박";

 

프로퍼티 수정

person.jop = "educator";
person["favoriteFood] = "고구마";

 

프로퍼티 삭제

delete person.jop;
delete person["favoritedFood"];

 

프로퍼티 존재 유무 확인하는 방법 (in 연산자)

let result1 = "name" in person;
console.log(result1);
//콘솔 : ture

 

 

---

객체(2)

상수 객체

상수에 저장해놓은 객체

저장해놓은 객체값의 프로퍼티를 추가/수정/삭제는 가능함 

const animal ={
type: "고양이",
"name" : "나비",
color: "black",
}

// 오류
// anima = {
// "a" : 1
// }

animal.age = 2; // 추가
ainmal.name = "까망이" // 수정
delete animal.color; // 삭제

 

 

메서드

값이 함수인 프로퍼티 

const person = {
name : "KUN";

// 메서드 선언
sayFi(){
console.log("안녕!");
}
}

person.sayHi();
person["sayHi"]();

 

 

---

배열(Array)

• 여러개의 값을 순차적으로 담을 수 있는 자료형

배열 생성

let arrA = new Array(); // 배열 생성자
let arrB = []; // 배열 리터럴 (대부분 사용)

let arrC = [1, 2, 3, ture, "hello", null, () => {}. {}. [],]

 

 

배열 요소 접근

순차적으로 저장하기때문에 인덱스(번호)로 접근 가능

let item1 = arrC[0];
let item2 = arrC[1];

// 배열 값 수정 가능 
arrC[0] = "hello";