Lpla 개발 블로그

JavaScript/기초

[JavaScript] continue, break, return 차이

짧고 쉽게 설명해보겠다. 1. break break는 반복문을 즉시 빠져나온다. for (let i = 0; i < 10; i++) { if (i === 5) { console.log(`${i}에서 멈춘다.`); break; } console.log(i); } 2. continue continue는 반복문의 현재 단계를 중단하고 다음 단계를 이어서 진행한다. for (let i = 0; i < 10; i++) { if (i === 5) { console.log(`${i}에서 건너뛴다.`); continue; } console.log(i); } 실행된 코드를 보면, i가 5일 때, console.log(i)가 실행되지 않고 건너 뛴 것을 확인할 수 있다. 3. return return은 함수에 해당 값을 ..

JavaScript/기초

[JavaScript] 배열의 최대값 구하기

1. Math.max.apply() Math.max()는 입력받은 값 중 가장 큰 수를 반환한다. Math.max(1, 3); // 3 Math.max(1, 9, 6, 11); // 11 하지만 숫자가 아닌 배열을 사용하면 제대로 동작하지 않는다. Math.max([1, 9, 6, 11]); // NaN 배열에서 사용하기 위해서는 apply() 메서드를 같이 사용해야 한다. let array = [100, 40, 80, 120, 50, 90, 10, 20]; let result = Math.max.apply(null, array); console.log(result); // 120 2. 스프레드 연산자(...) 스프레드 연산자로 배열을 풀어서 구하는 방법도 있다. 가장 간단하지만 ES6부터 사용할 수 있..

JavaScript/기초

[JavaScript] 조건문 응용

이 글은 벨로퍼트와 함께하는 모던 자바스크립트의 내용을 공부하고 정리한 글입니다. 05. 조건문 더 스마트하게 쓰기 · GitBook 05. 조건문 더 스마트하게 쓰기 이번에는 조건문을 조금 더 스마트하게 쓰는 방법에 대해서 알아보겠습니다. 특정 값이 여러 값중 하나인지 확인해야 할 때 만약, 여러분이 특정 값이 여러 값 중 learnjs.vlpt.us 1. 특정 값이 참인지 확인하는 상황 function isAnimal(text) { return ( text === '고양이' || text === '개' || text === '거북이' || text === '너구리' ); } isAnimal('개'); // true isAnimal('노트북'); // false 특정 값이 동물인지 확인하는 함수 isA..

JavaScript/기초

[JavaScript] forEach, map, fill

1. forEach forEach 메서드는 주어진 함수를 배열 요소 각각에 대해 실행한다. forEach는 중간에 멈출 수 없다. for문 const array1 = [2, 4, 6, 8, 10]; const array2 = []; for (let i = 0; i { array2.push(element * 2); }) console.log(array2); // [4, 8, 12, 16, 20] 2. map map 메서드는 주어진 함수를..

JavaScript/기초

[JavaScript/jQuery] 요소 추가, 삭제, 이동

