1. 코드 구조
- 문 - 어떤 작업을 수행하는 문법 구조와 명령어
- 서로 다른 문은 세미콜론으로 구분
alert('Hello');alert('World');- 코드의 가독성을 위하여 각각의 문은 다른 줄에 작성
- 세미콜론
- 줄 바꿈이 있을 시 생략 가능하고 암시적 세미콜론으로 해석
- 대부분의 경우 줄 바꿈은 세미콜론을 의미하지만 "대부분의 경우"가 항상을 의미는 아님
- 주석
- 무슨 일이 왜 벌어지고 있는지를 설명해주는 역할
- 한줄의 주석 //
- 여러줄의 주석 /**/
- 주석안의 내용은 무시 - 코드가 실행 안됨
2. 변수
데이터를 저장할 때 쓰이는 "이름이 붙은 저장소"
변수는 바뀔 수 있는 값
- let 을 통하여 변수를 생성
let message;- 할당 연산자(=)를 사용해 변수 안에 데이터 저장
let message;
message = 'hello'; // 문자열을 저장합니다.- 변수명을 통해 문자열에 접근
let message;
message = 'hello';
console.log(message); //'hello 출력'- 여러 스타일의 변수 선언
let message = 'hello'; //변수를 정의하고 값을 할당
let user = 'Hyun', age = 27, message = 'hello'; //한 줄에 여러변수 선언 가능
let user = 'Hyun',
age = 27,
message = 'hello'; //쉼표 후행
let user = 'Hyun'
,age = 25
,message = 'hello'; //쉼표 선행- 변수 명명 규칙
- 변수명에는 오직 문자와 숫자,기호($,_)만 들어갈 수 있다.
- 첫 글자는 숫자가 될 수 없다.
- 여러 단어를 조합하여 변수명을 만들 땐 camelCase 사용 ex)myPhone
3. 상수
한 번 선언하고 값이 바뀌지 않는 값
- const 를 사용하여 변수 선언
const myBirthday = '1997.08.22';- 상수는 재할당 할 수 없으므로 변경 할 시 에러 발생
const myBirthday = '1997.08.22';
myBirthday = '01.01.2001'; // error, can't reassign the constant!- 대문자 상수
const COLOR_RED = '#f8f7f8';
let color = COLOR_RED;
console.log(color); //#f8f7f8-
대문자로 상수를 만들었을 때 장점
COLOR_RED 는 '#f8f7f8' 보다 기억하기 쉽다.
COLOR_RED 가 더욱 유의미 하기에 코드 가독성이 증가 -
대문자 상수는 '하드 코딩한' 값의 별칭을 만들 때 사용
4. 변수 var let를 비교해보자
4-1. 변수 선언 방식의 차이점
var에서의 변수 선언 방식
var user = 'Hyun';
console.log(user); // Hyun
var user = 'DongHyun';
console.log(user); // DongHyun유연한 변수 선언 방식을 가지고 있으나, 이는 자칫 잘못하면 원하는 결과가 나오지 않을 수 있다.
let에서의 변수 선언 방식
let user = 'Hyun';
console.log(user); // Hyun
let user = 'DongHyun';
console.log(user); // TypeError: Duplicate declaration "user"중복 선언으로 인한 오류가 발생하고 있다
변수 선언 방식에서 알 수 있는 점은
let은 재선언이 되지 않고,var는 재선언이 가능하다.
4-2. 호이스팅에서의 차이점
호이스팅(Hoisting) - 변수 및 함수 선언을 현재 스코프의 최상단으로 옮긴 것 처럼 동작하는 특성이다.
ES6에서 도입된 let, const는 블록 스코프를 가지며 호이스팅 동작이 var와 다르다.
어떻게 다른가?
console.log(name); //undefined
var name;
console.log(name); // Uncaught ReferenceError: name is not defined
let name;var에서의 호이스팅
var로 선언된 변수는 스코프(함수, 전역)안에서 호이스팅이 된다.- 호이스팅 동작은 선언 부분만 끌어올리며, 값이 초기화 되지 않으면
undefined로 초기화된다. - 따라서 변수를 선언하기 전에 사용하더라도 에러가아닌
undefined가 출력된다.
말이 조금 어려운 것 같아서 예를 들어보자
console.log(name); // undefined
var name; // 변수를 선언 (그렇지만 할당은 하지 않음)
console.log(name); // undefined (변수 초기화되지 않았기에)
name = 'Hyun'; // 변수 초기화(값을 할당 함)
console.log(name); // Hyunvar로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다,
let에서의 호이스팅
let로 선언된 변수는 선언, 초기화 단계가 분리되어 진행된다.
console.log(name); // ReferenceError: name is not defined
let name; // 초기화 단계가 실행된다.
console.log(name); // undefined
name = 'Hyun'; // 값을 할당 함
console.log(foo); // 14-3. 변수는 이렇게 써라
변수 선언은 const를 지향하고, 재할당이 필요한 경우는 let을 사용하는 방향이 좋다.
변수 선언에서 var를 지양하자.
5. 데이터 타입
변수나 상수를 선언하게 될 때, 숫자 외에도 다른 값들을 선언 할 수 있다.
- 숫자형(Number) - 숫자
let value = 1;- 문자형(String) - 텍스트, 작은 따옴표, 큰 따옴표로 감싸서 선언
let name = 'Hyun';
let text = "hello";- 불린형(Boolean) - true, false 두 종류의 값을 가진다.
let test = true; // 참
let lading = false; // 거짓
null 과 undefined - 없음의 의미- null 과 undefined - 없음의 의미
const water = null; // 알 수 없는 값, 이 값이 없다 라고 선언 할 때
let criminal;
console.log(criminal) // undefined 할당 되지 않은 값
null- 우리가 없다고, 고의적으로 설정한 값
undefined- 우리가 설정을 하지 않았기 때문에 없는 값
5-1. 숫자형 다루기
Math.floor()- 아래로 가장 가까운 정수로 내림Math.ceil()- 소수점 첫째 자리 올림Math.round()- 소수점 첫째 자리 반올림Math.trunc()- 소수점 무시
console.log(Math.floor(3.2)); // 3
console.log(Math.ceil(3.2)); // 4
console.log(Math.round(3.2)); // 3
console.log(Math.trunc(3.2)); // 3
console.log(Math.floor(-3.7)); // -4
console.log(Math.ceil(-3.7)); // -3
console.log(Math.round(-3.7)); // -4
console.log(Math.trunc(-3.7)); // -3
console.log(Math.floor(2.34)); // 2
console.log(Math.ceil(2.34)); // 3
console.log(Math.round(2.34)); // 2
console.log(Math.trunc(2.34)); // 2isNaN, isFinite
isNaN(value)- 인수를 숫자로 변환한 다음NaN인지 테스트
console.log( isNaN(NaN) ); // true
console.log( isNaN("str") ); // trueisFinite- 인수를 숫자로 변환하고 변환한 숫자가NaN/Infinity/-Infinity가 일반 숫자인 경우true반환
console.log( isFinite("15") ); // true
console.log( isFinite("str") ); // false, NaN이기 때문
console.log( isFinite(Infinity) ); // false, Infinity이기 때문parseInt와 parseFloat
parseInt- 문자열을 정수로 변환
console.log(parseInt("100px")); // 100
console.log(parseInt("100.32")); // 100
정수를 반환하며 소수점 이하의 값은 무시
parseFloat- 문자열을 부동 소수점 숫자로 변환
console.log(parseFloat("12.3px")); // 12.3
console.log(parseFloat("12.3.4")); // 12.3, 두 번째 점에서 숫자 읽기 멈춤
부동 소수점 값을 반환하며 정수와 소수 부분을 모두 유지
5-2. 문자열 다루기
str.length
length프로퍼티에는 문자열의 길이가 저장된다.
console.log("asbd".length) // 4
console.log("as/2".length) // 4"a"(1), "s"(2), "/"(3), "2"(4) -> 4가 나온다.
str[pos]
str[pos]특정 위체 있는 글자에 접근하기
let str = "Hyun";
// 첫 번째 글자
console.log( str[0] ); // H
// 마지막 글자
console.log( str[str.length - 1] ); // n위치는 0 부터 시작하고 length를 이용하여 마지막 글자를 알아낼 수 있다.
문자열의 불변성
문자열은 수정할 수 없다.
let str = "Hyun";
str[0] = "h"; // TypeError: Cannot assign to read only property '0' of string 'Hyun'
console.log( str[0] ); 그렇기에 새로운 문자열을 만들어서 할당하는 방법으로 바꿀 수 있다. 다음은 예시이다.
let str = "Hyun";
str = "h" + str[1] + str[2] + str[3];
console.log( str );그럼 문자열이 더 길어지면? 코드가 더 복잡해 질 것이다 다음은 문자열 추출을 통해 코드를 변경해보자
let str = "Hyun";
str = "h" + str.substring(1); // 또는 str = "h" + str.slice(1);
console.log(str);특정 구간의 문자열 추출 후 문자열 수정
대·소문자 변경하기
to.LowerCase(),toUpperCase()를 사용하여 대->소문자, 소->대문자로 변경
console.log( "DongHyun".toUpperCase() );
console.log( "DongHyun".toLowerCase() );
console.log( "DongHyun"[2].toLowerCase() ); // 또한 하나의 케이스만 변경 가능
부분 문자열 찾기
str.indexOf(substr, pos)메서드를 사용하기
let str = 'Widget with id';
console.log( str.indexOf('Widget') ); // 0, str은 'Widget'으로 시작함
console.log( str.indexOf('widget') ); // -1,
console.log( str.indexOf("with") ); // 7,
console.log( str.indexOf("id") ); // 1, 이쪽 부분 이해가 안됨 id는 왜 1이고 with는 7인지
부분 문자열 추출하기
str.slice(start [, end])메서드를 사용하기
문자열의start부터end까지 (end는 미포함)
let str = "HappyBirthday";
console.log( str.slice(0,5) ); // Happy
console.log( str.slice(2) ); // ppyBirthday
console.log( str.slice(-4,-1) ); // hda여기서 알 수 있듯이 end가 없으면 끝까지 반환 음수면 끝에서 부터 카운트
아자자자