[인프런] 맛집지도 만들기 (7)

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지 - 인프런 | 강

※ 해당 링크 강의 내용을 바탕으로 작성된 포스팅입니다.

 

 

 

JS 배열

유저 아이디 목록과 같이 숫자, 문자를 모아 관리할 수 있는 컬렉션이 필요.

이 역할을 해 주는 게 배열, 객체와 같은 컨테이너 자료형이다.

 

CRUD
Create 생성
Read 조회
Update 수정
Delete 삭제

자료형을 배울 때는 CRUD를 파악해야 한다.

 

 

 

배열

배열 선언(Create)

 

//let 배열명 = [];
let arr = [1, 2, 3, 4];

 

 

배열 조회(Read)

 

배열 요소의 주소값이 인덱스이다. 인덱스 번호는 0부터 1씩 증가한다.

한 번에 여러 개의 요소를 조회하고 싶으면 slice() 사용. 마지막 인덱스는 포함하지 않는다.

 

//배열명[인덱스 번호];
//arr.slice(시작 인덱스, 마지막 인덱스)

arr[0];
arr.slice(0, 2);

 

 

배열 수정(Update)

 

//배열명[인덱스 번호] = 수정값;
arr[0] = 100;

 

 

배열 삭제(Delete)

 

//배열명.splice(시작 인덱스, 지울 갯수)
arr.splice(0, 1);

 

 

 

 

JS 객체

속성(key)과 속성값(value)으로 이루어진 자료형.

객체 선언(Create)

 

// const 객체명 = {
//     속성 1: 속성값 1,
//     속성 2: 속성값 2
// }


let userInfo = {
    email: "dummy@dummy.com",
    password: "a1234"
}

 

 

객체 조회(Read)

 

// 객체명.속성;
// 객체명["속성"]; 표현 방식은 다르지만 값은 같음

userInfo.email;
userInfo["email"];

 

 

객체 수정(Update)

 

// 객체명.속성 = "수정값";
// 객체명["속성"] = "수정값";

userInfo.email = "updated";
userInfo["email"] = "updated";

 

 

객체 삭제(Delete)

 

// delete 객체명.속성;
// delete 객체명["속성"];

delete userInfo.email;
delete userInfo["email"];

 

 

 

 

JS 반복문

코드를 원하는 횟수만큼 반복하여 실행.

 

 

while문

조건식이 참이면 반복해서 실행.

 

// let 변수 = 초깃값;

// while(조건식) {
// 	소스코드;
// 	증감식;
// }

let i = 1;

while(i <= 10) {
    console.log("안녕");
    i = i + 1;
    // i++;도 같은 의미
}

 

 

for문

 

whil문보다 더 간결하게 반복문 표현 가능.

 

// for(초기값; 조건식; 증감식){
//     소스코드;
// }

for(let i = 1; i <= 10; i++){
    console.log("안녕");
}

 

 

 

컨테이너 활용: for-in문, for-of문

 

const arr = [5, 6, 7, 8];

//반복을 할 때마다 배열 안에 존재하는 인덱스를 index에 차례대로 대입
for (let index in arr) {
    console.log(arr[index]);
}

//반복을 할 때마다 배열의 요소 값 자체를 item에 차례대로 대입
for (let item of arr) {
    console.log(item);
}

const jsonArr = {email: "dummy", password: "a123"};

//반복을 할 때마다 객체의 키 값을 key에 차례대로 대입
for (let key in jsonArr) {
    console.log(jsonArr[key]);
}

 

 

 

 

반복문 제어: break, continue

break

 

break를 만나면 반복문 강제종료.

 

for (let i = 1; i <= 10; i++) {
    if(i >= 5) {
        break;
    }
    console.log(i);
}

 

 

 

continue

 

continue를 만나면 해당 반복 건너뜀.

 

for (let i = 1; i <= 10; i++) {
    if(i == 5) {
        continue;
    }
    console.log(i);
}

 

 

 

 

JS 함수

소스코드를 담기 위한 그릇.

특별한 목적의 작업을 수행하도록 설계된 독립적인 코드 블록. 필요할 때마다 호출하여 반복 수행 가능.

 

// 기본형(기명함수), 호이스팅 지원
// function 함수명(파라미터) {
//     소스코드;
// }

function func() {

}

// 익명함수, 호이스팅 미지원
// let 변수명 = function(){ 함수 이름이 없음
//     소스코드;
// }

let func = function() {

}

// ES6 화살표 함수(익명함수의 일종), 호이스팅 불가
// let 변수명 = () => {
//     소스코드;
// }

const func = () => {

}

 

호이스팅
컴퓨터는 기본적으로 코드를 위에서 아래로 읽는다.
함수 선언 전에 호출을 하면 아래에 있는 코드를 끌어올려 주는 것을 호이스팅이라고 한다.
익명 함수는 호이스팅을 미지원하여 선언 전 호출을 하면 에러가 난다. ES6 화살표 함수도 마찬가지.

 

 

 

예시

function sum(target) {
    let result = 0;
    for(let i = 1; i <= target; i++) {
        result = result + i;
    }
    return result; //값 반환
}

console.log(sum(10));
console.log(sum(20));