선택n집중

자바스크립트에서 가장 큰 목적은 무엇이였을까 ?html에서 구조를 , CSS에서 모양을 만들었다면,자바스크립트를 통해 동적인 액션을 구현한다는 것이다. 이 동적인 액션들이 내가 원할때 실행되어야하고 , 원하지 않을때 실행되지 말아야하며연산을 하는 도중에 값이 도출될 수 없듯 일에 순서와 절차를 만들어 줘야한다. 하지만 자바스크립트는 현재 어떻게 움직이고 있을까 ?상단부터 하단으로 순차적으로 읽어 들어가지만,여러가지의 함수나 실행이 어느 한 로드가 틀어지게 된다면 실행이 얽힐 수 있을것이다. 예를들어 여러개의 setTimeout 함수를 실행시킬때전부다 1초의 시간을 준다면 어떻게 됬을까 ?로드에 맞춰 실행 시작하면서 , 모든 함수가 로드 후 1초후에 실행이 마쳤다.그 말은 즉, 함수의 실행 시점이 같다는 ..

구조분해 할당이란 구조분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담는 표현식이다.  객체 구조분해 할당  let sandwich = { bread:"더치 크런치", meat:"참치", cheese:"스위스", toppings:["샐러리","토마토","머스터드"] }sandwich 라는 객체가 있다.이 속성값을 변수에 저장해보자. let { bread, meat } = sandwich; console.log(`** before => ${bread}, ${meat}`);let {bread 와 meat} 는 변수 bread 와 meat 이다.속성과 변수명이 같다면 , 그에 속성값을 할당 받을 수 있다. 추후에 ..

this ?자바스크립트에서는 this 가 어디에서 사용되느냐에 따라 달라진다.사용처가 어디인지 그 위치에 따라 this 가 가르키는 것이 달라지기 때문에 유의해서 사용해야한다. 일반 함수에서의 this 는 주체가 되는 객체를 가르키지만,화살표 함수의 this 는 window 객체를 가르키게 되기 때문에 ,undefined 를 반환한다.화살표 함수 화살표 기호를 활용하여 간단하게 함수를 정의할 수 있으며 ,이름이 없고 this를 활용할 수 없다.메서드에서 화살표 함수가 지원되지 않았지만 , ES6부터 지원이 되게 되었다. -매개변수가 없는 경우 : 괄호 생략 불가능let foo = () => console.log('bar'); // let foo = function() { console.log('..

비정상적 동작에 대한 처리.foo(); 라고 있지도 않는 함수를 실행시켰다면 , 함수 실행 구문전까지 실행되다가 멈춘것이 확인이가능하다. 자연스럽게 실행의 흐름을 만들기 위해서try ....catch 의 구문을 사용한다.try 안의 반복문과 반복문안의 try 를 구분해보자. -반복문 안의 try let num = [0, 25, 100, 99, 111]; // => 기본구문 for (let a of num) { try { if (a == 0 || a > 100) { throw new Error(`숫자가 0이거나, 100보다 큽니다.`); }else { console.log(`${a}*${a} = ${a*a}`); } ..

Set 이란 ?value 값을 저장하고 , 중복을 허용하지 않는 컬렉션이다.중복일 경우 중복값은 인지하지 않는 특징을 지녔다.대소문자를 구분해 대문자 소문자는 다른 값으로 인지한다.값의 순서가 인지되지 않는다. 대체 Set , 왜사용하는걸까 ?한마디로 Set 는 , 순서가 없고 , 중복되지 않는 데이터의 집합이라고 할 수 있다. 배열과의 차이점을 인식하여야 하는데,배열은 데이터를 순서 있게 저장하고 , 순서를 알고 있기에 인덱스를 통한 접근이 가능하다.값이 중복되더라도 배열은 인덱스가 다르기 때문에 저장이 가능하다. Set 객체의 메서드요소 추가: Set.add(value)요소 일부 삭제: Set.delete(value)요소 존재 확인: Set.has(value)요소 갯수 확인: Set.size요소 전체..

