((TIL)) 프리온보딩 백엔드 사전스터디 : Javascript 1

intro

할게많아졌다. 월/목은 CS스터디를 하기로 했고 화/금은 자바스크립트 스터디를 하기로 했다. 오늘까지 과제였던 이력서도 작성해서 위코드 과제로 제출했다.. 정신없이 흘러가겠다 싶었는데 10월부터 시작한든 프리온보딩 백엔드 과정도 신청했다. 아무래도 위코드에서는 파이썬, 장고로 프로젝트를 진행했기 때문에 노드를 더 공부하고싶었는데 잘됐다 한달만 더 공부하자 싶었다. 빨리 취직하고 싶지만, 공부진행하면서 취준 같이 진행하면된다!! 주 목적을 잊지말자 백엔드 개발자 아자아자!

사전 스터디로 자바스크립트 레플릿을 안내받았다. 10월 4일부터 백엔드 과정이 시작이라 시간이 별로 없다..!! 지금 인스타그램 만들기도 진행중인데, 넷 다 하려면 정신없겠다(CS스터디, 자바스크립트 스터디, 레플릿, 인스타그램). 알차게 보내자!!

---

🔥 Variable

01. 변수의 사용

데이터를 저장해두가 필요할 때 마다 불러서 사용해야 할 때 변수라는 개념을 사용한다.

02. 변수 이름 생성시 주의사항(naming convention)

• 한 파일에 같은 이름의 변수를 중복사용할 수 없다.
• 대소문자를 구분한다(myName != MyName)
• 변수 이름을 정할 때 첫번째 문자는 글자나 밑줄(_), 달러기호($)로 시작해야한다.
• function, const와 같이 예약어는 변수로 사용할 수 없다.

파이썬에서는 snake_case 표현법을 사용했는데(my_name)
자바스크립트에서는 camelCase(myName) 표현법을 사용한다.

03. let, const

옛날 자바스크립트에서는 var라는 키워드로만 변수선언이 가능했는데,
ES6버전에서부터 var의 문제점을 보완한 let과 const키워드가 추가되어 var는 잘 사용하지 않게되었다.
let과 const는 아래와 같은 차이점이 존재한다.

• let : 변수 값 수정 가능, 값 수정 시 변수 앞에 let 키워드는 쓰지 않는다.
• const : 변수 값 수정 불가

let nickName = '백엔드개발자';
nickName = '노드개발자';

 

🔥 Function 

01. 함수

하나의 특정한 작업을 수행하도록 설계된 독립적인 코드 블록이다.

02. 함수의 생성 및 호출

함수를 정의만 하고 호출하지 않으면 함수는 실행되지 않는다.

function checkCorrect() {
  const hi = "안녕하세요";
  
  return hi;
}

checkCorrect();

03. return

모든 함수는 결과를 반환할 수도 있고 안할 수도 있다.
함수가 반환을 생략하면 undefined라는 값이 반환된다.

04. 매개변수(parameter)와 인자(argument)

함수이름 옆의 () 소괄호 내부에 적혀있는 아이들을 매개변수, 파라미터라고 부른다.
매개변수는 외부로부터 들어온 값을 담아 함수 내부에서 사용할 수 있도록 하는 변수의 역할을 한다. 

function getName(name) {
  return name + '님';
}

위의 함수에서 소괄호 내부에 있는 name은 매개변수(파라미터)라고 부른다.
한번 만든 함수는 여러번 호출할 수 있다. 아래와 같이 호출해보자.

const result2 = getName('개발자'); // '개발자님' 출력
const result3 = getName('디자이너'); // '디자이너님' 출력
const result4 = getName('기획자'); // '기획자님' 출력

getName함수의 매개변수명은 name이였고, 실제 함수를 호출할 때는 개발자,디자이너,기획자 등의 다른 값을 넣어 호출했다.
이 때 개발자와 같은 실질적인 값을 인자라고 부른다. 

정리하자면, 매개변수(파라미터)는 외부로 부터 들어온 값을 함수 내부에서 사용할 수 있도록 전달해주는 변수의 이름이고,
인자(아규먼트)는 그 자리에 들어가는 실질적인 값을 뜻한다.

 

🔥 Math Expressions 

01.++

아래 코드의 실행 결과는 어떻게 될까? 둘다 2가 찍힐 것 같다.

let num = 1;
let newNum = num++;
console.log(num);
console.log(newNum);

땡- 정답은 2,1이다.

첫번째 줄로 인해 num변수에 1이 할당되었다.
두번째 줄에서 newNum이라는 변수에 num 1이 할당되었다.
그리고 나서 num++ 이 실행되서 num은 2가 된다.

따라서 콘솔에는 2, 1이 찍힌다. 
newNum에도 2을 할당하고 싶다면 코드가 어떻게 변해야할까?

let num = 1;
let newNum = ++num;
console.log(num);
console.log(newNum);

 

🔥 텍스트 + 숫자

