TIL #13 - JavaScript

배열 조작

요소 추가

arr[n] = "원하는 값"; - 배열의 원하는 순서에 값을 할당하고 싶을 때 사용한다.

push() - 베열 제일 뒤에 요소 추가한다.

unshift() - 배열 제일 앞에 요소 추가한다.

array형의 기본 내장 함수에는 push, unshift 등이 있다.

pop 함수

pop(); - 배열의 마지막 요소가 제거되고 요소의 값을 반환한다.

---

데이터 타입

• 기본 자료형 (Primitive)

  • String
  • Number
  • Boolean
  • Undefined
  • Null
  • Symbol (ECMAScript 6에 추가됨)

• Object(객체)도 있다.
  
  

typeof 연산자

• 값이나 변수의 데이터 타입을 알려줌
• 해당 연산자 사용 시 다음 문자열 중 하나를 반환함
  • "undefined" : 정의되지 않은 변수
  • "boolean"
  • "string"
  • "number"
  • "object"
  • "function"
    
    

typeof null

• typeof null -> "object"
• null 이라는 데이터 타입이 object로 반환
• null 은 빈 객체를 참조하고 있어서 그렇다.
  
  

Array 데이터 타입

• 배열은 확장된 개체이기 때문에 type은 "object"
  
  

1. Number (숫자)

• 연산이 가능하다.
• 산술 연산자를 사용한 연산들은 아래와 같이 작성한다.
• 더하기 (+)는 이항 연산자이다.
• 이항 연산자 중에서 산수를 하는 것이라 산술 연산자로 불린다.

1 + 1 // 더하기
2 - 1 // 빼기
2 * 4 // 곱하기
6 / 2 // 나누기

2. String (문자열)

• 따옴표(" ") 혹은 작은따옴표(' ')로 감싼 모든 표현을 뜻한다.
• 변수 선언, 길이 확인, 대문자 전환 등 여러 기능들이 있다.

// 문자열 데이터 타입 변수 선언
let name = "wecode";

// .length >> 문자열이 몇 글자로 되어 있는지 확인
name.length // 5

// .toUpperCase >> 문자열을 대문자로 출력
name.toUpperCase() // "WECODE"

// .indexOf >> 특정 텍스트의 포함 유무 및 위치 확인
name.indexOf('c') // 2
name.indexOf('j') // -1

*String과 Number를 더하면 String이 된다.

3. boolean

• true / false 오직 두 가지 값을 가진다.
• 조건문과 반복문에서 자주 사용된다.
• 다른 데이터 타입이 boolean 값으로 변환되는 여러 경우가 있다.

여러 데이터 타입의 boolean 값 변환

• true로 변환되는 값

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

• false로 변환되는 값

  • 문자열 : " " (빈문자열)
  • 숫자 : 0, NaN
  • 객체 : null
  • undefined
    
    

undefined

• 정의되지 않은 데이터 타입이다.
• 변수를 선언만 하고 값을 할당하지 않았다면 변수에 undefined 가 할당된다.
  ex) let msg;
  
  

null

• 데이터 타입 중 하나이다.
• 말그대로 아무것도 아닌 빈 객체를 가리키고 있어서 "object" 이다.
  
  

객체(Object)

• 객체는 키(Key)와 값(Value)의 조합으로 이루어져있다.
• 중괄호로 감싸진 key-value(property)의 형태이다.

const cat = {
	name : "나비",
	age : 2,
	favoriteFood : ['chicken', 'beef', 'fish']
}

String

String 함수 참고
https://www.w3schools.com/jsref/jsref_obj_string.asp

• 변수명.toUpperCase(); -> 대문자 전환

• 변수명.toLowerCase(); - > 소문자 전환

• 변수명.length -> 길이 체크

• 변수명.indexOf("찾을단어") -> 문자열을 찾아주는 함수. 있을 경우 몇 번째 글자인지 알려주고 없다면 -1이 나온다.

• 변수명.slice(잘릴 시작위치, 잘릴 끝위치) -> 해당 부분을 잘라 보여준다.

*핸드폰 번호 등과 같이 0으로 시작되는 경우 string형으로 저장해야한다.
let phoneNumber = "01012345678";

*NaN (Not a number)

- 오로지 숫자에만 사용되는 연산. string이어도 숫자 형태면 숫자로 변환해서 계산
'10'-'5' = 5, "10"-"5" = 5, "안녕하세요" - "하세요" = NaN

• string(number) + number = string
• string(number) - number, string(number) - string(number) = number

Number(숫자로 변환할 변수 / string);
parseInt(숫자로 변환할 변수 / string); 정수로 변환
parseFloat(숫자로 변환할 변수 / string);

숫자에서 string으로 변환

숫자/변수명.toString();

let 변수명 = 변환할 숫자 + "";

let 변수명 = 변환할 변수 - 0; -> 뺄셈 특성 때문에 숫자로 변한다.

---

기타

함수 인자는 4개 이상 x

1. 3개가 넘을 경우 가독성이 떨어진다.
2. 함수가 무거워진다.

return은 조건문, 함수 종료됨

if문의 가독성이 떨어지는 문제점을 해결하기 위해 early-return을 사용하기도 한다.