(TIL 2-3일차) JavaScript

빡기·2020년 2월 11일

JavaScript TlL js

TIL(Today I Learned)

목록 보기

2/43

JavaScript란❔

넷스케이프 커뮤니케이션즈사(Netscape Communications)가 개발한 스크립트 언어
웹을 풍부하게 만들어주는 작고 가벼운 언어
객체 지향 언어
변수 자료형을 선언하지 않아 동적임
인터프리터식 해석

특징

String + Number를 하는 경우 무조건 String으로 강제 형변환

전위(++num) vs 후위(num++) 증감 연산자 할당순서의 차이 ❗❗

num++
변수에 먼저 값을 할당 한 뒤 증가
++num
숫자를 먼저 증가한 뒤 변수에 할당

함수선언식 vs 함수표현식 호이스팅의 영향 ❗❗

자바스크립트는 기본적으로 ES6에 추가 된 변수형인 let,const도 호이스팅에 영향을 안준다
함수선언식은 호이스팅이 되는 반면에 함수표현식은 호이스팅에 영향을 안 받는다

즉, var형태를 제외하고 나머지(함수 표현식 제외)는 전부 호이스팅 영향을 받지 않음❗❗

잠깐 알고가세요❗❗ 호이스팅이란❔

브라우저가 위치와 관계없이 js를 해석할때 맨위로 끌어 올리는 행위

문자열 함수 (String)

- 문자 포함 구별 및 반복 함수 (includes, startsWith, endWith, repeat)

const email = 'yealee.kim87@gmail.com';

console.log(email.startsWith('ye')); // true
console.log(email.endsWith('com')); // true
console.log(email.includes('@gmail')); // true

- 대소문자 구별하는 함수 (toUpperCase,toLowerCase)

let lastName = 'Yeri Kim';
let upperLastName = lastName.toUpperCase(); // YERI KIM
let lowerLastName = lastName.toLowerCase(); // yeri kim

- 문자열 안에 특정 문자열 있는지 체크 (indexOf)

let info = "JavaScript는 프로래밍 언어이다.";
let firstChar = info.indexOf("프로래밍");
console.log(info, firstChar);

if (firstChar !== -1) {     // firstChar !== -1 => 프로래밍 문구가 있다면으로 해석
  info = info.slice(0, firstChar) + "프로그래밍" + info.slice(firstChar+4, info.length);
}
// 출력 - JavaScript는 프로그래밍 언어이다

- 날짜 관련 함수 (new Date, getFullYear 등)

// ❗❗ 날짜의 기준이 되는 날은 1970년 1월 1일 ❗❗
let rightNow = new Date(); // 2019-02-18T00:45:06.562Z (GMT기준 시간)
let year = rightNow.getFullYear();
let month = rightNow.getMonth()+1; // 달은 0부터 시작이라 +1 해야함!!!
let date = rightNow.getDate();
let day = rightNow.getDay();
let currentHour = rightNow.getHours();
let currentMin = rightNow.getMinutes();
let time = rightNow.getTime();  // 시간초로 나타내줌

// 특정 날짜의 Date 확인 예시
let date1 = new Date('December 17, 2019 03:24:00');
let date2 = new Date('2019-12-17T03:24:00');
let date3 = new Date(2019, 5, 1);

- 수학(Math)관련 함수 (random, floor, round 등)

Math.random(); // 0.000000 ~ 9.999999 출력
Math.round(); // 반올림
Math.floor(); // 버림
Math.ceil(); // 올림

Math.floor(Math.random()*최대범위)+최소범위; // 랜덤 함수 최소 최대 범위 지정
Math.floor(Math.random()*(max-min+1))+min; // 예시

객체(Object)

let plan1 = {
  name: "Basic",
  price: 3.99,
  space: 100,
  transfer: 1000,
  pages: 10
};

프로퍼티 중복 X
프로퍼티는 어떤 타입이든 가능
객체를 정의한 후 프로퍼티 값 수정 및 추가 가능

객체 및 배열 순회 함수 (for in, forEach, for of, map)

- map 함수

// 문자열 배열에서 문자열 길이만 획득하기
var arr = ['foo', 'hello', 'diamond', 'A'];
var arr2 = arr.map(function (str) {
    return str.length;
});
console.log(arr2); // [3, 5, 7, 1]

map은 콜백 함수의 리턴을 모아서 새로운 배열을 만드는 것
기존 배열은 변경하지 않음

