개발이야기

[TIL]01. 자바스크립트 문법공부 시작

무서운승태 2023. 10. 12. 20:54
728x90

TIL(Today I Learned)를 왜 쓰게 되었을까???

10월 4일부터 스파르타 코딩클럽에서 진행하는 내일 배움 캠프에 백엔드(Node) 과정으로 참여하게 되었다.

시작하자마자 미니프로젝트를 진행하게 되어 정신없이 1주일이 지나갔고 발표 까지 끝마쳤다. 이제 고작 1주일 진행했는데 벌써 한 달은 지난듯한  느낌이었고 오늘부터 본격적으로 주특기 수업인 자바스크립트 공부가 시작되었다. 오늘 하루종일 정신없이 강의를 시청했고 새로운 것도 배웠는데 휘발성으로 날아가버릴 거 같아서 두려웠고 내일 배움 캠프에서도 TIL을 강조하여서 TIL에 대하여 찾아보았다.

그날그날 공부한 내용을 기록하는 것이라고 한다. 이것만으론 감이 잡히지 않아서 다른 블로그들도 찾아보았는데 다들 멋있는 레이아웃으로 가독성 좋게 꾸며놓은 것을 보고 내 블로그에 있는 몇 개 안 되는 글을 보며 자신감을 잃었다....

나는 내 본래 목적에 맞게 "학습기록"에 초점을 맞춰서 앞으로 TIL을 작성해보려고 한다. 두서없이 일기 같은 느낌이 될 수도 있지만 꾸준한 게 좋은 것이라고 한다.

 

강의에서 들은 모든 내용을 다루진 않을 것이다. 개인적으로 헷갈리는 부분 난해한 문법 등등 기억해야 할 부분을 중점으로 기록하겠다.

 

Chapter1. 자바스크립트 기본 문법

자바스크립트에선 사람들이 자주 사용하는 유용한 기능을 이미 함수화 시켜서 가지고 있다. 내가 1년 정도 개발일을 하면서도 자주 사용했던

그리고 헷갈렸던 문자열(String) 함수에 대한 내용이다.

// 문자열 결합하기 문자열.concat(두번째 문자열);
let str1 = "hello";
let str2 = "world";
console.log(str1.concat(str2));

// 문자열 자르기
let str3 = "hello, World";
// substr("시작위치", "길이")
console.log(str3.substr(7, 5));
// slice("시작위치", "종료위치")
console.log(str3.slice(7, 12));

// 문자열 검색
let str4 = "hello, World";
console.log(str4.search("World"));

// 문자열 대체 => 첫번째 문자열을 두번째 문자열로 대체한다.
let str5 = "hello, World";
let result01 = str5.replace("World", "javascript");
console.log(result01);

// 문자열 분할 => split(",") , 기준으로 문자열을 분해하고 배열로 반환한다.
let str6 = "hello, World";
let result02 = str6.split(",");
console.log(result02);
  • 암시적 형변환
    • 연산자 + 를 사용할 시 문자열로 암시적 형변환이 일어남
    • -, *, /, % 연산자를 사용하면 숫자로 암시적 형변환이 일어남
1 + "1"; => "11" 문자열

"2" - 1; => 1 숫자형

 

  • 화살표함수 
    • ES6 문법이다.
    • 기존 함수선언보다 간결히 사용할 수 있다.
let add = (x, y) => {
	return x + y;
}

// 매개변수가 1개이고 코드가 리턴값 1줄일때는 더욱 간결하게 생략 가능하다.
let add = x => x + 10;

 

  • 객체(Object) 사용 시 유용한 함수들
let person = {
    name : "홍길동"
    , age : 10
}

// Object.keys => 해당 객체의 모든 key값을 배열로 반환
let keys = Object.keys(person);

// Object.values => 해당 객체의 모든 value값을 배열로 반환
let values = Object.values(person);

// Object.entries => key, value를 묶어서 배열로 만든 배열 (2차원배열)로 반환한다.
let entries = Object.entries(person);
console.log(entries);

// Object.assign => newPerson에 person을 복사한다.(세번째 매개변수가 있으면 해당값을 추가해서 복사한다.)
let newPerson = {};
Object.assign(newPerson, person, {age : 31});
console.log(newPerson);

// ... spread => 여러개의 객체, 배열을 합칠수 있다.
let perfectMan = {...person, ...person2};
console.log(perfectMan);

https://github.com/iufan1526/TIL/tree/main/WEEK_1