자바스크립트의 객체는 여러형태의 데이터를 손쉽게 묶을 수 있는 편리한 자료구조이다.ECMA 6에서 추가된 맵의 자료구조형태가 추가되었는데,ECMA6 에서 변수 var 에서 let 과 const가 추가된 배경과 비슷하다.객체에서는 문자열 또는 심볼의 프로퍼티를 사용할 수 있었는데,맵객체에서는 함수나 객체를 포함하고 , 숫자형태를 제외한 모든 형태의 프로퍼티가 가능하다.맵은 키가 있는 데이터를 저장한다는 점에서 객체와 유사하지만 다양한 형태의 프로퍼티가 가능하다는 점이 차이가 크다. 객체처럼 . 이나 [] 로 접근할 필요 없이 메소드로만으로도 프로퍼티를 수정하거나 조회할 수 있다.객체는 속성값이 얼마나 있는지 조회할 수 없으나 Map은 속성의 갯수를 파악할 수 있다(Map.size)객체는 속성이 같을 떄 충..

map(요소 , 인덱스 , 배열전체) 순회 메서드→ 원본 안바뀜 주어진 배열의 값을 재정의 할 때 사용하는 방법ECMA에는 "주어진 배열의 값들을 인덱스의 오름차순으로 접근해 callbackfn을 통해새로운 값을 정의하고 신규 배열을 만들어 반환한다"라고 정의됨.배열을 순회하면서 공통된 작업을 할때, 사용함.map 의 인자를 콜백함수를 통해 함수를 넣어줌.인자로 사용되어지는 함수를 콜백함수라고 함.(1급함수라고 함.)객체의 메서드는 인자가 될수 없고 1급함수가 아님.자바스크립트는 함수를 많이쓰기에 함수형 언어다 라고 볼 수 있다.  document.write("** 원본 money=> " + money + ""); result = money.map(m=> m+ m*0.1); ..

생성 reverse() sort() concat() slice() join() shift()/unshift() pop()/push()자바스크립트의 내장된 코어객체중 Array 객체를 많이 쓰게 될것이다.배열은 데이터 저장을 하기 위해 사용되고 , 데이터를 컨트롤 하기 위해 자주 사용된다.주요 메서드들을 살펴보되 , 반환되는것이 어떻게 되는지 주의깊게 본다면 , 추후에 체이닝을 이용하기 편할것이다.체이닝 : 메서드들을 연결해서 나열하여 사용.생성 / 초기화 1) 생성 후 초기화let names = new Array(); names[0] = "홍길동"; names[1] = "김길동"; names[2] = "이길동"; names[3] = ..

window 객체란.열려있는 브라우저 윈도우나 탭 윈도우의 속성을 나타냄. window 객체 생성 1. 브라우저가 새로운 웹페이지를 로드2. 태그당 하나의 window 객체를 생성iframe 이란 ? html 내에서 문서의 주소를 연결해 내부적으로 보여주는 태그.a 태그는 외부에 있는 주소를 연결해 새화면을 보여주는것과 달리iframe 은 내가 원하는 부분내에 외부문서를 보여주게 공간을 할당한 것이라고 볼 수 있다. Header footer 3. 자바스크립트 코드로 윈도우 열기시 window 객체를 생성. (window.open(url주소 , 이름 , 속성)) window 관련 속성윈도우 전체 크기 , html문서 크기 , 스크롤바 등의 속성을 자주 사용하게 될것이다. window 객..

html을 배운 우리는 부모의 자식관계를 알고 있다.이어이어 본다면 큰 트리구조를 이루고 있음도 그려낼 수 있다. 자바스크립트에서 html 의 태그값을 가져오기 위해우리는 아무렇지 않게 이렇게 쓰고 있었다.let i = document.getElementById("image");:  id 가 imge 인 태그를 가져오기 위한 i 의 선언이였다. 이 즉슨 태그들을 트리구조화 되어있는 상황의 객체화 하여, 트리의 가지 (노드)값을 찾는 구조였다.즉 부모 객체 를 타고 자식 객체를 타고 자식자식 객체를 타고 찾는 구조라 함을 알 수 있다.객체란 무엇이었을까 ? 크게 두가지로 구성되어 있었다.1. 속성 property : 값 value2. 객체 속 함수 method : 동작 객체 자바스크립트는 객체 지향언어라고..