- forEach문

var items = ['item1', 'item2', 'item3'];

items.forEach(function(item) {
    console.log(item);
});
// 출력 결과: item, item2, item3

foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드
ES6부터 Map, Set 지원 가능
기존 배열이 수정 됨
return이 없지만 return을 선언하여 탈출 가능

- for in문

var obj = {
    a: 1,
    b: 2,
    c: 3
};

for (var prop in obj) {
    console.log(prop, obj[prop]); // a 1, b 2, c 3
}

객체 및 배열에 사용 가능
i를 0으로 초기화, 반복문이 몇번 돌지 내부적으로 결정

- for of문

Symbol.iterator 속성을 가지는 컬렉션에 적용
Symbol이란 ❓
ES6에서 새롭게 추가된 7번째 타입
변경 불가능한 원시 타입의 값 (원시 값은 객체를 제외한 string,number, undefined, null, Boolean)
충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용

var iterable = [10, 20, 30];

for (var value of iterable) {
  console.log(value); // 10, 20, 30
}

- for in vs for of 차이

for in 반복문 : 객체의 모든 열거 가능한 속성에 대해 반복
for of 반복문 : [Symbol.iterator] 속성을 가지는 컬렉션에 전용

var iterable = [3, 5, 7];
iterable.foo = "hello";

for (var key in iterable) {
  console.log(key); // 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (var value of iterable) {
  console.log(value); // 3, 5, 7
}

⭐객체 프로퍼티 접근 방식⭐

let difficult = {
  33: '숫자 형식도 되네',
  'my name': '스페이스 포함 가능',
  color: 'silver',
  키: '한글인 키는 따옴표가 없어도 되는군!!',
  '!키': '느낌표 있는 키는 따옴표가 필요하군',
  $special: '$는 없어도 되는군'
};

console.log(difficult.['33']); // 동시에 사용 불가
console.log(difficult.my name); // 객체로 바로 접근하는데 띄어쓰기 때문에 괄호로 묶어준다
console.log(difficult.color); // 올바른 sliver 출력
console.log(difficult.키); // 한글은 따옴표 없이 접근 가능
console.log(difficult.!키); // !는 괄호가 필요
console.log(difficult['!키']); // !때문에 괄호로 묶어줘서
console.log(difficult.$special); // $는 괄호 없어도 사용가능

⭐ 대괄호 vs dot ⭐

let name = '키';
console.log(difficult[name]); // 1 한글인 키는 따옴표가 없어도 되는군!
console.log(difficult.name); // 2 undefined

대괄호 접근 : 위의 내용 처럼 변수로 프로퍼티 접근 가능
dot 접근 : difiicult 객체 안에 name을 바로 접근하는 거라 Undefined 출력

❗❗❗ 둘의 가장 큰 차이는 변수로 접근 가능하냐의 차이

객체 안에 key, value 값 대입

- key 값 할당

//객체 생성 후 프로퍼티 추가1 (정적)
var person = {};
person.name = '홍길동';
person.age = 29;

정적으로 바로 접근시 키 값을 유동적으로 변경 불가 (항상 정해진 값)

//객체 생성 후 프로퍼티 추가2 (동적)
person["name"] = '홍길동';
person["age"] = 29;

test_obj = {a:1, b:2};
console.log(test_obj);

test_obj['aa'] = 11;
test_obj.bb = 22;
console.log(test_obj);

delete test_obj.a;
delete test_obj['b'];
console.log(test_obj);
------------------------
Object {a: 1, b: 2}
Object {a: 1, b: 2, aa: 11, bb: 22}
Object {aa: 11, bb: 22}

대괄호로 접근시 키 값을 동적으로 변경 할 수 있다

- value 값 할당


difficult[name] = '값 바꾼다';
console.log(difficult[name]); // 없는 name을 객체에 키 값으로 넣고 value로 '값 바꾼다'

difficult.color = '색깔'; // color는 현재 있으므로 수정 됨 difficult["color"] 도 같음
console.log(difficult.color);

console.log('생성전: ' + difficult.new); // undefined
difficult.new = '새로 추가된 프로퍼티';
console.log('생성후: ' + difficult.new); // "새로 추가된 프로퍼티"

중복 시 수정된 값으로 할당
없으면 새롭게 키값 쌍으로 할당

함수 스코프에 따른 코드 오염

