본문 바로가기

JavaScript

(83)
[JavaScript] 조건부 연산자 (Conditional operator) 조건부 연산자(Conditional operator) 삼항 연산자(Ternary operator) 로도 불리며 자바스크립트에서 유일하게 세개의 피 연산자를 가짐. if문과 같은 원리로 조건에 따라 값을 결정할 때 활용됨. // 조건 ? truthy 할 때 표현식 : falsy 할 때 표현식 const CUT_OFF = 60; function passChecker(score) { return score > CUT_OFF ? '합격!' : '불합격!' } console.log(passChecker(50)); // 불합격! console.log(passChecker(70)); // 합격! 조건에 따라 값을 결정해야하는 순간에 if문보다 간결하게 축약된 코드로 작성할 수 있음. 그러나 내부에 변수나 함수를 선언..
[JavaScript] Rest Parameter [Rest Parameter] 파라미터 앞에 마침표 세 개를 붙여주면, 여러 개로 전달되는 아규먼트들을 배열로 다룰 수가 있음. arguments객체는 유사 배열이기 때문에 배열의 메소드를 활용할 수 없지만, rest parameter는 배열이기 때문에 배열의 메소드를 사용할 수 있음. function printArguments(...args) { // args 객체의 요소들을 하나씩 출력 for (const arg of args) { console.log(arg); } } printArguments('김철수', '이훈이', '신짱구'); Rest Parameter 는 다른 일반 파라미터와 함께 사용될 수 있는데, function printRankingList(first, second, ...others..
[JavaScript] Arguments 객체 [Arguments 객체] Arguments 객체는 함수를 호출할 때 전달한 아규먼트들을 배열의 형태로 모아둔 유사 배열 객체임. 함수를 호출할 때 전달되는 아규먼트의 개수가 불규칙적일 때 유용하게 활용함. function printArguments() { // arguments 객체의 요소들을 하나씩 출력 for (const arg of arguments) { console.log(arg); } } printArguments('Young', 'Mark', 'Koby'); [줄임말 만들기] 1. arguments 객체를 이용한 for 반복문 function firstWords() { let word = ''; // 여기에 코드를 작성하세요 for (i = 0; i < arguments.length; i+..
[JavaScript] Parameter 기본값 [파라미터와 아규먼트] 파라미터를 활용하면, 전달하는 값에 따라서 다양한 결과로 동작함. function greeting (name) { console.log(`안녕하세요. 제 이름은 ${name} 입니다.`); } greeting('김철수'); //안녕하세요. 제 이름은 김철수 입니다. greeting('이훈이'); //안녕하세요. 제 이름은 이훈이 입니다. greeting('신짱구'); //안녕하세요. 제 이름은 신짱구 입니다. '김철수', '이훈이', '신짱구' 와 같이 파라미터에 전달되는 값을 아규먼트(Argument) 라고 함. [파라미터의 기본값] function greeting (name) { console.log(`안녕하세요. 제 이름은 ${name} 입니다.`); } greeting();..
[JavaScript] 함수의 형태 자바스크립트에서 함수는 값으로 취급되는데, 이런 특징은 코드를 작성할 때 다양한 형태로 활용할 수 있음. 1. 변수에 할당해서 활용 const printJS = function () { console.log('JavaScript'); }; 2. 객체의 메소드로 활용 const codeit = { printTitle: function () { console.log('Codeit'); } } 3. 콜백 함수(Callback Function) 로 활용 myBtn.addEventListener('click', function () { console.log('button is clicked!'); }); 다른 함수의 파라미터에 전달 된 함수를 콜백 함수라고 함. 4. 고차 함수(Higher Order Functi..
[JavaScript] 즉시 실행 함수 (IIFE) [즉시 실행 함수] 함수 선언식에 다음과 같이 소괄호를 붙여주면 즉시 실행 함수(Immediately Invoked Function Expression)를 만들 수 있음. (function () { console.log('Hi!'); })(); (function (x, y) { console.log(x + y); })(3, 5); 즉시 실행 함수도 일반 함수처럼 파라미터 작성이 가능하고, 함수를 호출할 때 아규먼트를 전달 할 수도 있음. (function sayHi() { console.log('Hi!'); })(); sayHi(); // ReferenceError 그러나 즉시 실행 함수는 함수에 이름을 붙여주더라도 외부에서 재사용 할 수가 없음. [즉시 실행 함수의 활용] (function init()..
[JavaScript] 함수를 만드는 법 1. 함수 선언식(function declaration) 자바스크립트에서는 다양한 방식으로 함수를 만들 수 있다. function 키워드를 이용해 함수를 선언하는 방식을 함수 선언식 이라고 함. // 함수 선언 function sayHi() { console.log('Hi!'); } 2. 함수 표현식 자바스크립트에서 함수는 값으로도 취급될 수도 있기 때문에 변수에 할당해서 함수를 선언하는 방식을 함수 표현식 이라고 함. // 함수 표현식 const sayHi = function () { console.log('Hi!'); };
[JavaScript] AND와 OR 연산 방식 자바스크립트에서 AND와 OR연산자는 무조건 불린 값을 리턴하는게 아닌 왼쪽 피연산자 값의 유형에 따라서 두 피연산자 중 하나를 리턴하는 방식으로 동작한다. [AND 연산자] 왼쪽 피연산자가 falsy값일 때 왼쪽 피연산자를, 왼쪽 피연산자가 truthy값일 때 오른쪽 피연산자를 리턴 [OR 연산자] 왼쪽 피연산자가 falsy 일 때 오른쪽 피연산자를, 왼쪽 피연산자가 truthy 일 때 왼쪽 피연산자를 리턴 console.log(null && undefined); // null console.log(0 || true); // true console.log('0' && NaN); // NaN console.log({} || 123); // {}