차근차근

조건 연산자 (Conditional operator) = 삼항 연산자 (Ternary operator) if (조건) { // 조건이 true일 때 동작 } else { // 조건이 false일 때 동작 } switch (값) { case A: // 값이 A와 일치할 때 동작 break; default: // 값이 일치하는 case가 없을 때 동작 }표현식 조건 ? truthy 할 때 표현식 : falsy 할 때 표현식 조건 연산자를 이용하면 조건에 따라 값을 결정해야할 순간에 if문 보다 더 간결하게 표현할 수 있지만 조건 연산자는 표현식이기 때문에 조건에 따라 변수를 선언하거나 조건에 따라 반복문을 실행할 수 없다 const cutOff = 80; function passChecker(score) {..

문장 (statements) 자바스크립트 코드는 모두 문장과 표현식으로 구성되어 있다. 자바스크립트에서 문장은 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리를 가르킨다. let x; x = 3; if (x < 5) { console.log(&#39;x는 5보다 작다&#39;); } else { console.log(&#39;x는 5와 같거나 크다&#39;); } for (let i = 0; i < 5; i++) { console.log(i); }위 코드의 첫 번째 줄도 x라는 변수를 선언하는 동작이 일어나는 하나의 문장이고, 두 번째 줄도 x에 3이라는 값을 할당하는 동작이 일어나는 하나의 문장입니다. 그리고 4번줄 부터 8번줄 까지도 하나의 문장이고 그리고 10번줄 부터 12번줄 까지도 반복 동작..

함수 선언 자바스크립트에서 함수는 다양한 방식으로 선언할 수 있습니다. 가장 일반적인 방법은 function 키워드를 통해 함수를 선언하는 방식인데요. // 함수 선언 function sayHi() { console.log('Hi!'); } 이렇게 함수를 값으로 다루는 방식을 함수 표현식 (function expression)이라고 합니다. 다양한 함수의 형태 자바스크립트에서 함수는 값으로 취급되는데요. 이런 특징은 코드를 작성할 때 다양한 형태로 활용될 수 있습니다. // 변수에 할당해서 활용 const printJS = function () { console.log('JavaScript'); }; // 객체의 메소드로 활용 const codeit = { printTitle: function () { ..

화살표 함수 (Arrow function) 화살표 함수는 익명 함수를 더 간결하게 표현할 수 있도록 ES2015에서 새롭게 등장한 함수 선언방식이다. 다음과 같이 표현식으로 함수를 정의하거나 콜백함수로 전달할 때 활용할 수 있다. // 화살표 함수 정의 const getTwice = (number) => { return number * 2; }; // 콜백 함수로 활용 myBtn.addEventListener(&#39;click&#39;, () => { console.log(&#39;button is clicked!&#39;); });구문 화살표 함수는 다양한 상황에 따라 축약형으로 작성될 수 있다. 화살표 함수는 arguments 객체가 없고, this가 가르키는 값이 일반 함수와 다르다. (항상 wi..

지금까지 함수를 선언하는 다양한 방법에 대해 살펴봤는데요. 함수를 선언하는 것은 함수를 실행하는 것과 다르다는 사실, 모두 알고 계시죠? function sayHi() { console.log('Hi!'); } sayHi(); 일반적으로는 이렇게 함수를 먼저 선언한 다음,선언된 함수 이름 뒤에 소괄호를 붙여서 함수를 실행하는데요. 그런데 때로는 함수가 선언된 순간에 바로 실행을 할 수도 있습니다. 즉시 실행 함수 (function () { console.log('Hi!'); })(); 보시는 것처럼 함수선언 부분을 소괄호로 감싼 다음에 바로 뒤에 함수를 실행하는 소괄호를 한 번 더 붙여주는 방식인데요. 이렇게 하면 함수가 선언된 순간 바로 실행이 되는 겁니다. 이렇게 함수 선언과 동시에 즉시 실행되는 함..

Named Function Expression (기명 함수 표현식) 함수 표현식으로 함수를 만들 때는 선언하는 함수에 이름을 붙여줄 수도 있는데요. 이름이 있는 함수 표현식, 즉 기명 함수 표현식이라고 부릅니다. 함수 표현식으로 함수가 할당된 변수에는 자동으로 name이라는 프로퍼티를 가지게 되는데요. const sayHi = function () { console.log('Hi'); }; console.log(sayHi.name); // sayHi 이렇게 이름이 없는 함수를 변수에 할당할 때는 변수의 name 프로퍼티는 변수 이름 그 자체를 문자열로 가지게 됩니다. 하지만 함수에 이름을 붙여주게 되면, name 속성은 함수 이름을 문자열로 갖게 되는데요. const sayHi = function pri..

함수 선언 function 키워드를 사용해서 함수를 만드는 방식, 함수 선언문이 호이스팅 된다. 함수 선언문은 변수 var 스코프와 같이 함수 스코프를 갖는다. function 함수이름(파라미터) { 동작 return 리턴값 } printCodeit(); // &#39;Codeit&#39; function printCodeit() { console.log(&#39;Codeit&#39;); } 함수 표현식 함수 선언을 값처럼 사용하여 함수를 만드는 방식. 함수 표현식은 호이스팅 되지 않는다. 할당된 변수에 따라 스코프가 결정된다. const printCodeit = function () { console.log(&#39;Codeit&#39;); }; printCodeit(); // &#39;Codeit&#..

자바스크립트의 데이터 타입 자바스크립트에는 8가지 데이터 타입이 있습니다. number string boolean undefined null object symbol bigint 자바스크립트의 유연한 데이터 타입 자바스크립트는 데이터 타입이 유연한 프로그래밍 언어입니다. 맥락에 유연하게 변하는 데이터 타입의 특징은 처음엔 생소하고 혼란스러울 수 있지만, 잘 이해하고 활용한다면 좀 더 간결한 코드를 작성하고 빠르게 개발할 수 있는 장점이 될 수 있습니다! Truthy 값과 Falsy 값 if, for, while 등 불린 타입의 값이 요구되는 맥락에서는 조건식이나 불린 타입의 값 뿐만아니라 다른 타입의 값도 불린 값처럼 평가될 수 있는데요. 이 때, false 처럼 평가되는 값을 falsy 값, true ..

변수와 스코프 변수는 이름을 통해서 어떤 값에 특별한 의미를 부여하는 추상화의 가장 기본적인 수단 자바스크립트에서 변수를 만드는 방식은 ES2015 기준으로 변화가 있었다. ES2015 이전에는 var라는 키워드를 사용했지만 몇 가지 문제가 있었다. ES2015 이후에는 이 문제를 해결하기 위해 let과 const 키워드를 만들었다. 최근에는 var 보다는 활용 목적에 따라 값의 재할당이 필요한 경우 let 키워드를 사용하고 재할당이 필요하지 않은 경우에는 const 키워드를 사용하는 것이 권장되고 있다. var의 문제점 1. 호이스팅 (Hoisting) 변수가 유효한 시점의 차이. var 키워드는 변수를 만들기 전에 사용이 가능하다. console.log(title); // undefined var t..

Falsy 값Truthy 값false null undefined NaN 0 ' '나머지 값 [ ] { } AND와 OR의 연산 방식 자바스크립트에서 논리 연산자는 항상 true나 false 값을 반환하는 것이 아니라 상황에 따라 양 쪽 값들 중 하나를 선택하는 방식으로 동작한다. 또한, AND 연산자는 OR 연산자 보다 우선순위가 더 높다. 논리 연산자가 많다면 가독성을 위해서 괄호를 사용해 연산 우선순위를 명확하게 표기하는 것이 협업하기 위한 좋은 습관이다. console.log(&#39;Codeit&#39; && &#39;Javascript&#39;); // &#39;Javascript&#39;AND AND 연산자는 양 쪽 값이 true일 때만 true를 반환하고 어느 한 쪽이라도 false일 경우 ..