[TIL] 20230522 - Javascript 문법 종합 (객체, 배열, 함수, 삼항연산자 등)

오늘부터는 javascript 강의 학습하기!

다음주 목요일에 개인 과제가 있을 예정이라

빠르게 완강하는게 좋을듯 하다.

 

 javascript 역사 

1995년 넷스케이프 커뮤니케이션에서 자바스크립트가 만들어짐! 이름은  LiveScript였으나 마케팅때문에 Javascript로 이름을 바꿧다는.. ㅋㅋㅋㅋ

2005년 AJAX 때문에 전체 페이지 새로고침이아닌 해당영역만 새로고침이 가능해져서 UX 가 엄청 증가됨

2009년도 node.js 등장 fuyll Stack 가능(프론트,백엔드,mongoDB)

 

절차지향 -> 순서대로 프로그래밍 실행

객체지향 -> 역할을 가지고 있는 객체라는 그룹으로 묶어서 프로그래밍을 수행하는것 (객체 재활용가능)

 

javascript는 객체 지향 언어이다.

 

역사부터 시작해서 기본 문법을 배웠다.

 

javascript의 객체는 무지무지 많이 다루게 되는데

// object(객체 | 딕셔너리) 타입 : key-value pair
let person = {
    // key : value,
    name: '홍길동',
    age: 20,
    inMarried: true
    // 어떤 데이터 타입이든 상관없이 들어갈 수 있음
}

string, number, boolean, 함수 등 어떤타입이든 상관없이 들어 갈 수 있다.

 

javascript 연산자 중에는 삼항 연산자를 많이 쓰게 될 것이다! 

let xx = 10;
let result = ( x > 5 ) ? "크다" : "작다"
console.log(result);

// 조건부 실행
let x = 10;
if(x>0) {
   console.log("x는 양수입니다.")
}

// and 조건(&&) : (여기가 만족되면) && 여기를 실행해줘
(x > 0) && console.log("x는 양수입니다.")

// or 조건(||)
// 삼항 연산자와 단축평가
let y; // y에는 undefined
let z = y || 20; // y가 undefined면 20을 셋팅해줘 == y가 존재하지 않는 경우에는 기본값으로 20을 셋팅해줘 라는 뜻!

console.log(z)

그리고 함수중 화살표 함수(arrow Function)은 매우 간결하게 사용도 가능하다.

// 1-1. 기본적인 화살표 함수
let arrowFunc01 = (x,y) => {    
    return x+y
}

// 1-2. 한 줄로 : 실행 로직이 한줄일 경우사용 가능
let arrowFunc02 = (x,y) => x+y

// 
function testFunc(x){
    return x;
}
// 매개변수가 한개일때는 (input)의 ()도 빼줄 수 있다.
let arrowFunc03 = x => x; // ==> let arrowFunc03 = (x) => x;

객체 메소드 공부중 객체 비교에서 새로운걸 배웠다.

객체는 크기가 커서 메모리에 별도 저장되기때문에 비교가 어려운데

JSON.stringify를 쓰면 문자열화해서 비교가 가능하다.

// 객체 비교
// 객체는 크기가 상당히 크다. -> 메모리에 저장할 때 변수마다 별도의 공간에 저장

// person1 별도의 공간에 대한 주소
let person1 = {
    name: "홍길동",
    age: 30,
    gender: "남자"
}

// person2 별도 공간에 대한 주소
let person2 = {
    name: "홍길동",
    age: 30,
    gender: "남자"
}

let str1 = "aaa";
let str2 = "aaa";

console.log (person1 === person2); // 객체는 각 따로 저장되어 주소가 다르기때문에 false로 나옴
console.log (str1 === str2); // 크기가 작은 string은 직접 저장되기때문에 true로 나옴

console.log(JSON.stringify(person1) === JSON.stringify(person2)) // 문자열화 해서 비교하면 비교가 가능하다. true반환

객체 병합에서는 spread operator(...)를 사용해서 객체를 해체해서 하나로 새로 병합할 수 있다.

//객체 병합
let person3 = {
    name: "홍길동",
    age: 30
}

// person2 별도 공간에 대한 주소
let person4 = {
    gender: "남자"
}

let perfectMan = {...person3, ...person4}; // ... : spread operator  중괄호를 없애고 다 풀어해쳐줘
console.log("perfectMan =>", perfectMan);

또한, 배열을 상당히 많이 쓰게 될것!

배열은 인덱스로 접근해야한다.

map, filter, find 함수의 function은 리턴문을 가져와야해서

let 함수명 으로 새로운 배열을 받아야한다.

//forEach
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(item){ // 매게변수 자리에 함수를 넣는것 : 콜백함수 
    console.log('item입니다 =>' + item);
})

// map : map함수의 function은 반드시 리턴문을 가져야한다. 새로운 배열을 let 으로 받아야함.    
let newNumbers = numbers.map(function(item){
    return item *2; // 가공한 값이 새로운 배열로 return 된다. -> 항상 원본 배열의 길이만틈 return이 된다.
})

// filter
let filteredNumbers = numbers.filter(function(item){
    return item === 5; // 조건에 해당하는 것만 리턴됨
})

// find
let findNumbers = numbers.find(function(item){
    return item < 3; // 조건에 맞는 첫번째 값만 반환됨
})

 

[좋은 개발자의 비밀] 특강

개발은 혼자할 수없다! 협업!!!!

소통이 가장 중요하다.

실무가 중요하다! 경험해보지 않으면 모른다는 것. 혼자 백번 공부하는거보다 실전에 부딪혀보자.

미니프로젝트는 가능하면 무조껀 하면 좋다 ㅎㅎ

거기에 계속 추가로 develop되면 더더 너무 좋다

그외 개발자로서 가져가야할 덕목?등 좋은 말씀을 많이해주셔서 좋은시간을 가졌다

 

특강하고 Q&A 시간에 알려주신 TIP!

• 검색에 잘 걸릴만한 키워드로 TIL 제목 정하기!
• 소통이 중요하다. 좋은 말로 예쁘게 소통하기
• 이력서에서 포폴이나 자소서외에 특기가 있으면 +될 수 있다.
• https://www.codingzipsa.co.kr/ 특강 튜터님 블로그 ㅎㅎ

 

팀원분이 좋은 외부 모듈을 설치해서 매번 node에서 파일 실행하는 번거로움을 줄일 수 있는 방법을 알려주셨는데

설치가 잘안되서 좀더 확인을 해봐야겠다.

 

참고 자료: 

https://velog.io/@mainfn/Node.js-nodemon-%EC%82%AC%EC%9A%A9%EB%B2%95