본문 바로가기
[항해99] TIL

[항해99] 1일차(JavaScript 문법)

by @kkkk_biiin 2023. 8. 14.
728x90

 드디어 항해 본 과정 시작!! 이번주는 JavaScript 문법을 배우는 기간이어서 문법 강의를 들었다. 1일 차 강의는 기본적인 문법에 대한 내용이었기 때문에 빠르게 듣고 2일 차로 넘어갔다. 근데 2일 차부터 일급 객체로서의 함수가 나오더니 함수 안에 함수 안에 리스트 안에 함수 넣고, 객체 안에 함수 넣고... 살짝.. 아니 많이 복잡해졌다. 그래서 내일 2일차 강의 다시 한번 들으면서 복습을 해야겠다고 생각했다. 오늘도 이전 글들과 마찬가지로 수업 내용 중 중요하다고 생각하는 것들, 그리고 헷갈린 것들에 대해 작성을 해보고자 한다.

 

 


1. 문자열

// 문자열 합치기
let str = "Korean"
let str2 = " People"
let result = str.concat(str2)
결과: Korean People

// 문자열 자르기
console.log(result.substring(2,3))  // 시작부터 몇 개 까지
console.log(result.slice(7,12))     // 시작부터 끝 위치 

// 문자열 검색
console.log(result.search("World"))

// 문자열 바꾸기
let result1 = result.replace("Peopel", "Java")
결과: Korean Java

// 문자열 분할
let result2 = result.split(" ")	// 띄어쓰기에서 분할
결과:[ 'korean' , 'People']

 위에 작성한 코드들은 이해하기에 어려운 내용은 아니라고 생각한다. 하지만 익숙해지기 어려운 코드들...

 

 

2. 삼항 연산자

// y가 undifined이면 20을 할당

let y;
let z = y || 20;

 

 

3. 객체 메서드

// 객체 메서드
let keys = Object.keys(person)

let values = Object.values(person)

// entries: key와 value를 묶어서 배열로 만든 배열
let entries = Object.entries(person)

 keys()는 객체의 key 값들을 불러오는 메서드이고 value()는 value 값들을, entries()는 key와 value 값을 배열로 불러오는 메서드이다. 

 

 

4. 객체 복사 

// assign
let newPerson = {};
Object.assign(newPerson, person, {age:31}); // 뒤에 {} 묶어서 바꿀 값을 입력하면 바뀜

 형식은 Object.assign(새로운 객체, 복사할 객체, {수정하고 싶은 key:value})이다.

 

 

5. 객체 병합

let perfectMan = {...person1, ...person2};  // 객체의 중괄호가 없어진 상태로 들어옴

 

 

6. map()과 filter()

// map: return값의 꼭 가져야 하며, 새로운 변수에 담아야 함
let number = [1,2,3,4,5]

let newNumbers = number.map(function(item){
    return item * 2
})

// filter
let filterdNumbers = number.filter(function(item){
    return item !== 5
})

 number.map()은 number의 요소들을 하나씩 가져오는 함수이며, filter()는 return 값을 필터링해서 출력하는 함수이다.

 

 


 2일차 강의도 오늘 듣긴 했지만.. 이해가 안 되는 부분이 많이 있었기 때문에 내일 복습 이후 작성하고자 한다. 오늘 강의 내용도 중요한 부분이 있었지만 기술매니저님이 간단하게 수업해 주신 내용이 인상 깊었는데,

let arr = [1,2,3,4,5,6]
let arr = new Array(1,2,3,4,5,6)

 우리는 배열을 만들 때 첫 번째 줄의 코드와 같이 만들지만 아래처럼도 만들 수 있다는 내용이었다. 이 부분이 인상 깊었던 이유는 아래의 코드처럼 만드는 방식은 class를 통해 객체(?)를 만드는 방식과 같기 때문이다. 이 부분에 대해 설명을 듣고 나니 조금 더 큰 틀의 관점에서 바라볼 수 있게 된 것 같다. 

728x90