Lpla 개발 블로그

JavaScript/기초

[JavaScript] 2중 객체(중첩된 객체) 접근

2중 객체(중첩된 객체) 실무에서 객체(Object) 안에 객체를 만들고 반복문을 돌려야 하는 일이 생겼다. 아래 예시 코드를 보자. let 팝업 = { 첫번째: { tab_name: ' 1 ', tab_bg: '#2D3E52', link: '', end_date: '2021-02-28' }, 두번째: { tab_name: ' 2 ', tab_bg: '#F1A5CC', link: 'www.naver.com', end_date: '2020-01-01' }, 세번째: { tab_name: ' 3 ', tab_bg: '#0060AC', link: '', end_date: '2020-08-31' }, 네번째: { tab_name: ' 4 ', tab_bg: '#FF540F', link: 'www.daum.net..

JavaScript/기초

[JavaScript] Class 클래스 (1)

기존 프로토타입 상속 문법 function Hello (name) { this.name = name; } Hello.prototype.sayHello = function () { console.log(this.name + "님 안녕하세요."); } const h1 = new Hello('lpla'); const h2 = new Hello('coffee'); h1.sayHello(); h2.sayHello(); // 결과 // lpla님 안녕하세요. // coffee님 안녕하세요. ES6 클래스 상속 문법 class Hello { constructor(name) { this.name = name; } sayHello() { console.log(this.name + "님 안녕하세요."); } } const..

JavaScript/기초

[JavaScript] 반복문 (for in / for of)

1. for문 let data = [1, 2, undefined, NaN, null, ""] for(let i=0; i

JavaScript/기초

[JavaScript] startsWith, endsWith, includes

string.startsWith(matchString) matchString이 string의 문자로 시작하는지 여부 확인 string.endsWith(matchString) matchString이 string의 문자로 끝나는지 여부 확인 string.includes(matchString) matchString이 string의 문자를 포함하고 있는지 여부 확인 1. startsWith() matchString이 string의 문자로 시작하는지 여부 확인 (true/false) let str = "hello world!" let matchstr1 = "hel" console.log(str.startsWith(matchstr1)); //true 2. endsWith() matchString이 string의 문..

JavaScript/기초

[JavaScript] 생성자 함수

자바스크립트 코드를 짜다 보면 비슷한 객체를 여러개 만들어야 하는 경우가 많다. 이 때 new 연산자와 생성자 함수를 이용할 수 있다. 생성자 함수는 일반 함수와 기술적으로 차이가 없기 때문에 이를 구별하기 위해 다음과 같은 규칙을 정해두고 있다. 함수의 첫 글자는 대문자 new와 함께 호출 function Member(name) { this.name = name; this.age = 29; } let member = new Member("Jin"); alert(member.name); // Jin alert(member.age); // 29 위 코드의 작동 원리는 다음과 같다. function Member(name) { // this = {}; 빈 객체가 임시로 만들어진다. // 새로운 프로퍼티를 th..

JavaScript/기초

[JavaScript] this (1)

자바스크립트에서 this는 매우 유연하게 쓸 수 있다. 메서드 내부에서 this를 사용하면 객체에 접근할 수 있다. let Jin = { 'name' : 'Jin', sayHello() { alert(this.name + " 안녕하세요."); } } let Yumi = { 'name' : 'Yumi', sayHello() { alert(this.name + " 안녕하세요."); } } Jin.sayHello(); // Jin 안녕하세요. Yumi.sayHello(); // Yumi 안녕하세요. 하지만 위 코드는 sayHello()가 Jin과 Yumi에 중복 작성되었기 때문에 깔끔하지 않다. 다음처럼 줄여 쓸 수 있다. let Jin = {'name' : 'Jin',} let Yumi = {'name' :..

JavaScript/기초

[JavaScript] 프로퍼티와 메서드와 리터럴

자바스크립트 공부를 하다 보니 프로퍼티와 메서드, 리터럴이라는 용어를 자주 접한다. 이를 짧게 정리해보았다. 프로퍼티 : 키(Key)와 값(Value)로 이루어진 객체(Object)의 일부 let member = { 'name' : 'Jin', 'age' : 30, 'country' : 'italy' } member는 객체 'name', 'age', 'country' 는 키 'Jin', 30, 'italy' 는 값 'name' : 'Jin', 'age' : 30, 'country' : 'italy' 는 프로퍼티이다. let member = { 'name' : 'Jin', 'age' : 30, 'country' : 'italy', sayHello() { alert("안녕하세요."); } } member.s..

JavaScript/기초

[JavaScript] 객체 (2)

계산된 프로퍼티 let color = prompt("색상을 정하세요."); let select = { [color]: "좋아요.", // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다. }; alert( select.blue ); // color에 "blue"이 할당되었다면, 5가 출력됩니다. 단축 프로퍼티 function info(name, age) { return { name, // name : name 과 같다. age // age : age 와 같다. }; } let user = info("Jin", 29); alert(user.name); // Jin 프로퍼티 조회 let user = { name: "Jin", age: 29, region: "Seoul", gender: "Man" }..

JavaScript/기초

[JavaScript] 자료형 종류

숫자형(number) – 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용 bigint – 길이 제약 없이 정수를 나타낼 때 사용 문자형(string) – 하나 혹은 그 이상의 문자로 만들어진 문자열을 나타낼 때 사용 불린형(boolean) – true, false를 나타낼 때 사용 undefined - 할당되지 않은 값 null – 알 수 없는 값 객체형(object) – 복잡한 데이터 구조를 표현할 때 사용 심볼형(symbol) – 객체의 고유 식별자를 만들 때 사용

JavaScript/기초

[JavaScript] 함수 정리(2)

함수 선언식 vs 함수 표현식 vs 화살표 함수 1) 함수 선언식 함수를 선언과 동시에 정의한다. function sayHello() { alert('Hello'); } 2) 함수 표현식 변수를 선언하고 변수에 함수를 할당한다. 이후 변수를 호출하면 함수가 실행된다. let sayHello = function() { alert('Hello'); }l 1) 함수 선언식 함수 선언식은 스크립트의 위치와 상관 없이 어디서든 사용할 수 있다. let region = 'Busan'; if (region == 'Busan') { welcome(); // 1번 실행 -> 고향이 같네요. function welcome() { alert('고향이 같네요.'); } welcome(); // 2번 실행 -> 고향이 같네요...