2024. 05. 28 (화) 5주차 - Daily Coding - Day02

14강

- 비구조화(Destructuring) 할당

- 스프레드 (...) 연산자

 

 

이터러블

- 배열

- 문자열

- Map

- Set

 

이터러블이 아님

- 일반 객체(Object)

 

15강

- 객체 리터럴

- 옵셔널 체이닝

- Map

- Set

 

객체 리터럴

- ES 6 버전에서 객체를 표현하는 방식에 변화

- 변수명과 객체 프로퍼티 같은 경우 중복 표현 생략

- 객체 메서드 함수표현식 function 키워드 생략

- 오브젝트 프로퍼티 명 안에 연산 가능

 

// Object Literal
// 1. 

const ObjectName = {
    a: 1,
    b: 'bb'
};


const outsideObject = {
    ObjectName: ObjectName
};

console.log(outsideObject.ObjectName);
//{ a: 1, b: 'bb' }

const es60outsideObject = {
    ObjectName
};

console.log(es60outsideObject.ObjectName);
//{a:1, b: 'bb'}



//2.
const ObjectMethods = {
    method1: function() {
        console.log('this is method');
    }
}

ObjectMethods.method1();
// this is method

const es60ObjectMethods = {
    method1() {
        console.log('this is method es60');
    }
}

es60ObjectMethods.method1();
// this is method es60


//3.
const arr = ['a', 'b', 'c']
const objectWithOperation = {
    [arr[0]]: 'this is keyName',
    [`${1+3+'ha'}`]: 'this is 4ha',
}

console.log(objectWithOperation);
// { a: 'this is keyName', '4ha': 'this is 4ha' }

 

 

옵셔널 체이닝(?.)

- undefined, null 에서는 어떤 프로퍼티를 참조할 수 없음 (TypeError)

이 에러를 방지하기 위해 만들어진 es6 문법이 옵셔널 체이닝

const weekdays = {
    mon: {
        open: 10,
        close: 22
    },
    tue: {
        open: 11,
        close: 20
    }
}

console.log(weekdays.mon);
console.log(weekdays.mon.open);
console.log(weekdays.wed); //console에는 undefined 이 나온다

if(weekdays.wed) console.log(weekdays.wed.open); // console에는 error 가 나온다

console.log(weekdays.wed?.open);//console에는 undefined 이 나온다

const thisIsNull = null;
console.log(thisIsNull?.a);

 

 

Map

- ES6에서 추가된 key-value 타입의 집합

- key는 중복해서 들어갈 수 없다

- 이터러블(iterable)  순회가 가능한 구조

// Map
const thisIsMap = new Map()

thisIsMap.set(1, 'this is 1');
thisIsMap.set(true, 'this is boolean')
thisIsMap.set('aa', 'this is aa')

console.log(thisIsMap)
// Map(3) {
//   1 => 'this is 1',
//   true => 'this is boolean',
//   'aa' => 'this is aa'
// }

// 
//this is 1

console.log(thisIsMap.get(true))
// this is boolean

for (const element of thisIsMap) {
    console.log(element);
}

// [ 1, 'this is 1' ]
// [ true, 'this is boolean' ]
// [ 'aa', 'this is aa' ]

thisIsMap.delete(1);

console.log(thisIsMap);
// Map(2) { true => 'this is boolean', 'aa' => 'this is aa' }

// Set

const thisIsSet = new Set();
thisIsSet.add('pizza');
thisIsSet.add('pasta');
thisIsSet.add(1);
thisIsSet.add(true);
console.log(thisIsSet); //Set(4) { 'pizza', 'pasta', 1, true }

console.log(thisIsSet.has('pizza')) // true
console.log(thisIsSet.has('pizza2')) // false

for(const element of thisIsSet) {
    console.log(element)
}
// pizza
// pasta
// 1
// true

---

🧐 자바스크립트 용어 정리

전역

- 코드가 사용되는 프로그램 전체 또는 파일 전체를 의미한다

- 전역은 영어로 Global 즉, 우리가 사는 지구 전 지역과도 같은 의미다

 

지역

- 프로그램이나 파일 안의 특정 함수, 모듈 등과 같이 특정 범위를 의미한다

- 지역은 영어로 Local, 그 범위를 특정할 수 있는 지역이라는 의미이다

 

객체

- 자바스크립트 프로그램에서 인식할 수 있는 모든 대상을 말한다

- Key 와 Value의 집합 { }

- 웹브라우저, 웹문서 관련된 것

- 여러 정보를 가지고 있는 복합 자료형

 

전역 객체

- 전 지역(코드가 사용되는 프로그램 전체 또는 파일 전체 에서 사용할 수 있는 객체를 말한다

- Window객체로 모든 객체가 소속된 객체, 창이나 프레임을 의미한다

- 웹브라우저에서는 Window, Node.js 환경에서는 global이라고 부른다

 

전역 변수

- 스크립트 소스 전체에서 사용할 수 있는 변수

 

지역 변수 (로컬 변수)

- 한 함수에서만 사용할 수 있는 변수

 

변수

- 데이터를 저장할 때 쓰는 '이름이 붙은 박스'

- 온라인 쇼핑몰 애플리케이션을 구축할 경우 상품이나 방문객 등의 정보를 저장할 때 변수를 사용한다

- let, const, var를 활용하여 변수를 생성한다

- 할당 연산자 '=' 를 사용해 변수 안에 데이터를 저장한다

- const 변수는 한 번만 선언해야하며 같은 변수를 여러 번 선어하는 경우 에러가 발생한다

- 예약어(let, class, return, function etc.)는 변수명으로 지정할 수 없다

 

상수

- 변하지 않는 변수를 말한다

- const를 사용하여 지정한다

- 상수는 재할당할 수 없으며, 재할당할 시 오류가 발생한다.

- 객체와 배열은 주로 상수를 활용한다

 

속성(Property)

- 객체에서 값을 담고 있는 정보(key, value)

 

매서드(method)

- 객체가 어떻게 동작할지를 선언해놓은 함수

- Window.alert('Hello'); => Window는 객체 / alert( ) 는 매서드

 

매개변수 (인자 / Parameter)

- 함수를 위해 필요하다고 지정하는 값

- 함수를 실행하는데 필요한 '입력'

- 함수 선언 방식 괄호 사이에 있는 변수

- 임의의 데이터를 함수 안에 전달

 

인수 (Argument)

- 함수를 호출 할 때 매개변수에 전달되는 값

- 함수를 실행하는 데 필요한 '입력'