global 변수를 선언하면 어디에서나 사용 가능 한 global namespace 보유
namespace : 변수 이름을 사용할 수 있는 범위
global 변수는 프로그램 종료 시 까지 생존
local 변수는 block이 끝나면 죽음

const satellite = 'The Moon';
const galaxy = 'The Milky Way';
let stars = 'North Star';

const callMyNightSky = () => {
  stars = 'Sirius';

  return 'Night Sky: ' + satellite + ', ' + stars + ', ' + galaxy;
};

console.log(callMyNightSky());
console.log(stars);

⛔ 오염의 예

stars이라는 global 변수 존재
callMyNightSky함수에서 새로운 변수를 선언하고 싶었는데 깜빡하고 let 키워드를 작성 X
callMyNightSky을 호출하면 stars 변수에 "Sirius"이 할당
global 변수였던 stars에 영향
다른 함수에서 global 변수인 stars을 사용하고 싶은데 값이 수정된 "Sirius"으로 사용

Local Storage: 해당 도메인에 영구 저장하고 싶을 때
Session Storage: 해당 도메인의, 한 세션에서만 저장하고 싶을 때. 창을 닫으면 정보가 날라감
Cookie: 해당 도메인에 날짜를 설정하고 그 때까지만 저장하고 싶을 때

사진 자료 및 사이트 출처

https://webclub.tistory.com/136
클래스 vs 함수 사진
https://www.quora.com/What-is-the-difference-between-sessionstorage-localstorage-and-Cookies
브라우저 데이터 공간 차이점 사이트
https://junspapa-itdev.tistory.com/22, http://b1ix.net/266
객체 안에 값 대입
https://jsdev.kr/t/for-in-vs-for-of/2938
배열 및 객체 순회

빡기

Front End. Dev

이전 포스트

(TIL 1일차) HTML+CSS

다음 포스트

(TIL 2-3일차) JavaScript

TIL(Today I Learned)

JavaScript란❔

특징

함수선언식 vs 함수표현식 호이스팅의 영향 ❗❗

잠깐 알고가세요❗❗ 호이스팅이란❔

문자열 함수 (String)

- 문자 포함 구별 및 반복 함수 (includes, startsWith, endWith, repeat)

- 대소문자 구별하는 함수 (toUpperCase,toLowerCase)

- 문자열 안에 특정 문자열 있는지 체크 (indexOf)

- 날짜 관련 함수 (new Date, getFullYear 등)

- 수학(Math)관련 함수 (random, floor, round 등)

객체(Object)

객체 및 배열 순회 함수 (for in, forEach, for of, map)

- map 함수

- forEach문

- for in문

- for of문

- for in vs for of 차이

⭐객체 프로퍼티 접근 방식⭐

⭐ 대괄호 vs dot ⭐

객체 안에 key, value 값 대입

- key 값 할당

- value 값 할당

함수 스코프에 따른 코드 오염

⛔ 오염의 예

사진 자료 및 사이트 출처

(TIL 1일차) HTML+CSS

(TIL 4-6일차) Instagram 클론 (HTML+CSS+JavaScript)

0개의 댓글

(TIL 2-3일차) JavaScript

TIL(Today I Learned)

JavaScript란❔

특징

함수선언식 vs 함수표현식 호이스팅의 영향 ❗❗

잠깐 알고가세요❗❗ 호이스팅이란❔

문자열 함수 (String)

- 문자 포함 구별 및 반복 함수 (includes, startsWith, endWith, repeat)

- 대소문자 구별하는 함수 (toUpperCase,toLowerCase)

- 문자열 안에 특정 문자열 있는지 체크 (indexOf)

- 날짜 관련 함수 (new Date, getFullYear 등)

- 수학(Math)관련 함수 (random, floor, round 등)

객체(Object)

객체 및 배열 순회 함수 (for in, forEach, for of, map)

- map 함수

- forEach문

- for in문

- for of문

- for in vs for of 차이

⭐객체 프로퍼티 접근 방식⭐

⭐ 대괄호 vs dot ⭐

객체 안에 key, value 값 대입

- key 값 할당

- value 값 할당

함수 스코프에 따른 코드 오염

⛔ 오염의 예

local Storage vs Sesstion Storage vs Cookie 차이점 ❗❗

사진 자료 및 사이트 출처

(TIL 1일차) HTML+CSS

(TIL 4-6일차) Instagram 클론 (HTML+CSS+JavaScript)

0개의 댓글