자바스크립트 2일차

string 타입

문자열 리터럴

• ''
• ""
• backtick(backquote)

• 따옴표는 표기법일 뿐, 실제 저장되는 값에 영향을 미치지는 X.
  • ‘’ 안에 “”는 쓸 수 O
  • “” 안에 ‘’는 쓸 수 O
  • ‘’안에 ‘’는 쓰면 X.
  • “”안에 “”는 쓸 수 X.
• -> 서로 다른 따옴표는 안에 중첩되서 자유롭게 쓸 수 있다.

템플릿 리터럴 (Template Literal)

• ${} 변수 안에 들어있는 값이 문자열의 값으로 바꿔치기 됨.
  • 동적으로 삽입하고 싶을 때 사용한다.
  • 템플릿은 빈칸을 만들어두고 삽입할 때 사용하는 거니까 템플릿 리터럴이라고 부른다.
  • 여러 줄로 이루어진 문자열을 쉽게 표현할 수 있다.
  • 이 외의 경우에는 ‘’나 “”를 사용한다.

const name1 = "Foo";
const name2 = "Bar";
const sentence = `${name1} meets ${name2}!`;
console.log(sentence);

`hello
world
hello
javascript!
`;

// 일반적인 문자열 리터럴로는 아래와 같이 해야 합니다.
("hello\nworld\nhello\njavascript!\n");

Escape Sequence

• 잠깐 문자열 문법에서 탈출해서 표기를 한다는 뜻
• \ 하나를 넣었는데 잘 안될 경우, \ 를 넣어볼 것.(\ 하나 넣으면 잘 안될 때가 있음.)

• \r\n: 윈도우 개행문자
• \n: 맥, 리눅스 개행문자
  • 운영체제에 따라 개행문자가 다르기 떄문에 협업할 때 문제가 생길 수 있다.
    (프로젝트 전에 통일할 필요가 있다.)

• ''안에 개행문자를 넣고 싶다면 \n을 쓰자.

• 유니코드 문자는 Unicode Code Point를 가지고 문자를 넣을 수 있다.

• ‘\uac00’로 ‘가’를 입력하든지 ‘가’ 문자열로 입력하든지 같은 것임.
• 이모티콘도 이제 유니코드에 포함되면서 정식 문자로 인정 받음.

• \uXXXX: 4자리수 유니코드 문자
• \u{X...}: 5자리수 유니코드 문자

console.log("\u{1F435}"); // 🐵

• 연산에서 문자열이 하나라도 들어있다고 해서 다 문자열로 변환되는 게 X.
• 문자열 이어붙이기를 할 때는 주의해야 함.
• 이럴 때는 템플릿 리터럴을 사용하는 것이 좋다.

"number" + 1 + 3;
// => 'number13' 덧셈은 왼쪽부터 계산되니까 'number' + 1 먼저 계산됨.
1 + 3 + "number";
// => '4number' 연산 순서만 바뀌었는데 숫자 덧셈 계산이 먼저 일어나서 4가 되고 뒤에 문자열 'number'가 붙는다.

• 부등호로 문자열을 비교하면 유니코드 코드포인트의 크기를 기준으로 비교를 한다.
• 사전순 비교를 하고 싶을 때는 localeComapare 메서드를 사용한다.
• .localeComapare()
• 문자열을 배열로 바꾸기

[...'hello'];
<!-- ['h', 'e', 'l', 'l', 'o'] -->

• (최근에 추가된 기능). 객체나 배열에 대해서도 쓸 수 있는 연산자. 쓰임이 많음.

MDN

MDN 문서를 읽을 때 주의할 점

• 번역의 품질이 굉장히 떨어지는 경우가 있음.
• 번역된 버전이 옛날 버전인 경우를 주의해야 함.
• 되도록 영어 버전으로 읽는 게 좋다.
• 한국어 번역이 좋지 않을 경우 -> 영어쪽으로 가서 번역기로 돌려서 비교해보면서 읽어볼 것.

MDN

• 빠르게 mdn 문서에 접근하고 싶을 때: https://devdocs.io/
• 개발 문서에서 사용하는 영어 문서에 사용되는 영어 단어나 문법은 많지 않다.
• 읽는 연습을 꾸준히 할 것.

속성 및 메소드

• 공백도 문자열로 취급함.
  ‘hello javascript’.indexOf(‘java’); ‘hello javascript’.indexOf(‘python’);

• 예전에는 indexOf의 결과값이 -1인지 아닌지를 판별함으로써 문자열을 포함하고 있는지 여부를 판단했으나,
  includes 메소드가 나오면서 includes로 판별함.

• 문자열의 일부를 잘라낸 새 문자열 생성하기

"hello".slice(2, 4); // 'll'

• 틈에다가 번호를 매긴다고 생각하면 쉽다.
• 끝까지 자르고 싶다면, 뒷자리 인수를 안주면 됨.

-"hello".slice(2); // 2번째 자리부터 끝까지 자르겠다.

• slice 메소드는 원본 문자열을 변경하지 X!

"abc@gmail.com".split("@")[0];
// => 'abc'.split한 후에 다 배열이기 떄문에 바로 뒤에 대괄호로 index 번호를 주면 배열안에 있는 값을 가져올 수 있다.

• split은 원본 데이터를 변경하지 X.

