자바스크립트 13

[JS] 자바스크립트 코드중 보이는 `?. ` 이게뭐죠 - 옵셔널 체이닝

* 미리 말하고 가자면 옵셔널 체이닝은 스펙에 추가 된 지 얼마 안된 문법으로 구식 브라우저에서는 폴리필이 필요합니다. * 사건의 개요 - 프로젝트 진행중 user정보의 length값으로 처리해주어야 할 코드가 있었다. 이때 user정보가 잘 들어왔을경우는 괜찮은데 . . . user정보가 없을때 length를 접근하려 하면 에러가 떳다. 그래서 나는 일단 아래와 같이 코드를 짯다. const userLength ; if (user) { userLength = user.length; } else { userLength = null; } //len값을 사용 . . . 그런데 여기서 구글링을 통해 옵셔널 체이닝이라는것을 발견했다! 옵셔널 체이닝 ? - ?. 를 사용하여 프로퍼티가 없는 중첩 객체를 에러 없이..

FE/JavaScript 2022.07.18

[JS] 클로저 (Closure)

들어가기에 앞서, MDN에서 클로저의 정의를 보자 . " 클로저 함수는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. " 클로저를 알기 전 '렉시컬 스코프' 에 대해 알아보자. 🚀 렉시컬 스코프 (정적 스코프) - 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. - 함수가 호출된 위치는 상위 스코프 결정에 어떤 영향도 주지 않는다. - 함수의 상위 스코프는 언제나 자신이 정의된 스코프다. ( 함수가 호출될 때마다 함수의 상위 스코프를 참조할 필요가 있기 때문) 🚀 클로저 - 폐쇄된 공간 안에 데이터에 접근하기 위한 테크닉 - 내부함수의 외부 함수 접근(권한) 테크닉 - 변수 은닉과 메모리 효율, 코드효율을 극대화 하기위해 사용 const..

FE/JavaScript 2022.05.11

[JS] 구조분해 할당

🚀구조 분해 할당이란 ? - 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JS 표현식이다. - 디스트럭처링 할당이라고도 부른다. - 구조 분해 할당 구문이 없던 ES5에선 다음과 같이 할당 하였다. var categories = ['IT', 'life', 'TIL']; // 할당을 해주고자 하는 배열 var category1 = categories[0]; var category2 = categories[1]; var category3 = categories[2]; console.log(category1, category2, category3); // IT life TIL 위 코드와 같이 배열의 인덱스를 활용하여 요소에 접근하는 방법을 사용했다. 하지만 n개를 할당해줄시 n줄의..

FE/JavaScript 2022.05.11

[JS] for of 과 for in

🚀 in ? in 연산자는 객체 내 특정 프로퍼티가 존재하는지 여부를 확인한다. const person ={ name:'delina', age:24 }; console.log('name' in person); //true console.log('address' in person); //false name 프로퍼티는 person객체에 있으므로 true, address 프로퍼티는 person객체에 없으므로 false 🚀 for in ? 객체의 모든 프로퍼티를 순회하며 열거하기 위해 사용한다. const person ={ name:'delina', age:24 }; for (const key in person){ console.log(key +':'+person[key]); } - 이때 기본적으로 key값이 ..

FE/JavaScript 2022.05.11

[JS] 배열 - splice() , slice() 차이

🚀 splice() - 배열 내에 새로운 요소의 추가 가능하다. - 배열 내 특정 요소를 제거 할 수 있다. - 원본 배열이 변경된다. [사용법] 배열.splice(요소를 위치시키고자 하는 인덱스, 제거할 요소의 개수, 배열에 추가할 요소) 만약 배열 내 새로운 요소를 추가만 하고싶다면 2번째 인덱스에 0을 사용하면 된다. const cafe = ['coffee', 'cake', 'tea', 'cookie'] cafe.splice(1, 0, 'bread') cafe //1번째 인덱스에 bread를 추가한 cafe 배열 //expected output: ['coffee', 'bread', 'cake', 'tea', 'cookie'] 특정요소를 삭제하고 싶다면, 다음과 같이 사용하면 된다. 배열.splice..

FE/JavaScript 2022.05.03

[프로그래머스 코딩테스트] - 키패드 누르기 (JavaScript)

