수민정의 기술블로그

자바 스크립트에서의 Array 는 Object 다. 즉 자료형을 흉내낸 "객체" 다. 주어지는 메서드들은 자바의 lamda 에서 제공하는 map forEach , filter 와 굉장히 유사하게 보인다. 물론 람다라는게 자바의 소유물 은 아니기에 스스로에겐 그저 놀랍게만 보인다. // Array 자바 스크립트의 배열은 자료형을 흉내낸 "객체" 이다. const numarr = [1,2,3,4]; console.log(typeof numarr); // object 길이 : length 자바와 동일하다. 허나 속에 내포한 의미는 다르다. JS 의 Array는 배열의 길이가 요소의 개수와 같지않다. 빈 할당 값은 empty 요소 (undefined)로 채워지며 Array의 길이는 할당한 인덱스 만큼의 길이가 ..

화살표함수 화살표 함수를 처음 접했을때는 람다(lamda) 와 같을지도 모르겠다.. 하고 조심스레 생각했다. 자바의 람다는 함수형 인터페이스에 제공되기 때문에, 분명 자바스크립트는 더 놀라울거야, 하고 기대하며 보냈다. 매개변수가 하나라면 소괄호는 생략된다. 본문이 한줄이라면 return 문과 중괄호는 생략된다. 중괄호가 존재한다면 return 문도 존재해야한다. 자바에서 사용해왔던 람다의 특성을 그대로 가지고있다. // const add = function add(num1, num2){ return num1 + num2; } // 화살표 함수 : 익명함수 //(매개변수) => { 본문, 리턴문 } // 매개변수가 하나라면 소괄호 생략 가능 // 본문이 한 줄이라면 중괄효 생략 가능 // 중괄호 생략시 ..

템플릿 리터럴은 ` 백틱을 사용하고 값을 ${} 로 가져온다. 말그대로 자바스크립트 내부 엔진이 이해할 수 있도록 표현식을 쓰는 것이다. SpEl 에서는 ${} 을 프로퍼티식. 이라고 하는데 오직 SpEl 만의 것이 아니기에 자바스크립트에는 어떻게 말하는지 사실.. 모르겠다. 프로퍼티 식에는 연산(표현식) , 프러퍼티 값, 메서드 등이 올 수 있다. 삼항 연산자로 흐름 분기가 가능하다. 문장에 따라 이스케이프 문자를 해석한다. const name = "soomin"; console.log("안녕 내이름은 "+name+"이야."); console.log(`안녕 내이름은 ${name} 이야`); // 자바스크립트 표현식으로 문자열 연산을 내부적으로 처리한 모습 console.log("총 금액은 "+(10+5..

왜 만들어 졌는가. var 는 모두 전역변수이다. : 블록의 변수가 남아있게 된다. 선언 후 변수를 버릴 수가 없다. if(true) { var num = 10; console.log(num); } console.log(num); console.log(window.num); VM3829:3 10 VM3829:6 10 VM3829:7 10 var는 같은 변수 값을 다시 선언할 수 있다. : 유동적 값을 받는 변수와 상수(무결성) 의 구분이 없다. var num = "중요한 변수"; if(true) { var num = "중요한 변수를 바꾸어버림"; } console.log(num); VM4067:7 중요한 변수를 바꾸어버림 let 중복 선언이 불가능하다. 블록 스코프를 가진다. 일반적 자바 변수의 특성을 ..

자바 스크립트는 싱글스레드 기반으로 돈다고 들었다. 그럼 블로킹 되지 않아야 올바른게 응답을 받고 넘겨 줄 수 있다는 뜻이구나. 했었다. 이 코드 순서를 보면, 출력 값은 이런 순서가 된다. 가만히보면, 자바스크립트의 비동기처리는 setTimeout()으로 하는구나, 하고 생각하게 되었다. a c b function a() { console.log('a 실행'); } function b() { console.log('b 실행'); } function c() { console.log('c 실행'); } a(); setTimeout(b,3000); c(); JavaScript 도 java 처럼 호출 스택이 존재한다. 핵심적인 객체들은 다음과 같다. 호출스택 : 호출 된 함수 객체를 담고 있는 Stack 이다..

수강 중인 학원 에서 프로젝트를 진행할떄 가장 많이 했던 점이 input 태그의 값을 가져와 조작하는 것이었다. 아무래도 MVC 패턴에서 서버사이드에서 조작을 모두 완성짓기에는 무리가 있었고, 자바스크립트는 참 강력했다. getElementBy~() : 하나의 돔객체 추출 getElementsBy~() : 해당 매개값에 알맞은 돔객체 들을 Collection 으로 추출 버튼이나 input 버튼에서 KeyUp keyPress Dbclick onClick 등 여러 이벤트가 존재하는데. 이와 엮어서 자바스크립트 메서드를 호출한다. var var2 = document.getElementsByTagName('input'); console.log(var2); // id 값에 어떤 값을 입력하고 제출버튼을 누르면 >..

getElementById() 는 해당 dom 객체를 받아오는 것을 확인했다면, 이제는 조작이다. getAttribute(속성값) : 해당 속성의 value 를 가져온다. setAttribute(속성값, 조작값) : 해당속성의 value 를 조작값으로 변경한다. var var1 = document.getElementById('goorm'); console.log(var1); var href = var1.getAttribute('href'); console.log(href); var1.setAttribute('href','https://edu.goorm.io'); // 어떤 속성에 , 값을 넣을 것인가. console.log(var1.getAttribute('href')); 어찌보면 HttpServletR..

var var1 = document.getElementById('root'); // 해당 돔 객체 console.log(var1); console.log(var1.innerHTML); var1.innerHTML = 'hello soomin'; var text = document.getElementById('root').innerText; console.log(text); 해당 코드는 돔객체를 얻어오는 코드이다. 개인적으로 몇번 사용해 본적 있으나 정확히 무엇을 가져오는 가에 대해 알지 못했고, 이번기회에 감사하게도 조금이나마 알게 되었다. var var1 = document.getElementById('root'); // 해당 돔 객체 console.log(var1); 해당 노드와 자식노드 까지 전부 가..

기억해야 할 부분. 내장 함수와 전역변수, 일반 함수 : window 객체에 바인딩 객체에 메서드에 선언된 this : 메서드를 호출한 객체 생성자 함수의 this : 생성자 함수로 만들어낸 객체 new 연산자의 유무에 따라 생성자 함수, 일반함수로 나뉘며 이는 즉 binding 할 객체가 달라진다는 것을 뜻한다. new 연산자 : 만들어낸 객체에 바인딩 일반함수 : widow 객체( 전역객체 ) 에 바인딩. Binding 이란 this 를 알맞은 객체로 바꿔사용한다는 것을 뜻한다. call, apply 메서드 사용 시에 정의 해야할 부분. 어떤 객체에 바인딩할 것인가 함수의 인자는 무엇인가. 바로 call하는 함수인가? call , apply 의 차이점은 인자를 어떻게 넣는 지의 차이이다. apply ..

자바스크립트에서의 객체 생성은 객체를 만드는데 사용된 원형인 prototype 객체를 이용하여 만든다. 이 때 만들어진 객체 안에 있는 proto 속성에 원형을 의미하는 prototype 객체를 참조하는 링크가 있다. ...음..마치 자바의 모든 객체들은 Object 를 상속해서 toString 메서드등을 가진것 처럼..여기에도 toString 이 있는게 보인다.