• toLowerCase, toUpperCase
  • 대소문자 관계없이 비교하고 싶을 때 주로 사용함.
  • 게시물 검색 기능에서 사용자가 소문자를 입력했다고 해서 대문자로 된 게시물을 보여주지 않으면 안되므로

유니코드와 UTF-8, UTF-16

• 문자열은 JavaScript 내부적으로 UTF-16 형식으로 인코딩된 값으로 다뤄진다.

• 유니코드와 UTF-8을 헷갈리면 안됨!

  • 유니코드 - 문자 정보 데이터베이스, 문자 집합, 문자 인코딩 등 전 세계의

  • UTF-8은 인코딩 방식. 유니코드를 위한 가변 길이 문자 인코딩 방식 중의 하나임.

  • 컴퓨터 내부적인 메모리 상에 저장할 때는 프로그래밍 해석기 안에서 계산을 할 때는 UTF-16으로 하는 게 UTF-8보다 더 속도가 빠름.
    (UTF-8처럼 압축하는 게 아니라 그대로 저장하므로)

  • 웹에서는 UTF-8을 사용하는 게 약속임.

• 유니코드가 실무에서 중요한 건 아니지만, 면접에서 종종 물어봄.

• 유니코드가 무엇인지
• UTF-8과 UTF-16의 장단점

boolean 타입

논리연산자

• !true
  • not ture라고 읽음.

• !false

  • not false라고 읽음.

• 긴 식 앞에 !를 사용할 수 있다.

삼항 연산자 (ternary operator)

• if else구문보다 축약된 느낌.

const result = if (true) {
    1
} else {
    2
}

const result = true ? 1 : 2;

• if로 둘러싸여진 전체는 표현식이 X.

• 삼항연산자는 표현식임.

• if else구문에는 여러 개의 명령이 올 수 있지만,
  삼항연산자에는

• 여러 개의 명령이 올 수 X.
• 특정 조건을 만족할 때 어떤 결과값을 바로 반환하고 싶다. -> 삼항연산자 사용

• 특정 조건을 만족할 때 여러 개의 명령을 실행하고 싶으면 -> if else 구문 사용

• react할 때 삼항연산자를 많이 사용함.

연산자 우선순위 (Operator Precedence)

• &&와 ||에는 우선순위가 있기 떄문에 주의해야 함.
• 이 우선순위 때문에 버그가 생길 수 있음.

논리 연산의 여러 가지 법칙

!!a === a;

• not을 2번 붙이면 원래대로 돌아옴

// 분배 법칙

* a || (b && c) === (a || b) && (a || c);
* a && (b || c) === (a && b) || (a && c);

• 우변에 잇는 식을 짧게 코드를 사용하고 싶을 때 좌변에 있는 식을 사용함.

• 논리 연산의 여러 가지 법칙들을 표를 그려서 확인해보기

truthy & falsy

• true로 취급되는 값: truthy

• false로 취급되는 값: falsy

• falsy로 취급되는 값 꼭 외울 것! 이 외의 모든 값들은 truty이다.

• falsy로 취급되는 값
  • false
  • null
  • undefined
  • 0
  • NaN
  • ''

• cf) truthy에는 객체, 배열 등도 다 포함됨. (심지어 배열이 비어있더라도 truty임. )

const input = prompt("이름이 무엇인가요?")
if (input) {
<!-- truthy와 falsy의 성질을 이용해서 if의 조건식 부분에 input은 truethy라는 성질을 이용해서 짧게 코드를 줄일 수 있음.  -->
  alert(`안녕하세요, ${input}님!`)
} else {
  alert('이름을 입력해주세요.')
}

// if (input.length > 0) {
//   alert(`안녕하세요, ${input}님!`)
// } else {
//   alert('이름을 입력해주세요.')
// }

• truthy와 falsy의 성질을 이용하면 편하지만, 논리의 허점이 생길 수 있다.
• 자바스크립트는 타입 체크를 하지 않는 언어임.

function add(x, y) {
  if (typeof x === "number" && typeof y === "number") {
    return x + y;
  } else {
    throw new Error("x 혹은 y의 타입이 number가 아닙니다.");
  }
}

javascript의 타입을 체크하는 방법

• 매번 이렇게 타입 체크하는 조건식을 쓸 수 없으므로 요즘은 타입스크립트를 많이 사용함.
• 타입스크립트는 타입 체크가 되는 자바스크립트의 확장 언어임.
• 대개 실무에서는 타입 스크립트를 많이 사용한다.
• throw하면 에러가 나면서 나머지 코드가 실행되지 X.

• 정적 타이핑 언어(statically-typed language)
  • c, c++, java 등
• 동적 타이핑 언어(dynamically-typed language)
  • javascript, python, ruby등

다른 타입의 값을 진리값으로 변환하기

!"hello"; // false
!!"hello"; // true
// 'hello'가 truthy이기 때문에(true로 취급되었기 떄문에)

!NaN; // true
!!NaN; // false

• toString: 숫자를 문자열로 변환하는 메소드

//  if (str.includes('3' || '6' || '9')) {
//  } 틀린 것임.

• ‘3’이 truthy이기 떄문에 결과값이 ‘3’으로 나와버림.
  따라서 조건식을 이렇게 쓰면 X!!.