[내배캠] 4/22 6일차

초이·2024년 4월 22일
0

🗓️ 내일배움캠프

목록 보기
6/55


요번 주차는 개인 공부를 진행하면서 개인 프로젝트를 하는 주차이다.
javascript 기초, 심화 문법에 대해 공부하였다.

JS 언어의특징

  • 객체지향이다.
  • 동적 타이핑언어다.
  • 함수형 프로그래밍 지원.
  • 비동기 처리 가능
  • 클라 측 및 서버 측 모두에서 사용이 가능하다.

절차지향이란? 코드 맨윗줄부터 순서대로 코드를 실행

객체지향이란? 코드를 그룹으로 묶어서 처리한다.

동적 타이핑? :
string a = “abc”;
var a = “abc”; < 변수의 타입을 결정하지 않음. (run time에 결정되는 것이 동적 타이핑이다.)

ES6 문법

2015년도에 대규모 문법적 향상이 있었다.

let, const

이전에는 var만 사용했다

let 변수, const 상수

변수와 상수의 차이점 : 한번 할당한 값을 바꿀 수 있는가?

  • 변수 : 재할당 ok
  • 상수 : 재할당 x

arrow function

화살표 함수 

const add = () =>{
	//코드들
}

삼항 연산자

condition ? true인 경우 : false인 경우;

구조분해할당(destructing)

구조를 찢어버려서 할당하는 것

배열이나 객체의 속성을 하나하나 떼어내서 그 값을 변수에 담는것.

let [val1, val2] = [1, "new"]

이렇게 되면 val1에는 숫자 1이 val2에는 “new”가 들어간다.

let arr = ["val1","val2","val3"];
let [a,b,c] = arr;

이럴 경우엔 각 arr 순서대로 a,b,c에 들어간다.

만약 변수의 값이 요소보다 더 많이 있다면? undefined로 읽힌다.

let {nickname, old} ={
	name: 'nana',
	age: 13
}

이 경우에는 nickname이 name을 old가 age의 값을 가지게 된다.

let user = {
	name: 'haha',
	age: 14
}

let { name, age, birth='today'} = user;

이렇게 초기 값을 정해줄 수 있다. (undefined일 경우에만 초기값이 들어가고 원래 값이 있다면 그 값으로 출력된다.)

단축속성명 (property shorthand)

const name = 'haha';
const age = '35';

const obj = {
	name,
	age
}

이 경우에 obj는 배열로 보이지만 key 와 value의 name이 같다면 value 값을 생략해도 값이 들어간다.

전개 구문 (spread operator)

정말 많이 사용하는 ES6구문이다.

  • 배열
let arr = [1,2,3,4,5];
console.log(arr); //출력결과: [1,2,3,4,5]
console.log(...arr); //출력결과: 1, 2, 3, 4, 5
  • 객체
let user = {
	name : 'nam',
	age : 30
};

let user2 = { ...user };
console.log(user2); //출력결과: { name: 'nana', age: 30 }
function example (a, b, c, ...args){
	console.log(a,b,c); //1,2,3
	console.log(args); //[4,5,6,7,8,9]
}

example(1,2,3,4,5,6,7,8,9);

위와 같은 코드일 때, args를 전개 구문으로 해두지 않으면 나머지 내용을 놓치게 된다. 저렇게 args로 묶어주면 매개 변수값을 몇 개를 받아도 넣을 수 있다.

템플릿 리터럴(Template Literal)

console.log(`hello my name is ${name}.`};

이렇게 ${}를 이용해서 백틱안에 넣으면 변수값을 바로 넣을 수 있다.

템플릿 리터럴은 멀티 라인을 지원한다.

console.log(`Hi!
                        my name is  haha`};

이렇게 쓰면 그대로 나타난다.

일급 객체로서의 함수

JS에선 함수를 일급객체(First-Class Object)라고 한다.

따라서 함수를 객체처럼 다룰 수 있다.

변수에 함수를 할당할 수 있다.

const addNum = function(){
	//코드들
}

이렇게 선언하면 addNum을 계속 불러서 사용할 수 있다.

함수를 인자로 다른 함수에 전달할 수 있다.

  • 콜백함수 : 매개변수로써 쓰이는 함수
  • 고차함수 : 함수를 인자로 받거나 return하는 함수