• 서로 다른 type인 string과 number를 더할 때는 주의해야한다.
• string + number는 항상 string이 된다.
• 자바스크립트는 형변환 오류를 내지 않고, 문자형으로 더하기 때문에 유연하다고 한다.

console.lo("2 더하기 2는 " + 2 + 2);
// 실행 결과는 2 더하기 2는 22

 

🔥 if문

  if ('A조건') {
    // A조건이 맞으면 여기만 실행
  } else if ('B조건') {
    // A조건 불만족, B조건이 맞으면 여기만 실행
  } else if ('C조건') {
    // A,B조건 불만족, C조건이 맞으면 여기만 실행
  } else {
    // 위의 조건이 모두 안 맞으면 실행
  }

 

🔥 비교연산자

비교연산자의 종류에는 동치연산자(==, ===, !=, !==)와 관계연산자(>, <, >=, <=)가 있다.

• 일치연산자 ===는 값과 타입이 모두 같은지를 비교하는 엄격한 동등 비교 연산자이다.
  동등연산자 ==는 느슨한 비교연산자다. "3" == 3을 비교하면 true를 반환한다. 

 

🔥 논리연산자

||, &&

 

🔥 Array

많은 데이터의 수를 하나의 변수로 관리할 때 필요한 자료구조가 배열이다. 배열은 대괄호([ ])로 감싸져있다.
요소(element)와 요소 사이는 쉼표로 구분하며 요소 자리에는 string, number, array등 다양한 데이터 타입이 가능하다.
배열의 index는 0부터 시작한다.

const array1 = ['서울', '대전', '부산'];

파이썬에서는 리스트의 마지막 값을 인덱스 -1번을 사용해 추출이 가능했다. 하지만 자바스크립트는 안된다는 점 유의! 
마지막 인덱스를 -1로 추출하지 못하니까.. 배열의 길이를 구한 뒤 -1하는 법을 사용했다.

function addFirstAndLast(myArray) {
  if (myArray.length === 1) {
    return myArray[0]
  } else if (myArray.length === 0) {
    return 0
  }
  return myArray[0] + myArray[myArray.length-1]
}

 

🔥 for문

const count = 1;

for (let i = 0; i < 6; i++) {    
  count = count + 1;
}

 

🔥 배열 조작하기

• array.push() : 배열의 맨 마지막에 요소를 추가
• array.unshift() : 배열의 맨 앞에 요소를 추가
• array.pop() : 배열의 마지막 요소가 제거되고, 해당 요소의 값을 반환함

function divideArrayInHalf(array) {
    const result = [];
  
    for (i = 0; i < 5 ; i++ ) {
      let a = array.pop()
      if (a <= 10) {
        result.unshift(a)
      } else {
        result.push(a){
      }
    }
    return result
}

 

🔥 데이터 타입

기본자료형(primitive)

1. string : 문자열
2. number : 숫자
3. boolean : 참/거짓
4. undefined : 선언 후 값을 할당하지 않은 변수나 인수에 자동으로 할당된다.
5. null : 존재하지 않거나 유효하지 않은 object또는 주소를 의도적으로 가리키는 참조를 나타낸다.
6. symbol : 값으로 익명의 객체 속성을 만들 수 있는 특성을 가진 원시 데이터 형식

typeof 연산자를 통해 값, 변수의 데이터 타입을 식별할 수 있다.

• typeof null의 결과값은 "object"
  null이라는 데이터 타입은 빈 객체를 참조하고 있기 때문이다.
• typeof []의 결과값은 "object"
  자바스크립트에서의 배열은 확장된 객체이기 때문이다.

truthy / falsy

• truthy : 비어있지 않은 모든 문자열, 0이 아닌 모든 숫자, 모든 객체({}, [] 포함)
• falsy : 빈 문자열(""), 0, NaN, null, undefined

undefined

말 그대로 값이 정의되지 않은 데이터의 타입이다.
let, const키워드를 사용해서 변수를 정의할 때 초기화하지 않으면 해당 변수에 undefined가 할당된다.

null

typeof null의 결과값은 object라고 나온다. 말 그대로 아무것도 아닌 빈 객체를 가리키고 있으므로, 어떤 값이 의도적으로 비어있음을 표현할 때 사용한다.

object

객체는 키와 벨류의 조합으로 이루어진 데이터다. 

 

🔥 string

대소문자 비교

• string.toUpperCase() : 모두 대문자로 변경
• string.toLowerCase() : 모두 소문자로 변경해주는 string에서 제공하는 기본 메소드

문자열 찾기

• string.indexOf() : 특정 문자열이 포함되어있는 지 확인하고 있다면 순서 반환, 없다면 -1 반환

문자열 자르기

• string.slice(잘리는 시작위치, 잘리는 끝위치) : 시작부터 끝 위치 이전까지 자른다.

 

🔥 string -> number, number -> string

• Number() : string에서 number로 형변환 (parseInt(), parseFloat() 있음)
• number.toString() : number에서 string으로 형변환