분류 전체보기

안녕하세요 이번 글에서는 자바스크립트에서의 arguments/rest parameter(나머지 연산자) 핵심만 알려드리겠습니다. 1. arguments 1.1 사용이유 함수에서 넘어온 파라미터 값을 한 번에 다루고 싶을 때 사용합니다. arguments 키워드를 사용하면 값들을 배열 형태로 접근이 가능합니다. function sum() { let total = 0; for (let i = 0; i < arguments.length; i++) { total += arguments[i]; } return total; } console.log(sum(1, 2, 3)); // 6 위 코드에서 파라미터에 아무 값도 넣지 않았는데, arguments 키워드를 이용해 배열 형태로 값을 가져와 사용했습니다. 1.2 단..

안녕하세요. 이번 글에서는 자바스크립트에서의 default parameter(매개변수 기본값) 핵심만 알려드리겠습니다. 1. 사용이유와 사용방법 1.1 사용이유 매개변수의 기본값을 설정할 수 있습니다. 이를 통해, 파라미터값이 제공되지 않더라도 기본값이 매개변수에 할당됩니다. 1.2 사용방법 function greet(name = "Anonymous") { console.log(`Hello, ${name}!`); } greet(); // 출력: Hello, Anonymous! greet("John"); // 출력: Hello, John! 위처럼 파라미터 값을 넣지 않더라도, name=”Anonymous”를 매개변수의 기본값으로 설정합니다. 이렇게 파라미터 선언 시, 등호로 입력하면, 파라미터가 정의되지 ..

안녕하세요 이번 글에서는 자바스크립트에서의 Spread Operator(전개 연산자) 핵심만 알려드리겠습니다. 1. 사용이유와 사용방법 1.1 사용이유 spread 뜻은 펼친다는 뜻을 가지고 있습니다. spread operator은 그냥 데이터를 펼치는 연산자 라고 생각하면 되는데요 배열, 객체, 문자열에서 데이터를 펼쳐줍니다. 1.2 사용방법 사용방법은 마침표 3개 연달면 됩니다. “…” 2. 사용 예시 (배열, 문자열) 2.1 배열 var ages = [10, 11]; console.log(ages); //[10, 11] console.log(...ages) //10, 11 배열 안에 요소들을 …을 이용해서 찍으면 괄호 안에 있는 데이터가 펼쳐 저서 나오는 걸 볼 수 있습니다. 2.2 문자열 var ..

안녕하세요 이번 글에서는 자바스크립트에서의 primitive(원시)/reference(참조) data type 핵심만 알려드리겠습니다. 1. primitive data type(원시타입) 숫자(Number), 문자열(String), 불리언(Bollean), null, undefiend, Symbol 원시 타입은 변수 간에 독립적으로 저장합니다. 즉, 한 변수의 값을 변경하더라도 다른 변수의 값은 영향을 받지 않습니다. 2. reference data type(참조타입) 객체, 배열, 함수 참조타입은 값이 저장되는 메모리 공간의 주소를 가리킵니다. 원시타입처럼 변수를 독립적으로 저장하지 않고, 자료가 어디 있는지 레퍼런스(참조)를 저장합니다. var number= [10]; 여기서 number는 [10]을..

안녕하세요 이번 글에서는 자바스크립트에서의 Template literals / Tagged template 핵심만 알려드리겠습니다. 1. Template literals 기존에는 “+” 기호로 문자열을 연결해 줘야 했습니다. var name = 'kim'; var str = "저는 " + name + " 입니다."; console.log(str); //저는 kim 입니다. 그러나 Template literals을 사용하면 backtick( ` ) 기호로 문자열을 이을 수 있습니다. backtick기호는 키보드 tab 위에 보면 있습니다. 그럼 Template literals의 2가지 장점을 볼까요? 1.1 변수를 쉽게 집어넣을 수 있음 기존에는 +기호로 변수를 넣어야 했지만 Template literal..