반응형에 따라 요소의 위치를 바꾸려고 한다. css만으로 해결할 수 있다면 좋겠지만 단순하지 않은 레이아웃에서 css로 해결하기 어려운 경우가 있다. 이 때 자바스크립트, 특히 제이쿼리의 도움으로 요소를 재배치할 수 있다. HTML 1번 2번 3번 CSS .box_wrapper { margin-top: 100px; font-size: 40px; } .box { width: 300px; height: 300px; margin: 0 auto; display: flex; justify-content: center; align-items: center; color: #FFF; } .box1 { background: #dc6851; } .box2 { background: #dcae51; } .box3 { back..

JavaScript/기초

[JavaScript] 함수 (2)

이전 글에서 이어집니다. [JavaScript] 함수 1. 함수란? 자바스크립트에서 함수는 가장 중요한 문법 중 하나이다. 함수란 일련의 과정을 문으로 구현하고 코드 블록으로 감싼 하나의 실행 단위로 정의한 것이다. 함수는 입력을 받아서 출력 lpla.tistory.com 6. 참조에 의한 전달과 외부 상태의 변경 엄연히 말해 자바스크립트에서 참조에 의한 전달은 존재하지 않고 값에 의한 전달만이 존재한다. 하지만 편의상 전달되는 값의 종류에 따라 값에 의한 전달과 참조에 의한 전달로 구분하여 부르기로 한다. 이 때 참조에 의한 전달은 다른 프로그래밍 언어에서 말하는 그것과 정확히 일치하지 않는다. // 매개변수 primitive는 원시값을 전달받고, 매개변수 obj는 객체를 전달받는다. function ..

JavaScript/기초

[JavaScript] 함수(1)

1. 함수란? 자바스크립트에서 함수는 가장 중요한 문법 중 하나이다. 함수란 일련의 과정을 문으로 구현하고 코드 블록으로 감싼 하나의 실행 단위로 정의한 것이다. 함수는 입력을 받아서 출력을 내보낸다. 이때 입력을 전달받는 변수를 매개변수(parameter), 입력을 인수(argument), 출력을 반환값(return value)이라고 한다. 함수는 함수 정의를 통해 생성되지만 정의만으로 함수가 실행되는 것은 아니다. 함수를 실행하기 위한 입력, 즉 인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 지시해야 한다. 이를 함수 호출이라고 한다. 함수를 호출하면 코드 블록에 담긴 문들이 실행되고 결과값을 반환(반환값)한다. // 함수 정의 function add(x, y) { return x + y; ..

JavaScript/기초

[JavaScript] 객체 리터럴

객체 자바스크립트는 객체 기반 언어이고 자바스크립트를 이루고 있는 모든 것이 객체이다. 정확하게는 원시 타입을 제외한 나머지 모든 것은 객체이다. 그리고 객체는 프로퍼티로 구성되어 있다. 다시 프로퍼티는 키(key)와 값(value)으로 구성되는데 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드(method)라고 부른다. 클래스 기반 언어에서 객체를 생성하기 위해 new 연산자를 사용한다. /* 1단계 : 클래스 정의 */ public class Prisoner { public int setence = 4; public int probation = 2; public string name; public string id; /* 2단계 : 클래스 생성자 정의*/ public Prisoner(s..

JavaScript/기초

[JavaScript] 논리 연산자와 단축 평가

1. 논리 연산자 자바스크립트는 세 종류의 논리 연산자가 있다. 연산자 의미 || OR && AND ! NOT OR 연산자는 피연산자 중 하나라도 true라면 첫번째 true를 반환하고 그렇지 않으면 false를 반환한다. AND 연산자는 피연산자가 모두 true라면 true를 반환하고 그렇지 않으면 첫번째 false를 반환한다. NOT 연산자는 하나의 피연산자만을 가지고 해당 피연산자의 불린형(true, false)을 역으로 반환한다. true || true; // true false || true; // true true || false; // true false || false; // false true && true; // true false && true; // false true && fals..

JavaScript/기초

[JavaScript] 삼항연산자와 조건문(if ... else문) 차이

삼항연산자(삼항 조건 연산자)는 자바스크립트에서 세 개의 피연산자를 취할 수 있는 유일한 연산자다. 삼항연산자의 표현식은 아래와 같다. 조건식 ? 조건식의 true 값 : 조건식의 false 값 삼항연산자는 첫번째 피연산자가 true라면 두번째 피연산자를 반환하고, 첫번째 피연산자가 false라면 세 번째 피연산자를 반환한다. var age = 30; var checkEven = age % 2 ? "홀수입니다." : "짝수입니다." console.log(checkEven); // "짝수입니다." checkEven은 age의 홀수, 짝수를 판단하는 삼항연산자이다. 나머지를 구하는 % 를 사용하여 나머지가 0 이라면 false로 세 번째 피연산자를 반환하고, 나머지가 1이라면 true로 두 번째 피연산자를 ..