이 전화 키패드에서 왼손과 오른손의 엄지손가락만을 이용해서 숫자만을 입력하려고 합니다. 맨 처음 왼손 엄지손가락은 * 키패드에 오른손 엄지손가락은 # 키패드 위치에서 시작하며, 엄지손가락을 사용하는 규칙은 다음과 같습니다. 1. 엄지손가락은 상하좌우 4가지 방향으로만 이동할 수 있으며 키패드 이동 한 칸은 거리로 1에 해당합니다. 2. 왼쪽 열의 3개의 숫자 1, 4, 7을 입력할 때는 왼손 엄지손가락을 사용합니다. 3. 오른쪽 열의 3개의 숫자 3, 6, 9를 입력할 때는 오른손 엄지손가락을 사용합니다. 4. 가운데 열의 4개의 숫자 2, 5, 8, 0을 입력할 때는 두 엄지손가락의 현재 키패드의 위치에서 더 가까운 엄지손가락을 사용합니다. 4-1. 만약 두 엄지손가락의 거리가 같다면, 오른손잡이는 오..

[프로그래머스 코딩테스트] - 숫자 문자열과 영단어 (JavaScript)

[매개변수] s : 일부 자릿수가 영단어로 바뀌어졌거나 , 바뀌지않고 그대로인 문자열 return값 : s가 의미하는 원래 숫자 [제한사항] 1 ≤ s의 길이 ≤ 50 s가 "zero" 또는 "0"으로 시작하는 경우는 주어지지 않습니다. return 값이 1 이상 2,000,000,000 이하의 정수가 되는 올바른 입력만 s로 주어집니다. [풀이] function solution(s) { let numbers = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"]; var answer = s; for (let i=0;i

[프로그래머스 코딩테스트] - 로또의 최고 순위와 최저 순위 (JavaScript)

로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다. [매개변수] lottos : 민우가 구매한 로또 번호를 담은 배열 win_nums : 당첨번호를 담은 배열 return값 : 당첨가능한 최고순위,최저순위 [max,min] [제한사항] lottos는 길이 6인 정수 배열입니다. lottos의 모든 원소는 0 이상 45 이하인 정수입니다. 0은 알아볼 수 없는 숫자를 의미합니다. 0을 제외한 다른 숫자들은 lottos에 2개 이상 담겨있지 않습니다. lottos의 원소들은 정렬되어 있지 않을 수도 있습니다. win_nums은 길이 6인 정수 배열입니다. win_nums의 모든 원소는 1 이상 45 이하인 정수..

[프로그래머스 코딩테스트] - 신규 아이디 추천 (JavaScript)

새로 가입하는 유저들이 카카오 아이디 규칙에 맞지 않는 아이디를 입력했을 때, 입력된 아이디와 유사하면서 규칙에 맞는 아이디를 추천해주는 프로그램 [매개변수] new_id : 신규 유저가 입력한 아이디 [제한사항] 아이디 길이는 3자이상 15자 이하 아이디는 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.) 문자만 사용할 수 있음 단, 마침표(.)는 처음과 끝에 사용할 수 없으며 또한 연속으로 사용할 수 없음 [처리단계] 1단계 new_id의 모든 대문자를 대응되는 소문자로 치환합니다. 2단계 new_id에서 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.)를 제외한 모든 문자를 제거합니다. 3단계 new_id에서 마침표(.)가 2번 이상 연속된 부분을 하나의 마침표(.)로 치환합니..

[JS] 변수와 호이스팅

변수란? 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름. 즉, 값의 위치를 가리키는 상징적인 이름이다. 식별자? 어떤값을 구별해서 식별할 수 있는 고유한 이름. 변수이름을 식별자 라고도 한다. 식별자는 값이 아닌 메모리 주소를 기억하고있다. 즉, 식별자로 값을 구별한다는 것은 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 의미다. *식별자라는 용어는 변수이름에만 국한해서 사용하지 않고 변수,함수,클래스등의 이름 모두 식별자로 쓰인다. 변수선언? 변수를 생성하는 것. 자세히 말하면 값을 저장하기 위한 메모리 공간을 확보하고, 변수이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는것이다. 변..

FE/JavaScript 2022.02.13