본문 바로가기

Study/JavaScript

 (15)
[JavaScript] function 파라미터 탐구하기 (default 파라미터, ...Rest 파라미터) #0. 파라미터 (= 매개변수, parameter) - 함수 작성시 사용할 수 있는 특별한 형태의 변수다. - 아래 함수에서 1번째줄 a,b가 파라미터이며, - 함수호출시, 함수명(값1, 값2) 형태로 함수를 호출하고, 이때 a = 값1. b=값2 와 같은 형태로 함수가 돌아간다. function 더하기(a, b) { // 여기 있는 a, b가 파라미터임 console.log(a+b); } 더하기(1, 2) // a=1, b=2 로 대입하여, 더하기 함수를 실행하겠다. #1. default 파라미터 - 파라미터는 기본값도 정할 수 있다. - 그냥 파라미터 자리에 함수명(a=10) 과같은 형태로 사용되면, 호출시 argument가 비었을때 default값이 대입되어 함수가 실행된다. - 아래 함수에서는 더..
[JavaScript] ... Spread Operator = 괄호 벗겨주세요 Spread Operator - array나 문자열 앞에 ...을 붙여주면, array나 문자열, object의 괄호를 제거한 결과값을 얻을 수 있다 주의 ) ...은 항상 괄호 안에서만 써야함. #1. 사용예시 1. array에 사용 >> 대괄호를 제거해줌 var arr = ['hello','world']; console.log(arr); // 출력결과 >> (2) ['hello', 'world'] console.log(...arr); // 출력결과 >> hello world // console.log(...arr) == console.log('hello','world') 2. 문자에 사용 >> 문자들을 하나씩 다 펼쳐줌. var str = 'hello'; console.log(str) // 출력결과 ..
[JavaScript] 문자조작에 유용한 tagged literals 자바스크립트에서 보통 함수를 호출할때 다음과 같은 형태로 호출하곤 하는데, 함수(); 이 외에도 자바스크립에서는 특이한 함수 호출법이 있다. 이름하야 tagged literals. 함수 뒤에 관호가 아닌, 텍스트를 넣어서도 함수 호출이 가능하다. 함수 `안녕하세요 ${변수}입니다` tagged literals를 사용하여, 문자를 해체 분석할수 있다 . 다음 예제를 봐보자. var name = '손예진' function 함수(문자들, 변수){ console.log(문자들); // (2) ['안녕하세요 저는 ', '입니다', raw: Array(2)] console.log(변수); // 손예진 } 함수 `안녕하세요 저는 ${name}입니다` 함수 뒤 ``(백틱) 안의 문자와 변수를, 함수의 파라미터로 담아 ..
[JavaScript] this #1. this? - this는 자기 참조 변수 - this는 호출한 방법에 의해 결정된다. - 대부분의 경우 this는 호출한 놈! * 예외 - 전역 스코프에서 this는 window객체 - 화살표 함수에서 this는 상위 스코프의 this - strict mode에서 this의 기본값은 undifined (window아님) case1. 대부분의 경우 this는 자신을 호출한 놈 - 대부분의 경우 this 는 자신을 호출한 놈이다. var person = { name : "사람", getThis : function(){ console.log(this); } } // case01. this는 자신을 호출한 person person.getThis(); // {name: '사람', getThis: ƒ} ca..
[JavaScript] 호이스팅이란? 호이스팅이란 코드를 실행하기 전에, 변수 선언/ 함수 선언에 대한 메모리 공간을 미리 할당해 두는 것을 말한다. 변수 선언/ 함수 선언은 런타임 이전에 먼저 실행되는데, 변수 선언/ 함수 선언이 코드의 선두로 올려진것 처럼 동작하는 자바스크립트 고유의 특징이다. #1. 변수 호이스팅 - 변수 선언시, 변수 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는데 이를 함수 호이스팅이라고 한다. - var, let, const 모든 키워드로 선언 시, 변수 호이스팅은 발생하지만, 각각의 출력 형태는 약간 상이하다. 1. var로 변수 선언시 ... > undifined로 초기화. - var 키워드로 선언한 변수는 런타임 이전에 변수 호이스팅에 의해 선언되고, undifined 값으로 초기화가 진행된다. cons..
[javascript 메서드 정리] 스크롤 이동 메서드 window.scroll() VS window.scrollTo() VS window.scrollBy() #결론 - 스크롤을 이동할때 쓰는 메서드 - 설정한 값이 적용되는 기준점이 다르다. - 기준점은 다음과 같이 다름. 메서드 Window.scroll() Window.scrollTo() Window.scrollBy() 기준점 - 문서의 왼쪽 상단 기준 - 문서의 왼쪽 상단 기준 - 뷰포트 왼쪽 상단 기준 (현재 스크롤 위치 기준) 특징 - 절대적인 값. - 문서의 왼쪽 상단 기준으로 지정한 값으로 스크롤이 이동 한다. - Window.scrollTo() 와 같음 - 절대적인 값 - 문서의 왼쪽 상단 기준으로 지정한 값으로 스크롤이 이동 한다. - Window.scroll() 와 같음 - 상대적인 값 - 현재 스크롤 위치가 어디인가에 따라 이동 후의 위치가 바뀐다. - 현재 스크롤된 위치 + 설정한 값으로 ..
parseInt()와 Number() 차이점 문자열을 숫자로 바꿀떄 보통 Number()와 parseInt를 많이 사용했다. 그런데 이 두가지는 뭐가 다를까? 이번기회에 차이점을 정리하고자 한다. 1. Number(Str) - 문자열을 인자로 받으면 해당 문자열을 숫자로 바꿔준다. - 하지만 그 문자열은 숫자 형태로만 구성되어있어야 유의미하다. 아래의 예시를 참고하자. console.log(Number('1234')); // 결과값 : 1234 console.log(Number('100원')); // 결과값 : NaN console.log(Number('10.444')); // 결과값 : 10.444 - 위와같이 한글 등의 문자가 껴있으면 원하는 결과값이 출력되지 않는다. 2. parseInt(Str) - Nunber(Str)와 같이 문자열을 인자..

티스토리툴바