[20240502] 앱개발 시작하기 #6

콜백 함수(Callback Function)

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

 

//1. 콜백함수

function main(value){

    // console.log(value);

    value();

}

// sub는 콜백함수로 활동 중

function sub(){

    console.log("i am sub");

}

main(sub);

main(() => {

    console.log("sub");

})

//2. 활용

function repeat(count,callback){

    for(let idx=1; idx<=count; idx++){

        callback(idx);

    }

}

repeat(5,function(idx){

    console.log(idx);

});

 

---

스코프

우리말로 범위를 뜻함

변수나 함수에 접근하거나 호출할 수 있는 범위를 말함

 1. 전역 스코프 : 전체 영역에서 접근 가능

2. 지역 스코프 : 특정 영역에서만 접근 가능

---

객체

원시 타입이 아닌 객체 타입의 자료형

여러가지 값을 동시에 저장할 수 있는 자료형을 의미

 

// 1. 객체 생성

let obj1 = new Object(); //객체 생성자

let obj2 = {}; //객체 리터럴(대부분 사용)

// 2. 객체 프로퍼티 ( 객체 속성 ) | key : value

let person = {

    name: "토순이",

    age: 27,

    hobby: "테니스",

    extra: {},

    10:20,

    "like cat":true,

};

// 3. 객체 프로퍼티를 다루는 방법

// 3.1 특정 프로퍼티에 접근(점 표기법, 괄호 표기법)

let name = person.name;

console.log(name);

let ages = person["age"];

let property = "hobby";

let hobby = person[property];

// 3.2 새로운 프로퍼티를 추가하는 방법

person.job = "fe developer";

person["favoriteFood"] = "떡볶이";

// 3.3 프로퍼티를 수정하는 방법

person.job = "edu";

person['favoriteFood'] = '초콜릿';

// 3.4 프로퍼티를 삭제하는 방법

delete person.job;

console.log(person);

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

let result1 = "name" in person;

console.log(result1);

 

---

 

// 1. 상수 객체

const animals = {

    type : "고냥이",

    name : "나비",

    color : "black",

};

animal.age = 2 //추가

animal.name = "나아비" //수정

delete animal.color; //삭제

// 2. 메서드 -> 값이 함수인 프로퍼티를 말함

const person = {

    name: "토순이",

    //메서드

    sayHi: function(){

        console.log("안녕!");

    },

    sayHis(){

        console.log("안녕!");

    },

};

person.sayHi();

person["sayHis"]();

 

---

배열

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

 

// 1. 배열생성

let arrA = new Array(); // 배열 생성자

let arrB = []; // 배열 리터럴 (대부분 사용)

let arrC = [

    1,

    true,

    "hello",

    []

]

// 2. 배열 요소 접근

let item1 = arrC[0];

let item2 = arrC[1];

arrC[0] = "hello";