안녕하세요 이번 글에서는 자바스크립트에서의 호이스팅 핵심만 알려드리겠습니다. 1. 호이스팅의 개념 변수나, 함수를 선언하면, 변수나 함수의 선언 부분을 범위 맨 위로 끌어올려서 해석하는 현상을 의미합니다. 선언 부분에 대한 이해가 없으시면 아래 블로그를 참조해 주세요 (javascript) 변수 핵심만 이해하기 안녕하세요. 이번시간에는 "변수" 핵심만 설명해 드리겠습니다. 변수를 사용하는방법 var name = 'kim'; 변수는 선언과 할당을 이용해 만들 수 있습니다. a. 선언 ⇒ var name b. 할당 => name = ‘kim’ 변수 jowell.tistory.com 1.1 예제로 설명하기 function say_hello(){ console.log('hello'); var name = 'ki..

안녕하세요 이번 글에서는 자바스크립트에서의 전역변수와 클로저 핵심만 알려드리겠습니다. 1. 전역변수 개념 자바스크립트에선 외부의 변수를 참조할 수 있는 개념을 클로저라고 합니다. var name = 'kim'; function say_name(){ console.log(name); //kim } say_name(); say_name 함수 바깥에 있는 name 변수를 참조했습니다. 만약, say_name 함수 안에 name 변수가 있으면 그 변수를 참조했겠지만 없으면, 바깥에 변수를 참조하죠 이 클로저라는 개념을 이용해, 어디서든 참조할 수 있는 전역변수를 만들 수 있습니다. 2. 전역변수 예시 전역변수는 script태그 열고 변수를 만들면 됩니다. 그럼 밑에 있는 함수, if , for 등에서 전부 ag..

안녕하세요 이번 글에서는 자바스크립트에서의 변수(var, let, const) 핵심만 알려드리겠습니다. 1. 변수를 사용하는 방법 var name = 'kim'; 변수는 선언과 할당을 이용해 만들 수 있습니다. a. 선언 ⇒ var name b. 할당 => name = ‘kim’ 변수를 사용할 때는 var, let, const 3개의 키워드를 사용 가능합니다. a. 3개 키워드는 선언, 할당, 범위에서 차이가 있습니다. 1.1 선언 var 키워드는 재선언이 가능하고 let, const 키워드는 재선언이 불가능합니다. var data; var data; const age const age //err let, const는 이렇게 같은 이름의 변수를 두 번 이상 재선언할 수 없습니다. 그러다 보니, 변수 이름..

안녕하세요 이번 글에서는 자바스크립트에서의 화살표함수 사용 못하는 경우와 해결법 핵심만 알려드리겠습니다. 이번 글에선, 화살표 함수를 사용 못하는 경우를 나열할 겁니다. 그럼 화살표 함수를 못쓰면 function 키워드 사용하면 되지 않나?라고도 생각하실 수 있는데요. 하지만 function 키워드는 this 키워드를 예측하기 어려워진다고 저번 글에서 배웠었죠? 그리고 나중에 호이스팅을 배울건데, function 키워드는 var처럼 호이스팅 되기 때문에 코드를 예측하기 힘들어져요. 결론은 대부분 화살표 함수를 쓰고, 못쓰는 경우엔 function 대신 아래 방법으로 해결하는걸 추천 드릴게요! 1. 메서드 const cat = { name: "meow"; call_name: () => console.log..

안녕하세요 이번 글에서는 자바스크립트에서의 화살표함수 사용이유의 핵심만 알려드리겠습니다. 1. 화살표함수 사용이유 기존에 javascript에선 function 키워드로 함수를 정의했습니다. 그러나 ES6 신문법 화살표 함수를 사용하면 아래처럼 함수를 정의할 수 있습니다. //기존 function 함수() { } //화살표 함수 var 함수 = () => { } function 키워드가 있는데 왜 화살표 함수가 나온 걸까요? 답은 화살표 함수에는 this 키워드가 없기 때문입니다. this 키워드를 모른다면 아래 블로그를 읽어주세요 (javascript) this 핵심만 이해하기 안녕하세요. 이번 글에선, 혼란스러울 수 있는 "this" 핵심만 알려드리겠습니다. this 이해하기(아주쉬움) this를 이..