function callFun(func){
	func();
}

매개변수로 함수를 받을 수 있다.

callFunc(()=>{
	//코드
}

이러한 것은 함수가 일급 개게라서

함수를 환할 수 있다.

function createAdder(num) {
	return function (x) {
		return x + num;
	};
}

const addFive = createAdder(5); // createAdder(5) == return x + 5
console.log(addFive(10)); //출력결과: 15

결국 return 을 함수로 할 수 있다.

객체로 함수를 할당

const person = {
	name : 'irine',
	age : 30,
	isMarried : false,
	sayHello: () => {
		console.log(`Hello My Name is ${this.name}`;
	}
}

function으로 객체 안에 넣었을 때, this는 person을 가르키지만,

화살표 함수로 this를 가르키면 undefined가 나온다.

배열의 요소로 함수를 할당

const myArr = [
	function (a, b) {
		return a + b;
	},
	function (a, b) {
		return a - b;
	},
}

console.log(myArr[0](1, 3)); //출력결과 : 4
console.log(myArr[1](10, 7)); //출력결과 : 3
  • 일급객체로 다양한 조합을 보여 줄 수 있는 예.
function multiplyBy(num) {
	return function (x) {
		return x * num;
	};
}

function add (x, y) {
	return x + y;
}

const multiplyByTwo = multiplyBy(2); //return x * 2
const multiplyByThree = multiplyBy(3); //return x * 3

console.log(multiplyByTwo(10)); // 20
console.log(multiplyByThree(10)); //30

const result = add(multiplyByTwo(5), multiplyByThree(10));
console.log(result); //40

이렇게 함수를 반환하는 식으로 코드를 작성하면 코드가 간결해져서 유지 보수도 쉬워지고 복잡한 기능도 구현할 수 있다.

Map

map, set은 최근에 등장한 자료구조이다.

Map, set 의 목적

: 기존의 배열과 객체보다 데이터의 구성, 검색, 사용을 효율적으로 처리

Map

  • key / value
  • key에는 어떤 데이터타입(유형)도 다 들어올 수 있다.
  • map은 키가 정렬된 순서로 저장된다.
  • 기능
    • 검색(set), 삭제(delete), 제거(clear), 여부(size)
const myMap = new Map();
myMap.set('key', 'value'); //key에 value값 저장
myMap.get('key'); //key에 해당하는 값 불러오기, 없으면 undefined
myMap.has('key'); //key가 존재하면 true or false
myMap.delete('key'); //key에 해당하는 값 삭제
myMap.clear(); //맵 안에 있는 모든 요소를 제거
myMap.size; //요소의 개수를 반

set과 get은 세트처럼 묶여있다.

Map의 반복

맵은 iterator(반복자)를 가지고 있기 때문에 for ~ of를 쓸 수 있다.

method:

  • keys() : key로 이루어진 iterator가 나옴
  • values() :
  • entries() :
const myMap = new Map();

myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);

console.log(myMap.keys()); //[Map Iterator] { 'one', 'two', 'three' }
console.log(myMap.entries()); //[Map Entries] { [ 'one', 1 ], [ 'two', 2 ], [ 'three', 3 ] }
for (const key of myMap.keys()) {
  console.log(key);
}

출력 결과 : 
one
two
three

Set

자료구조 중에 하나.

  • 고유한 값을 저장하는 자료구조이다.
  • 값만 저장한다.
  • 키는 저장하지 안흔ㄴ다
  • 값이 중복되지 않는 유일한 요소로만 구성된다.

Set 기능

  • 값 추가, 검색, 삭제, 제거, 존재여부 확인

하루 정리

javaScript의 기본기를 다지는건 신나는 일같다. 명확하게 개념을 적립함으로 아리쏭하게 사용했던 것들을 내것으로 만들었다.
노션에 메모한 것을 급하게 크롭해 온거지만, vsCode에서도 코드로 정리하면서 공부한 것들이 있는데, 정리해두면 좋을 것 같아서 내일 국취제 가야해서 자소서 쓰는 건만 해결되면 string이나 array, object 메소드들을 정리해서 올려야겠다. 두고두고 봐야 안까먹을 것 같다.

profile
초이
개발 일기장
이전 포스트

[내배캠] 4/19 5일차

다음 포스트

[내배캠] 4/23 7일차

0개의 댓글