promotion_dev.log

[코딩테스트] 풀이 2일차

Tue, 14 Mar 2023 07:28:51 GMT

프로그래머스 스쿨 코딩테스트 : 양꼬치

1. 문제

머쓱이네 양꼬치 가게는 10인분을 먹으면 음료수 하나를 서비스로 줍니다. 양꼬치는 1인분에 12,000원, 음료수는 2,000원입니다. 정수 n과 k가 매개변수로 주어졌을 때, 양꼬치 n인분과 음료수 k개를 먹었다면 총얼마를 지불해야 하는지 return 하도록 solution 함수를 완성해보세요.

2. 나의 풀이

❶ 함수 정규식을 이용한 풀이

// 함수 정규식
function solution(n, k) {
    let drink = k * 2000
    let sale = Math.trunc(n/10)
    return (12000*n) + ((k-sale)*2000)
}

}

❷ Tilt틸드문법 ~ : 32비트 정수로 변환한 후 NOT 연산자를 실행 결과적으로는 -(n+1) ~~ : Math.floor와 동등하게 쓰이는 연산자

// 익명함수
let solution = function(n, k){
    k -= ~~(n/10); //n을 10개 이상 먹으면 K에서 뺴준다.
    if (k < 0) k = 0; //k가 -갯수일 때에는 0 처리
    return (n*12000) + (k*2000)
}

solution();

프로그래머스 스쿨 코딩테스트 : 순서쌍의 개수

1. 문제

순서쌍이란 두 개의 숫자를 순서를 정하여 짝지어 나타낸 쌍으로 (a, b)로 표기합니다. 자연수 n이 매개변수로 주어질 때 두 숫자의 곱이 n인 자연수 순서쌍의 개수를 return하도록 solution 함수를 완성해주세요.

2. 나의 풀이

❶ 함수 정규식을 이용한 풀이

다중 for문을 통해서 곱셈을 반복해서 a*b = n이 나오는 식
조건이 성립하는 경우 result +1 값으로 순서쌍 체크

해당 코드는 무한루프 발생 > 왜 그런지 잘 모르겠음

// 함수 정규식
function solution (n) {
  let result = 0;
  for(let a = 1; a <= n; a++) {
      for(let b = 1; b <= n; b++) {
      if((a * b) == n) result += 1;
  } 
}    
return result;
}

❷ 간단한 계산

a로 n을 나누었을 때, 나머지가 0이면 성립
6 = (16) (23) (32) (61) 모두 성립
for문을 통해서 1개의 변수만으로 체크 가능

function solution(n) {
    var answer = 0;
    for(let i = 0;i<=n;i++){
        if(n % i === 0 ){
            answer += 1
        }
    }
    return answer;
}

[코딩테스트] 풀이 1일차

Mon, 13 Mar 2023 08:08:21 GMT

프로그래머스 스쿨 코딩테스트 : 두 수의 합

1. 문제

정수 num1과 num2가 주어질 때, num1과 num2의 합을 return하도록 soltuion 함수를 완성해주세요.

2. 나의 풀이

❶ 함수 정규식을 이용한 풀이

// 함수 정규식
function solution(num1, num2) {
    const result = num1 + num2
    return result;
}

❷ 익명함수를 이용한 풀이

// 익명함수
let solution = function(a, b){
    const result = a + b
    return result;
}

solution();

❸ 화살표 함수를 이용한 풀이

// 화살표 함수
let solution = (a,b) => a + b;

solution();

3. 다른 풀이

num1과 num2의 값의 범위를 다중조건으로 지정

function solution(num1, num2) {    
    if(-50000<=num1 && num1<=50000){
        if(-50000<=num2 && num2<=50000){
            const answer = num1 + num2;

            return answer;
        }
    }
}

프로그래머스 스쿨 코딩테스트 : 두 수의 차

1. 문제

정수 num1과 num2가 주어질 때, num1에서 num2를 뺀 값을 return하도록 soltuion 함수를 완성해주세요.

2. 나의 풀이

❶ 함수 정규식을 이용한 풀이

//정규식
function solution(num1, num2) {
    result = num1 - num2
    return result;
}

❷ 익명함수를 이용한 풀이

//익명함수
const solution = function(a,b) {
    const result = a-b
    return result;
}

solution();

❸ 화살표 함수를 이용한 풀이

const solution = (a,b) => {
    const result = a - b
    return result;
}

solution();

프로그래머스 스쿨 코딩테스트 : 두 수의 곱

1. 문제

정수 num1, num2가 매개변수 주어집니다. num1과 num2를 곱한 값을 return 하도록 solution 함수를 완성해주세요.

2. 나의 풀이

❶ 함수 정규식을 이용한 풀이

//정규식
function solution(num1, num2) {
    const result = num1 * num2
    return result;
}

❷ 익명함수를 이용한 풀이

//익명함수
const solution = function(a,b) {
    const result = a*b
    return result;
}

solution();

❸ 화살표 함수를 이용한 풀이

const solution = (a,b) => {
    const result = a * b
    return result;
}

solution();

프로그래머스 스쿨 코딩테스트 : 몫 구하기

1. 문제

정수 num1, num2가 매개변수로 주어질 때, num1을 num2로 나눈 몫을 return 하도록 solution 함수를 완성해주세요.

2. 나의 풀이

parseInt: 문자열로 변환 > 정수를 반환 : 문자열에서 숫자를 추출하는 용도. Math.floor : 작은 정수 중에서 가장 가까운 큰 수 Math.trunc: 몫을 구하기 위해 함수를 이용하여, 소숫점 이하는 버리게 된다. (반올림X)

❶ 함수 정규식을 이용한 풀이

//정규식
function solution(num1, num2) {
    const result = Math.trunc(num1 / num2)
    return result;
}

❷ 익명함수를 이용한 풀이

//익명함수
function solution(num1, num2) {
    const result = Math.trunc(num1 / num2)
    return result;
}
solution();

❸ 화살표 함수를 이용한 풀이

const solution = (a,b) => {
    const result = Math.trunc(a/b)
    return result; 
}

solution();

프로그래머스 스쿨 코딩테스트 : 나머지 구하기

1. 문제

정수 num1, num2가 매개변수로 주어질 때, num1를 num2로 나눈 나머지를 return 하도록 solution 함수를 완성해주세요.

2. 나의 풀이

Math.trunc: 몫을 구하기 위해 함수를 이용하여, 소숫점 이하는 버리게 된다. (반올림X)

❶ 함수 정규식을 이용한 풀이

//정규식
function solution(num1, num2) {
    const result = (num1 % num2)
    return result
}

프로그래머스 스쿨 코딩테스트 : 나이 출력

1. 문제

머쓱이는 40살인 선생님이 몇 년도에 태어났는지 궁금해졌습니다. 나이 age가 주어질 때, 2022년을 기준 출생 연도를 return 하는 solution 함수를 완성해주세요.

2. 나의 풀이

나이를 연도로 변환해라 : ( 2022년 - age ) + 1
우리가 나이를 세는 것과 동일

❶ 함수 정규식을 이용한 풀이

function solution(age) {
    const birth = (2022 - age) + 1;
    return birth;
}

❷ 화살표 함수를 이용한 풀이

const solution = (age) => {
    const birth = (2022 - age) +1;
    return birth;
}
solution();

3. 다른 풀이

Date() : 날짜를 저장하거나 / 날짜와 관련된 메서드 저장
getFullYear() : 연도 (네 자릿수)를 반환합니다.

1.현재의 날짜를 출력 가능

let now = new Date();
alert( now ); // 현재 날짜 및 시간이 출력됨

2.날짜의 구성요소 얻기

getFullYear() 연도(네 자릿수)를 반환합니다.
getMonth() 월을 반환합니다(0 이상 11 이하).
getDate() 일을 반환합니다(1 이상 31 이하). 어! 그런데 메서드 이름이 뭔가 이상하네요.
getHours(), getMinutes(), getSeconds(), getMilliseconds() 시, 분, 초, 밀리초를 반환합니다.

//getFullYear에서 2023년이 출력된다.
function solutin(age) {
    return new Date().getFullYear() - age + 1;
}

프로그래머스 스쿨 코딩테스트 : 각도기

1. 문제

각에서 0도 초과 90도 미만은 예각, 90도는 직각, 90도 초과 180도 미만은 둔각 180도는 평각으로 분류합니다. 각 angle이 매개변수로 주어질 때 예각일 때 1, 직각일 때 2, 둔각일 때 3, 평각일 때 4를 return하도록 solution 함수를 완성해주세요.

2. 나의 풀이

다중 조건을 이용한 각도계산

❶ 함수 정규식을 이용한 풀이

function solution(angle) {
    if (angle > 0 && angle < 90) {
        return 1;  
    } else if (angle === 90) { 
        return 2;
    } else if (angle > 90 && angle < 180) {
        return 3; 
    } else if (angle === 180) {
        return 4
    } else {
        console.log("각도를 다시 입력해주세요.")
    }
}

3. 다른 풀이

❶ 삼항연산자를 이용한 풀이 조금 더 코드가 깔끔해진다. 하지만 190도인 경우에도 4가 나와서 이 코드는 '예외처리' 에서 100% 정확하지는 않는 것 같다.

function solution(angle) {
    return angle < 90 ? 1 : angle === 90 ? 2 : angle < 180 ? 3: 4;
}

❷ filter를 이용한 풀이

filter() 메서드는 주어진 함수의 테스트를 통과(true)하는 모든 요소를 모아 새로운 배열로 반환합니다.
length를 통해서 [0,90,91,180] 가 배열값이 1,2,3,4 값을 갖게 했습니다.
배열의 길이 = length

function solution(angle){
    return [0,90,91,180].filter(x => angle>=x).length;
}

프로그래머스 스쿨 코딩테스트 : 짝수의 합

1. 문제

정수 n이 주어질 때, n이하의 짝수를 모두 더한 값을 return 하도록 solution 함수를 작성해주세요.

2. 나의 풀이

다중 조건을 이용한 각도계산

❶ 함수 정규식을 이용한 풀이

초큼 어려웠다..
n 이하의 짝수를 어떻게 구하지? : 반복문
수들을 어떻게 담지 ? : 빈 객체 result 생성후 반복문
그들의 합은 : result += i를 통해 조건이 통하가면 더해가는 방식

function solution(n) {
    let result = 0; 
    for (let i = 0; i <= n; i++) {
        if (i % 2 === 0) result += i
    }
    return result
}

3. 다른 풀이

❶ 수열 공식을 이용한 풀이

n이하의 짝수의 합의 패턴을 찾아라.

(n/2)*(n+1)

1 = 1 > 1 > 1*0 2 = 2 > 2 > 2*1 3 = 2 > 2 > 2*1 4 = 2,4 > 6 > 3*2 5 = 2,4 > 6 > 3*2 6 = 2,4,6 > 12 > 4*3 7 = 2,4,6 > 12 > 4*3 8 = 2,4,6,8 > 20 > 5*4 9 = 2,4,6,8 > 20 > 5*4 10 = 2,4,6,8,10 > 30 > 6*5

함수에 그대로 대입

function solution(n) {
    var half = Math.floor(n/2);
    return half*(half+1)
}

[Javascript] 객체 순회

Sun, 12 Mar 2023 13:39:40 GMT

이 글의 목적

📌 객체 순회를 잘 알아두면 남들이 읽은 코드에 대해서 두려움을 줄여준다고 합니다.

객체 순회

Object.keys,values,entries

개별 자료 구조에서 순회(iteration)에 관한 메서드들은 여러개가 있습니다. map.keys() map.values() map.entires() 이 메서드들은 포괄적인 용도로 만들어졌기 때문에 메서드를 적용할 자료구조는 일련의 합의를 준수해야 합니다.

Oject keys, values, entries 일반 객체엔 다음과 같은 메서드를 사용할 수 있습니다.

Object.keys() : 객체 속성의 이름을 배열로 반환합니다.
Object.values() : 객체 속성의 값들을 반환합니다.
Object.entries() : 객체 쌍[키, 값]의 배열을 반환합니다.

// Object.keys()의 예시
const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// Expected output: Array ["a", "b", "c"]


// Object.entries()의 예시
const object1 = {
  a: 'somestring',
  b: 42
};

for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

// Expected output:
// "a: somestring"
// "b: 42"

객체 변환하기

객체엔 map filter 같은 배열 전용 메서드를 사용할 수 없습니다. 하지만 Object.entries와 Object.fromEntries를 순차적으로 적용하면 객체에도 배열 전용 메서드 사용할 수 있습니다.

구조 분해 할당

개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 합니다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 하죠.

이럴 때 객체나 배열을 변수로 '분해'할 수 있게 해주는 구조 분해 할당(destructuring assignment)을 사용할 수 있습니다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해는 그 진가를 발휘합니다.

배열 분해하기

배열은 어떻게 분해할 수 있을까요? 구조 분해 할당을 이용할 수 있습니다.

let arr = ["Bora", "Lee"]

//구조 분해 할당을 이용해 firstNamer과 surname을 할당
let [firstName, surname] = arr;

alert(firstName); //Bora
alert(surname); //Lee

split를 이용한 방법 분해(destructuring)는 파괴(destructive)를 의미하지 않습니다.

let [firstName, surname] = "Bora Lee".split('');

기본값 설정하기 =를 이용하면 할당할 값이 없을 때 기본으로 할당해 줄 값인 기본값(default value)을 설정할 수 있습니다.

let [name = "당근마겟",  surname = "0203"] = ["Julius"];

alert(name);
alert(surname);

콜론은 '분해하려는 객체의 프로퍼티: 목표 변수' 와 같은 형태로 사용합니다. 배열 혹은 함수의 매개변수에서 했던 것처럼 객체에도 표현식이나 함수 호출을 기본값으로 할당할 수 있습니다.

let없이 구조 분해하여 할당하기

let 없이 변수 선언하기
(...) 중괄호를 통해 표현식으로 인식하게 만들기
```
let title, width, height;
```

// 에러가 발생하지 않습니다. ({title, width, height} = {title: "Menu", width: 200, height: 100});

alert( title ); // Menu


**중첩 구조 분해**
객체나 배열이 다른 객체나 배열을 포함하는 경우, 좀 더 복잡한 패턴을 사용하면 중첩 배열이나
객체의 정보를 추출할 수 있습니다. 이를 중첩 구조 분해(nested destructuring)이라고 합니다.
```javascript
let options = {
    size: {
        width: 100,
        height: 200
    },
    items: ["Cake", "Donut"],
    extra: true
};

//코드를 여러 줄에 걸쳐 작성해 의도하는 바를 명확히 드러냄
let {
    size: {
        width,
        height
},
      items: [item1, item2],
    title = "Menu"
} = options;

함수 매개변수 함수에 매개변수가 많은데 이 중 상당수는 선택적으로 쓰이는 경우가 있습니다.

let options = {
    title: "My menu",
    items: ["Item1", "Item2"]
};

//똑똑한 함수는 전달받은 객체를 분해해 변수에 즉시 할당함
function showMenu({title = "Untitled, width = 200, height= 300, items = []}) {
    alert(`${title} ${width} ${height}`);
    alert(item);
}

showMenu(options);

[Javascript] 객체 new연산자와 생성자 함수

Fri, 10 Mar 2023 11:54:51 GMT

이 글의 목적

📌 new 연산자와 생성자 함수에 대해서 알아봅니다. 객체를 보다 쉽게 복제하여 유사한 객체 여러 개를 쉽게 만들 수 있습니다

new연산자와 생성자 함수

1.new 연산자

우리가 서비스를 구성할 때 {이름과 주민등록번호를 넣는 객체}가 있습니다. 매번 신규고객이 생길때마다 새로운 객체들을 매번 생성하기는 힘든 부분인데요.

이것을 new라는 생성자로 해결할 수 있습니다. 재사용 할 수 있는 함수를 만들어 신규고객이 생기면 {이름, 주민등록번호} 를 가지는 객체를 매번 생성하는 것입니다.

객체 리터럴 {...}을 사용하면 객체를 쉽게 만들 수 있습니다. 그런데 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 합니다. 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현 하는 경우가 그런데, new 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있습니다.

생성자 함수

생성자함수(constructor function)와 일반 함수에 기술적 차이는 없습니다. 다만 생성자 함수는 아래 두 관례를 따릅니다.

함수 이름의 첫 글자는 대문자로 시작합니다.
반드시 new 연산자를 붙여 실행합니다.

function User(name) {
    this.name = name;
    this.isAdmin = false;
}

let user = new User("보라");

alert(user.name);
alert(user.isAdmin);

new User(...)를 써서 함수를 실행하면 아래와 같은 알고리즘이 동작합니다.

빈 객체를 만들어 this에 할당합니다.
함수 본문을 실행합니다. this에 새로운 프로퍼티를 추가해 this를 수정합니다.
this를 반환합니다.

** prototype**

Number.prototype.sample = 10

생성자와 return문

생성자 함수엔 return문이 존재하지 않는다. 반환해야 할 것들은 모두 this에 저장되고, 자동으로 반환되기 때문에.

그런데 return 문이 있다면 어떤 일이 벌어질까요? 사실 리턴문이 있는 생성자 함수는 거의 없다.

객체를 return한다면 this 대신 객체가 반환됩니다.
원시형을 return한다면 return문이 무시됩니다.

function BigUser(){
    this.name = "원숭이";

    return {name: "고릴라"};
}

alert( new BigUser().name); // 고릴라가 나온다. return이 this문을 무시했다.

생성자 내 메서드

function User(name) {
    this.name = name;

    this.sayHi = function(){
        alert("제 이름은" + this.name + "입니다.");
    }

let bora = new User("이보라"); //"이보라"가 들어가는 User todtjd
bora.sayHi(); // 제 이름은 이보라 입니다.
}

연습문제

[오답] num은 기본 자료형이므로 메소드가 추가되지 않습니다. num과 같은 기본 자료형은 자료형에 prototype에 메소드를 추가해야 합니다.

한국어
영어

Math.sin()안에는 각도는 꼭 라디안 단위를 써줘야 한다.

라디안 = (도수 * Math.PI) / 180;

라디안(단위 : rad) = 반지름일 때의 중심각 : 57.3도

360도 = 2pirad
180도 = 1pirad

라디안을 사용하는 이유는 '중심각에 따라서 호의 길이와 그 넓이는 정비례 하기 때문에' 호의 길이나 넓이를 구하는데 용이하기 때문이다.

라디안으로 단위를 변환하여 값을 구하면 1이 나온다.

2.prototype 3.sample 같은 특성을 가지는 샘플 값을 만들어 낼 때 사용한다.

[정답풀이] const output = _.orderBy(book, (book) => book.name)

프로퍼티의 이름은 상관없다.
orders는 기본값으로 하면 오름차순으로 정렬된다. console.log(output);

정답은 2. ...은 전개연산자에 사용된다. 객체나 배열을 그대로 받아와 사용할 수 있다.

![](https://velog.velcdn.com/images/promotion_dev/post/a570a21b-e060-421d-8326-771d97290b85/image.png

[https://kinsta.com/blog/javascript-libraries/]

Data visualization in Maps and Charts 통계를 보거나 퍼포먼스 대시보드, 패널 등을 구현하기 위한
DOM Manipulation 자바스크립트를 통해서 화면을 구현합니다. style, 화면랜더링 등을 브라우저에서 직접 작업하지 않고 가상환경에서 빠르게 계산한 후 화면 브라우저에 나타냅니다.
Data Handling 매일 처리하는 엄청난 양의 데이터를 처리합니다.
Database 데이터베이스를 구축하고 테이블 생성, 데이터 동기화 등을 지원합니다.
Forms JS 라이브러리를 사용하여 양식 유효성 검사, 동기화, 필드 제어 등을 처리합니다.
Animations 애니메이션을 활용하여 웹 페이지를 대화형이고 더 매력적으로 만들 수 있습니다.
Image Effects JS 라이브러리를 사용하여 이미지에 효과를 추가하고 눈에 띄게 만들 수 있습니다.

[Javascript] 객체 메서드/this

Fri, 10 Mar 2023 08:31:41 GMT

이 글의 목적

📌 객체의 특성은 메서드를 삽입할 수 있다는 점입니다. 객체와 this를 사용하여 메서드 내에서 동작하는 객체들을 만들어보는 것이 포인트입니다.

객체와 메서드

1.메서드의 사용

1. 객체의 형태

객체는 아래와 같이 key:value로 구성되어 있지만, value에 메서드 형태를 넣어줄 수 있습니다.

let user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30        // 키: "age", 값: 30
};

2. 메서드가 들어간 객체 아래와 같이 user에게 인사할 수 있는 능력을 메서드를 통해 부여해줍시다.

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("안녕하세요!");
};

user.sayHi(); // 안녕하세요!

user.sayHi라는 함수를 객체 프로퍼티에 할당해주었는데요. 이를 통해 객체의 함수를 호출하면 user가 인사해줍니다.

이렇게 객체 프로퍼티에 할당된 함수를 메서드(method)라고 합니다.

3.객체 지향 프로그래밍 이처럼 객체 단위로 특정 기능과 값을 수행하도록 만든 것을 객체 지향 프로그래밍이라고 합니다.

4. 메서드 단축구문

//일반적인 표기 방법
user = {
    sayHi: function(){
    alert("Hello");
    }    
};

//단축 구문
user = {
    sayHi()
        alert("Hello");
}

메서드와 this

메서드는 객체에 저장된 정보에 접근할 수 있어야 제 역할을 할 수 있습니다. 메서드 내부에서 this를 사용하여 객체에 접근할 수 있습니다. this는 객체를 나타냅이다. (메서드를 호출할 때 사용된 객체)

let user = {
  name: "John",
  age: 30,

  sayHi() {
    // 'this'는 '현재 객체'를 나타냅니다.
    alert(this.name);
  }

};

user.sayHi(); // John

함수 내에서 해당 객체만을 불러오길 희망한다면 this를 통하여 사용하면 됩니다.

this가 없는 화살표 함수 화살표 함수는 일반 함수와 달리 고유한 this를 가지지 않습니다. 화살표 함수에서 this를 참조하면, 화살표 함수가 아닌 평범한 외부 함수에서 this 값을 가져옵니다.

let user = {
  firstName: "보라",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // 보라

객체 연습문제

const book = {
    name: "혼자 공부하는 파이썬",
    price: 18000,
    publisher: "한빛미디어",
};

대괄호 []를 통하여 객체에 값을 넣어줄 수 있다.

delete객체[속성]을 이용하여 제거할 수 있다.

메소드 print : object.ko 값을 넣었을 때 번역을 해주는 메소드

[Javascript] 객체

Fri, 10 Mar 2023 07:15:18 GMT

이 글의 목적

📌 javascript에서 key : value 형태로 이루어진 객체를 많이 사용합니다. 객체에 구조와 사용 방법에 대해서 알아봅시다.

객체

1.객체란

1. 객체의 형태 key와 value 쌍으로 이루어진 데이터타입로 {...}안에 key : value 형태로 집어넣습니다.

여기서 우리는 key와 value를 프로퍼티라고 부릅니다.

let user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30        // 키: "age", 값: 30
};

첫 번째 프로퍼티 - name과 John
두 번째 프로퍼티 - age와 30

객체는 서랍장과 같습니다. 내 파일을 열면 나의 이름, 나이가 나와있고, 그렇게 수백개 혹은 수만개의 자료들을 쌓을 수 있습니다. key값과 value값을 알 수 있어 가독성 또한 좋습니다.

원하는 프로퍼티 값 얻기

// 프로퍼티 값 얻기
alert( user.name ); // John
alert( user.age ); // 30

원하는 프로퍼티 삭제

delete user.age;

여러 단어를 조합해 만든 프로퍼티는 따옴표 처리 likes + birds 는 "likes birds"로 처리한다.

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // 복수의 단어는 따옴표로 묶어야 합니다.
};

따옴표 처리한 객체의 변수는 []대괄호 표기법 '대괄호 표기법(square bracket notation)'

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

프로퍼티

key를 활용하여 원하는 프로퍼티를 추출할 수 있게끔 구현할 수 있다.

let user = {
  name: "John",
  age: 30
};

let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");

// 변수로 접근
alert( user[key] ); // John (프롬프트 창에 "name"을 입력한 경우)

계산된 프로퍼티(computed property) 프로퍼티 키가 대괄호로 둘러싸여 있는 경우, 이를 계산된 프로퍼티라고 부릅니다.

객체를 아래와 같이 [fruit]로 정해 가변적으로 바꿀 수 있습니다.
```
let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
```

let bag = { [fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다. };

alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.


- 객체를 비워두고, 마지막에 가변적인 변수를 []대괄호를 이용해 추가할 수 있습니다.
```javascript
let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {};

// 변수 fruit을 사용해 프로퍼티 이름을 만들었습니다.
bag[fruit] = 5;

프로퍼티 함축하기 프로퍼티의 이름과 값이 동일하면 함축이 가능합니다. 이를 프로퍼티 값 단축 구문(propery value shorthand)라고 합니다.

function makeUser(name, age) {
  return {
    name, // name: name 과 같음
    age,  // age: age 와 같음
    // ...
  };
}

프로퍼티 이름의 제약사항

변수에는 예약어를 사용하면 안되지만, 프로퍼티는 가능하다.

// 예약어를 키로 사용해도 괜찮습니다.
let obj = {
  for: 1,
  let: 2,
  return: 3
};

alert( obj.for + obj.let + obj.return );  // 6

in 연산자로 프로퍼티 존재 여부 파악하기 javascript에서는 존재하지 않는 프로퍼티에 접근하려 해도 에러가 발생하지 않습니다. 모두 undefined 로 반환하기 때문입니다.

noSuchProperty 메서드를 이용하여 확인하기
```
let user = {};
```

alert( user.noSuchProperty === undefined ); // true는 '프로퍼티가 존재하지 않음'을 의미합니다.


2. in을 사용하기
``` javascript
"key" in object

객체의 값이 undefined의 경우를 대비하여, 아래처럼 검사해줍니다.
```
let obj = {
test: undefined
};
```

alert( obj.test ); // 값이 undefined이므로, 얼럿 창엔 undefined가 출력됩니다. 그런데 프로퍼티 test는 존재합니다.

alert( "test" in obj ); // in을 사용하면 프로퍼티 유무를 제대로 확인할 수 있습니다(true가 출력됨).



### 객체 순회하기
---
**for in 반복문**
아래처럼 for..in 반복문을 사용해서 객체의 모든 키를 순회할 수 있ㅅ브니다.
아래 예시를 실행하면 객체 `user`의 모든 프로퍼티가 출력됩니다.
```javascript
let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // 키
  alert( key );  // name, age, isAdmin
  // 키에 해당하는 값
  alert( user[key] ); // John, 30, true
}

객체 프로퍼티 동작

프로퍼티에는 순서가 있을까? 반복문을 실행하면 어떤 순서로 순회할까?

객체는 '특별한 방식으로 정렬'됩니다.

정수 프로퍼티 : 자동으로 정렬 (1부터 오름차순으로 차례대로)
그 외 프로퍼티 : 객체에 추가한 순서 그대로 정렬

let codes = {
  "49": "독일",
  "41": "스위스",
  "44": "영국",
  // ..,
  "1": "미국"
};

for (let code in codes) {
  alert(code); // 1, 41, 44, 49
}

위의 예시로 for..in 반복문을 실행하면

정수 프로퍼티에 인해서 1번인 미국부터 41,44,49 차례대로 정렬됩니다.

참조에 의한 객체 복사

객체와 원시 타입의 근본적인 차이 중 하나는 객체는 ‘참조에 의해(by reference)’ 저장되고 복사된다는 것입니다.

let message = "Hello!";
let phrase = message;

예를 들면) 두개의 독립된 변수에 각각 문자열 Hello!가 저장이 됩니다. 객체의 동작방식은 이와 다릅니다.

변수엔 객체가 그대로 저장되는 것이 아닌, 객체가 저장되어 있는 '메모리 주소'인 객체에 대한 '참조값' 이 저장됩니다. 이 말이 무슨 말이냐면

객체는 메모리 내에 따로 저장되고 실행됩니다.
따라서, 객체가 할당된 변수를 복사할 땐 객체의 참조 값이 복사되고 객체는 복사되지 않습니다.
```
let user = { name: 'John' };
```

let admin = user;

admin.name = 'Pete'; // 'admin' 참조 값에 의해 변경됨

alert(user.name); // 'Pete'가 출력됨. 'user' 참조 값을 이용해 변경사항을 확인함


admin의 name을 수정하더라도 user의 name이 수정된 채로 출력되는 것을 볼 수 있습니다.

### 객체 복사, 병합과 Object.assign

객체가 할당된 변수를 복사하면 동일한 객체에 대한 참조 값이 하나 더 만들어진다는 걸 배웠습니다.
그런데 객체를 복제하고 싶다면 어떻게 해야 할까요?

- 아래와 같이 for...in을 통해서 clone이라는 객체 안에 모두 복사할 수 있습니다.
```javascript
let user = {
  name: "John",
  age: 30
};

let clone = {}; // 새로운 빈 객체

// 빈 객체에 user 프로퍼티 전부를 복사해 넣습니다.
for (let key in user) {
  clone[key] = user[key];
}

// 이제 clone은 완전히 독립적인 복제본이 되었습니다.
clone.name = "Pete"; // clone의 데이터를 변경합니다.

alert( user.name ); // 기존 객체에는 여전히 John이 있습니다.

그리고 Object.assign을 사용하는 방법도 있습니다.

dest객체를 목표로하여 src1, src2, scr3을 dest객체에 모두 병합시켜 줍니다.

Object.assign(dest, [src1, src2, src3...])

예시는 아래와 같습니다.

let user = { name: "John" };

let permissions1 = { canView: true };
let permissions2 = { canEdit: true };

// permissions1과 permissions2의 프로퍼티를 user로 복사합니다.
Object.assign(user, permissions1, permissions2);

// now user = { name: "John", canView: true, canEdit: true }

중첩 객체 복사

중첩 안에 중첩이 있는 경우는 어떻게 해야 할까요? 이를 중첩 객체라고 합니다.

let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

alert( user.sizes.height ); // 182

아래와 같이 객체 속의 객체를 변경하기 위해서는 객체.key.key 값을 통해 깊은 복사(deep cloning)를 해주어야 합니다.

let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

let clone = Object.assign({}, user);

alert( user.sizes === clone.sizes ); // true, 같은 객체입니다.

// user와 clone는 sizes를 공유합니다.
user.sizes.width++;       // 한 객체에서 프로퍼티를 변경합니다.
alert(clone.sizes.width); // 51, 다른 객체에서 변경 사항을 확인할 수 있습니다.

[Javascript] 함수 표현식

Fri, 10 Mar 2023 05:44:38 GMT

이 글의 목적

📌 함수 표현식에 대해 알아봅니다.

함수표현식

함수를 생성하고 변수에 함수를 할당해 주는 것.

콜백함수

함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 "나중에 호출(called back)"하는 것이 콜백 함수의 개념.

자바스크립트의 함수 실행

스크립트 실행 전 선언된 함수 선언문을 찾는다.
실행되기 전 "초기화 단계"에서 함수 선언 방식으로 정의한 함수가 생성
함수 선언문이 모두 처리된 이후에서야 실행됩니다.
따라서, 스크립트 어디서든 함수 선언문으로 선언한 함수에 접근할 수 있는 것.

함수표현식은 표현식에 다다랐을 때 만들어집니다. 따라서, 표현식은 선언식과 다르게 코드의 흐름에 따라 실행됩니다.

함수 선언문과 함수 표현식 중 무엇을 선택해야 하나요? 제 경험에 따르면 함수 선언문을 이용해 함수를 선언하는 걸 먼저 고려하는 게 좋습니다. 함수 선언문으로 함수를 정의하면, 함수가 선언되기 전에 호출할 수 있어서 코드 구성을 좀 더 자유롭게 할 수 있습니다.

함수 선언문을 사용하면 가독성도 좋아집니다. 코드에서 let f = function(…) {…}보다 function f(…) {…} 을 찾는 게 더 쉽죠. 함수 선언 방식이 더 “눈길을 사로잡습니다”. 그러나 어떤 이유로 함수 선언 방식이 적합하지 않거나, (위 예제와 같이) 조건에 따라 함수를 선언해야 한다면 함수 표현식을 사용해야 합니다.

화살표 함수 기본

화살표 함수는 본문이 한 줄인 함수를 작성할 때 유용합니다.

중괄호 없이 작성: (...args) => expression – 화살표 오른쪽에 표현식을 둡니다. 함수는 이 표현식을 평가하고, 평가 결과를 반환합니다.
중괄호와 함께 작성: (...args) => { body } – 본문이 여러 줄로 구성되었다면 중괄호를 사용해야 합니다. 다만, 이 경우는 반드시 return 지시자를 사용해 반환 값을 명기해 주어야 합니다.

함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있습니다. 바로 화살표 함수(arrow function)를 사용하는 것입니다. 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌습니다.

나머지 매개변수

...rest는 항상 마지막에 있어야 합니다. arguments도 있으나 잘 사용하지 않는다.

스프레드 문법 (spread syntax)

반대로 배열을 매개변수에 넘겨줄 때 쓰는 문법

Array.from은 유사 배열 객체와 이터러블 객체 둘 다에 사용할 수 있습니다. 스프레드 문법은 이터러블 객체에만 사용할 수 있습니다.

연습문제

// 윤년을 확인하는 함수 만들기
let year = prompt("해당 년도를 입력해주세요", "");
let confirmLeapyear =
  (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
    ? () => alert("윤년입니다.")
    : () => alert("윤년이 아닙니다.");

confirmLeapyear();

let a = Number(prompt("A부터 B까지 더하는 함수의 'A' 값을 입력하시오", ""));
let b = Number(prompt("A부터 B까지 더하는 함수의 'B' 값을 입력하시오", ""));

function sumAll(a, b) {
  let output = 0;
  for (let i = a; i <= b; i++) {
    output += i;
  }
  return output;
}

alert(`${a}부터 ${b}까지 모든 수의 합은 ${sumAll(a, b)} 입니다.`);

//최솟값 구하는 함수 만들기

function min(array){
    let output = array[0]
    for (const item of array) {
        if (output > item){
        output = item        
}
}
    return output
}

const testArray = [23,54,643,52,12]
console.log(`${min(testArray)}`)

function multiplyAll(a, b) {
  let output = 1
  for (let i = a; i <= b; i++) {
    output *= i
  }
  return output;
}
console.log(multiplyAll(1,2));
console.log(multiplyAll(1,3));

//array 매개변수로 받아들여 연산

const max = function(array) {
    let output = array[0]
    for (const item of array) {
        if(output < item)
        output = item
    }
    return output
}

console.log(max([1,2,3,4]))

//...array를 사용하여 배열로 받아들임
const max = function(...array) {
    let output = array[0]
    for (const item of array) {
        if(output < item)
        output = item
    }
    return output
}

console.log(max(1,2,3,4))

const max = function(first, ...rests) {
    //변수 선언하기
    let output
    let items

    if(Array.isArray(first)) {
        output = first[0]
        items = first
    } else if (typeof(first) === 'number') {
        output = first
        items = rests
    }

    for (const item of items){
        if(output < items)
        output = items
    }
    return output
}


console.log(`max(배열): ${max([1,2,3,4])}`)
console.log(`max(숫자, ...): ${max(1,2,3,4)}`)

// number에 filter를 이용하여 조건에 맞는 배열 추출
let numbers = [273,25,75,52,103,32,57,24,76]

numbers = numbers.filter((x) => x % 2 == 1)
numbers = numbers.filter((x) => x <= 100)
numbers = numbers.filter((x) => x % 5 == 0)


console.log(numbers)

//forEach를 이용하여 value와 index 값 호출
const array = ['사과','배','귤','바나나']

array.forEach((value, index) => {
    console.log(index)
})
array.forEach((value, index) => {
    console.log(value)
})

[Javascript] 배열과 반복문

Thu, 09 Mar 2023 05:54:43 GMT

이 글의 목적

📌 배열과 반복문에 대해서 공부합니다. 자바스크립트에서 배열이라는 자료구조를 이용하고 반복문을 통하여 반복되는 행동에 대한 자동화를 만들 수 있습니다.

배열

배열의 구조는 아래와 같습니다.

let arr = new Array();
let arr = [];

[] 브라킷
배열은 자료를 엑셀처럼 구조화 하는데 용이합니다.
새로운 변수를 입력하기 용이합니다.
switch문 = 복수의 if 조건을 switch문으로 변환 가능

각자의 문법이 어떻게 쓰이는지 예시를 들어가면서 알아보겠습니다.

반복문

배열

1. 배열

배열은 순서가 있는 형태의 데이터를 담기에 용이합니다. 데이터의 순서가 없다면 매번 "해당이름"을 출력해야 합니다.

선언

1. 빈 배열 선언하기

let arr = new Array();
let arr = [];

위에서도 잠시 언급했지만 new Array() 문법을 사용해도 배열을 만들 수 있습니다.
대괄호 []를 사용하면 더 짧은 문법으로 배열을 만들 수 있기 때문에 new Array()는 잘 사용되지 않는 편입니다.

2. 요소를 넣어 배열 선언하기

let animals = ["원숭이", "사자", "호랑이"];

3. 다차원 배열(multidimensional array) - 행렬

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

alert( matrix[1][1] ); // 5, 중심에 있는 요소

특성 : idex 순서에서 나오는 특성

1. 각 배열에는 순서가 생기는데 이를 index라고 합니다.

index는 0부터 시작합니다.
원숭이는 0번, 사자는 1번, 호랑이는 2번 인덱스
```
let animals = ["원숭이", "사자", "호랑이"];
```

2. 특정 요소만 뽑아낼 수 있습니다.

let animals = ["원숭이", "사자", "호랑이"];

alert(animals[0]); //원숭이
alert(animals[1]); //사자
alert(animals[2]); //호랑이

3. 특정 요소를 수정 또는 추가 할 수 있습니다.

let animals = ["원숭이", "사자", "호랑이"];

//2번에 사자를 빼고 고래를 넣자
animals[2] = '고래'; // 사자 대신 고래를 넣습니다.
console.log(animals); // [원숭이, 고래, 호랑이] 가 출력

//3번에 고릴라를 추가하고 싶어
animals[3] = '고릴라'; // 고릴라를 3번에 추가할게
console.log(animals); // [원숭이, 고래, 호랑이, 고릴라] 가 출력

4. length를 사용하면 배열에 담긴 요소가 몇 개인지 알 수 있습니다.

let animals = ["원숭이", "사자", "호랑이"];

console.log(animal.length); // 요소가 3개 있어 3이 출력됩니다.

5. 배열 요소의 자료형에 제약이 없습니다.

이름, 숫자, Boolean, 함수를 넣을 수 있습니다.

// 요소에 여러 가지 자료형이 섞여 있습니다.
let arr = [ '사과', { name: '이보라' }, true, function() { alert('안녕하세요.'); } ];

// 인덱스가 1인 요소(객체)의 name 프로퍼티를 출력합니다. alert( arr[1].name ); // 이보라

// 인덱스가 3인 요소(함수)를 실행합니다. arr3; // 안녕하세요.

---
### 스택 (STACK), 큐(QUEUE) 개념/비교 /활용 예시

[표] 한 눈에 비교하기

|    |큐(QUEUE) |스택(STACK)
|:----:|:----|:----
|사전적의미|롤에서 '큐'를 돌린다.|영어단어 '쌓다'의 의미
|구조설명|자료가 들어와 차례대로 나간다.   |자료를 위에서 차곡차곡 쌓는 형태  
|선출방식|**FIFO**, First In FirstOut   |  **LIFO**, Last In First Out  
|설명|먼저 들어온 놈이 먼저 나간다   |책을 빼려면 맨 위에부터 뺴야해
|데이터삽입|**push** 로 위부터 쌓는다.|**push** 로 위부터 쌓는다.  
||**unshift** 로 맨앞에 쌓는다. (느림)   |
|데이터삭제|**shift** 로 맨 밑에부터 꺼낸다.(느림)  |**pop** 로 위부터 빼낸다.
|실제사례|롤에서 큐 돌릴 때 / 캐치테이블 |웹 방문기록 / 실행취소(undo)  

---

#### pop / push, shift / unshift 이 뭐야?
- push - 맨 끝에 요소를 추가합니다.
- pop - 스택 끝에 요소를 추출합니다.
- shift - 맨 밑 요소를 꺼내 제거한 후, 모든 요소들을 앞으로 밀어줍니다.
- unshift - 맨 앞에 쌓는다. 모든 요소들의 순서(index) 뒤로 밀린다. 

--- 
#### 배열 주의사항
배열은 **순서가 있는 자료구조**로, 자바스크립트 엔진은 이런 특성을 고려하여 배열을 신중하게 조정하고, 처리하므로 배열을 사용할 땐 이런 목적에 맞게 사용해햐 합니다.
- 자바스크립트의 배열은 순서대로 읽는 구조로 효율화.
- 배열에서 **순서의 중간을 빼먹거나 하면 좋지 않다.**
- **요소를 역순으로 채우는 경우**도 좋지 않다.

 
 

### 반복문 for

**기본구조 **
조건을 ()안에 넣으면 {}를 실행합니다.
``` javascript
// 기본구조
for (조건) {실행문}

*실행예시 * 선언은 let으로 보통 합니다. (변수할당의 변화가 있을 때 대비)

// 실행예시
let arr = ["사과", "포도"]; 
for (i = 0; i < arr.length; i++) { // i가 arr.length까지 i++(계속 더하며) 반복된다.
    alert(arr[i]); // arr[i] 번째 객체를 반복하여 알럿노출
} // arr.length 번째까지 무한반복 -> 이후 종료

of : 배열요소에서 반복 작업을 간단한 조건으로 실행 가능

let으로 새로운 객체로 할당하여 진행
값만 얻을 수 있음 (배열의 순서(index)는 얻을 수 없음.)

// 실행예시 let fruits = ["사과", "포도"]; for (let friut of fruits) { // i가 arr.length까지 i++(계속 더하며) 반복된다. alert(fruit); // arr[i] 번째 객체를 반복하여 알럿노출 } // arr.length 번째까지 무한반복 -> 이후 종료

---
**in : 반복문을 실행할 수 있음.**
```javascript
let arr = ["사과", "오렌지", "배"];

for (let key in arr) {
  alert( arr[key] ); // 사과, 오렌지, 배
}

주의사항 : in 은 모든 프로퍼티를 읽기 때문에, 메서드를 읽을 수 있습니다.

key : value로 이루어진 모든 프로퍼티 대상으로 순회함
메서드나 함수에도 프로퍼티가 존재함.
모든 메서드를 읽으면서 내려가 문제가 생길 수 있음

주의사항 : in 은 배열에는 되도록 쓰지 말 것.

객체를 읽는데에 최적화 되어 있음.
배열에 사용하면 객체에 사용하는 것보다 10~100배 느림
배열에는 되도록 쓰지 말 것.

length 1. length 프로퍼티는 배열 내 요소의 갯수가 아닙니다. = 가장 큰 인덱스에 +1을 더한 값

let fruits = [];
fruits[123] = "사과";

alert( fruits.length ); // 124

fruits[123]은 123번째에 사과를 넣어주었고, length는 가장 큰 index 값 = "사과"에 +1 을 하여 124 출력

2.배열을 줄이면 되돌릴 수 없습니다.

let arr = [1, 2, 3, 4, 5];

arr.length = 2; // 요소 2개만 남기고 잘라봅시다.
alert( arr ); // [1, 2]

arr.length = 5; // 본래 길이로 되돌려 봅시다.
alert( arr[3] ); // undefined: 삭제된 기존 요소들이 복구되지 않습니다.

이런 특징으로 arr.length = 0; 을 이용해서 배열을 비울 수 있음

tooString 배열엔 toString 메서드가 구현되어 있어 이를 호출하면 요소를 쉼표로 구분한 문자열이 반환됩니다.

let arr = [1, 2, 3];

alert( arr ); // 1,2,3
alert( String(arr) === '1,2,3' ); // true

배열과 메서드

요소를 더하거나 지우는 메서드 (7개) push pop shift unshift splice splice( contact

원하는 요소 찾기 메서드 (5개) indexOF/lastIndexOf(item,pos) includes(value) find/filter(func) - func의 반환 값을 true로 만드는 첫 번째/정체 요소를 반환함 findIndex

배열전체순회하기 forEACH(func) 모든 요소에 func를 호출함. 결과는 반환되지 않음

배열 변형하기 map(func) sort(func) reverse() split/jion reduce

splice

특정 요소를 지웁니다.
특정 요소를 지우고 추가합니다.
삭제된 요소를 변수에 넣어 반환도 가능합니다.

slice 특정 배열을 반환시켜 줍니다.

concat 배열끼리 합쳐줍니다.

forEach와 map map, forEach 메소드는 모두 배열을 조회한다는 기능은 동일합니다. 다만 forEach는 별다른 return이 없는 반면 *map은 *새로운 배열을 반환(return)합니다.

forEach 배열을 반복하는데, forEach는 함수를 인수로 받습니다.

함수? (item, index, arr)를 의미

정해진 값을 불러오지만, 반복되는 작업이면 forEach로 해결 가능

map map은 배열 요소 전체를 대상으로 함수를 호출하고, 함수 호출 결과를 배열로 반환해줍니다.

//productNames는 각 product의 name이 들어간 배열이다
var productNames = products.map((product, index) => { 
     return product.name;
});

//React에서는 다음과 같은 방식으로 데이터가 담긴 배열을 화면에 표시합니다.
var productElements = products.map((product,index) =>{ 
    return (
        
            {product.name}
            ...
        
    )
})

indexOf와 lastIndexof 배열에서 특정 값을 찾아냅니다.

find와 findIndex find는 값을 찾아내고 findIndex는 조건에 맞는 Index 값을 찾아낸다.

let result = arr.find(function(item, index, array) {
  // true가 반환되면 반복이 멈추고 해당 요소를 반환합니다.
  // 조건에 해당하는 요소가 없으면 undefined를 반환합니다.
});

사용예제

filter filter는 만족하는 모든 요소를 배열로 변환 find는 만족하는 조건의 단 '하나의 값' 을 찾아낸다.

sort 배열의 요소를 정리해줍니다

숫자는 숫자 순으로
문자는 사전 편집 순으로

compare 두 인자를 비교

reverse 역순으로 정렬시켜주는 메소드

split 문자열을 나눠서 배열로 만들어 줍니다.

join 배열이 쉼표로 구분되서 합쳐진다. 중간에 "ㅋ"처럼 문자열을 입력할 수 있다.

반복문

while 반복문

let i = 0;
while (i < 3) { // 0, 1, 2가 출력됩니다.
  alert( i );
  i++;
}

*do while * 조건이 맨 마지막에 온다. 한번이라도 실행하고 싶을 때

break - 해당 조건 만족 시 종료 continue - 조건 다음부터 실행

for (let i = 0; i < 10; i++) {

  // 조건이 참이라면 남아있는 본문은 실행되지 않습니다.
  if (i % 2 == 0) continue;

  alert(i); // 1, 3, 5, 7, 9가 차례대로 출력됨
}

labelName : for - 중첩 반복문을 빠져나오기 위해 사용 break labelName;

④⑤

① "3" ② "바나나" ③ "32"

console.log(array.length) = 4 console.log(array.push(5)) = ~~[1,2,3,4,5]~~ [오답] push()를 진행하면 요소의 갯수를 반환함으로 5이다.

① 비파괴적처리 - split은 복사하기 때문에 비파괴 ② 파괴적처리 - 원본 데이터에 감이 추가됨 ③ 비파괴적처리 - 원본의 변화없이 map 함수 실행 ④ 비파괴적처리 - trim이 원본의 공백을 삭제하지 하지 않음

#for in 반복문 0 1 2 3

#for of 반복문 사과 배 귤 바나나

[오답[ for에서 const로 선언하면 안된다. let으로 해야한다.

let은 재선언이 불가, 할당 가능
const는 재선언, 할당도 불가하기 때문에 변수를 추가할 수 없어서 사용하면 안된다. arry = [3, 6, 9]

let output = 1

for(i=1; i<101; i++){
    output.push(ouput * i);
}

console.log(`1~100의 숫자를 모두 곱하면, &{output}입니다.`)

[오답풀이] 대입연산자 개념

let output = 1 //output은 1이라고 선언

for(let i=1; i<101; i++){
    output *=i // *= i를 곱한후 output에 대입
}

console.log(`1~100의 숫자를 모두 곱하면, &{output}입니다.`)

for (let = i; i <=5 ; i++) {
    console log(2n-1)    
}

13579 2n-1 7531

[Javascript] if/switch 조건문

Tue, 07 Mar 2023 11:01:22 GMT

이 글의 목적

📌 Javascript의 선언문의 기초에 대해 다뤄봅시다. _if_문과 _switch_문을 통한 코딩을 해봅니다.

Javascript에서 조건에 따라서 값이 변하는 형태를 표현할 때 쓰이는 조건문 문법입니다.

if문 = 단수의 조건을 설정
if else = if에서 여러개 조건을 추가
switch문 = 복수의 if 조건을 switch문으로 변환 가능

각자의 문법이 어떻게 쓰이는지 예시를 들어가면서 알아보겠습니다.

조건문이란 무엇일까?

1. 조건문이란?

조건문은 조건(Condition)에 따라서 로직을 다르게 수행하도록 돕습니다.

예를 들면) 일상생활에서는 나이가 N살 이상 술을 구매할 수 있다. 플랫폼을 예를 들면 유튜브의 악성 컨텐츠는 특정 나이 이하인 고객들에게 노출된다.

주로 사용되는 문법에는 if문과 있습니다.

문법

중괄호()안에 조건을 넣으면 //로직이 출력 되는 간단한 문법입니다.

if(조건) {
    //로직
}

예시 제가 태어난 년도를 입력하는 퀴즈를 낼 수 있습니다.

let year = prompt('제가 태어난 년도는 언제일까요?', '');
if (year == 1991) {
    console.log("정답입니다");
}

코드 실행 Chrome을 실행하고, F12 를 눌러 개발자도구를 열어줍니다.

let을 통해 정의한 year를 입력하는 prompt창이 뜹니다.

prompt 에 맞는 변수를 입력해줍니다.

console.log를 통해서 "정답입니다" 라는 텍스트를 반환합니다.

2. if문의 특징

if문은 괄호 안의 표현식을 평가하고 그 결과를 Boolean갑으로 변환합니다. true와 flase가 되는 조건은 아래와 같습니다.

false가 되는 조건 (falsy값)
0 0의 경우
"" 빈 값
null 값이 비어있는 경우
undefined 변수가 할당되지 않았을 때
NaN Not A Number - 연산과정에서 잘못된 입력 (0으로 나누는 경우)

//0을 넣는 경우
if (0) { // 0은 falsy입니다.
  ...
}

//1을 넣는 경우
if (1) { // 0은 f입니다.
  ...
}

Console창 입력 예시

3. 조건문 - switch

아까 말씀드렸듯이 복수의 if 조건문은 switch 문으로 바꿀 수 있습니다.

switch문은 결과값이 여러개임에 따라서 다른 결과를 호출하게 해줍니다. 따라서 특정 변수를 다양한 상황에서 비교할 수 있게 해줍니다. 그래서 코드 자체가 비교 상활을 잘 설명한다는 장점이 있습니다.

문법

요약 : switch (x) 라는 변수의 결과값이 case의 'value' 에 따라서 다른 값이 출력되고, 출력되면 동작이 break되어 다른 case를 실행하지 않습니다.
switch 중괄호 안에 변수를 넣어줍니다. 또는 계산식(x/2)등도 넣어줄 수 있습니다.
case : 뒤의 ...의 명령문을 실행해줍니다.

예시


switch(x) { 
  case 'value1': //if (x === 'value1')와 같습니다.
    ...          // ...을 실행합니다.
    [break]      // ...을 실행한 후, 멈춥니다. (다른 케이스가 실행되지 않습니다)

  case 'value2': //if (x === 'value2')와 같습니다.
    ...
    [break]

  default :
    ...
    [break]
}

예제풀이를 통해서 다루는 개념적용을 해봅니다.

출처 : 혼자 공부하는 자바스크립트 (윤인성 지음 | 한빛미디어)

문제 1번

① false 출력 : x는 4보다 작기 때문에 ② false 출력 : x는 4보다 작기 때문에 ③ true 출력 : x는 10으로 4보다 크기 때문에

문제 2번

정답은 Number Number a > b a == b

문제 3번

정답은 &&

문제 4번

[문제풀이]

prompt는 숫자를 입력해도 string으로 출력하기에 Number로 문자를 숫자열로 변환 필수

경우의 수는 양수, 0, 음수 그리고 문자의 경우의 수 존재
조건연산자 ?를 이용해서 풀이
alert로 result 출력

//prompt에서 받은 값을 result에서 연산   
let result = (a > 0) ? "양수입니다." :  //양수의 경우
             (a < 0) ? "음수입니다." : //음수의 경우
             (a == 0) ? "0입니다." : //0인 경우
             '숫자가 아닌 문자를 입력하셨습니다.' ;

    alert(result); //연산을 통해 result 출력

문제 5번

[문제풀이] 1. 짝수, 홀수, 0, 문자입력 경우의 수 존재 2. 조건연산자 ?를 이용해서 풀이 3. alert로 result 출력

//prompt에서 받은 값을 result에서 연산
let result = (a%2 == 0) ? "짝수입니다.":
             (a%2 != 0) ? "홀수입니다" :
             (a == 0) ? "0은 짝수랍니다." :
               '숫자가 아닌 문자를 입력하셨습니다.';

    alert(result);

문제 6번

추가정보 : 일반적으로 봄(3~~5월) , 여름(6~~8월), 가을(9~~11월), 겨울(12~~2월)

[문제풀이]

switch와 case를 이용해 25% 확률로 맞추면 break
하지만 오답 출력을 한다.
원인은 case의 경우 정확히 일치하는 값으로 판별 가능

-> 따라서 case의 경우로는 불가

//오답 : switch와 case를 통해서 출력 불가능
switch(a) {
  case (2


[문제풀이]

if와 else if를 통해서 처리
봄 / 여름 / 가을 / 겨울의 경우 처리

  if (3 <= a && a <= 5) {
    alert("봄입니다");
  } else if (6 <= a && a <= 8) {
    alert("여름입니다");
  }    else if (9 <= a && a <= 11) {
    alert("가을입니다");
  } else {
        alert("겨울입니다");
  }

switch 예제
문제1


100은 200보다 작기 때문에 false
ture 값 반환 confirm
확인 = ture, 취소 = false값 반환

문제2

// 태어난 해를 입력받아 12로 나누어 나머지 계산
const rawInput = prompt('태어난 해를 입력해주세요.', '')
const year = Number(rawInput)
const e = year % 12

// result 값에 대한 변수 선언 = 빈 값으로 처리
let result = ''

// switch 문을 이용하여 result값 출력
switch(e) {
  case 5 : result = "소";break;
  case 6 : result = "호랑이";break;
  case 7 : result = "토끼";break;
  case 8 : result = "용";break;
  case 9 : result = "뱀";break;
  case 10 : result = "말";break;
  case 11 : result = "양";break;
  case 12 : result = "원숭이";break;
  case 0 : result = "원숭이";break;
  case 1 : result = "닭";break;
  case 2 : result = "개";break;
  case 3 : result = "돼지";break;
  case 4 : result = "쥐";break;
}

// Template Literal 방식을 통해 변수 {year}와 {result}를 받아 alert로 출력
alert(`${year}년에 태어났다면 ${result} 띠입니다.`)
[문제풀이]

let으로 변수 선언 후 switch에서 계산
하지만 &{year}년

문제3

[문제풀이]
//prompt를 통한 rawInput
const rawInput = prompt('태어난 해를 입력해주세요.', '')
const year = Number(rawInput)

//year를 통한 변수 계산식 설정
let e = (year%10)
let f = (year%12)

//나머지 값으로 12간지를 매칭하여 gan의 변수에 할당
let gan = ''
switch(e) {
  case 5: gan = "경"; break;
  case 6 : gan = "신"; break;
  case 7 : gan = "임"; break;
  case 8 : gan = "계"; break;
  case 9 : gan = "갑"; break;
  case 10 : gan = "을"; break;
  case 11 : gan = "병"; break;
  case 12 : gan = "정"; break;
  case 0 : gan = "무"; break;
  case 1 : gan = "기"; break;
}

//나머지 값으로 10천간을 매칭하여 belt의 변수에 할당
let belt = ''
switch(f) {
  case 5: belt = "자"; break;
  case 6 : belt = "축"; break;
  case 7 : belt = "인"; break;
  case 8 : belt = "묘"; break;
  case 9 : belt = "진"; break;
  case 10 : belt = "사"; break;
  case 11 : belt = "오"; break;
  case 12 : belt = "미"; break;
  case 0 : belt = "신"; break;
  case 1 : belt = "유"; break;
  case 2 : belt = "술"; break;
  case 3 : belt = "해"; break;
}

//alert를 통하여 출력
alert(`${year}년은 [${gan}${belt}년]입니다.`)

문제 4,5

정답은 
4번 ④else
5번 ③true만 출력
문제 6

① 오늘 먹은 아침 / 점심 / 저녁 식사의 칼로리 계산 프로그램

// 아침,점심,저녁 칼로리 Input

② 어떤 은하까지 빛의 속도로 여행하면 10년이 걸릴 때, 그 거리를 구할 수 있을까?

우리는 거=속*시 를 배웠다.
거리 = 속력 * 시간
빛의 속도 = 299,792,458m/s


// 빛의 속도로 역산
const distance = ((299792458/1000) * (10*365*24*60*60))
const kr_distance = distance.toLocaleString('ko-KR');

alert(`어떤 은하까지의 거리는 ${kr_distance}km 입니다.`)

③ 내가 가진 돈으로 국밥 몇그릇 먹는지 계산하는 계산기
const money = Number(prompt("갖고 계신 돈을 말씀해주세요.", '원 단위로 입력해주세요.'))
const quantity = Math.trunc.(money/6000)

alert(`저는 국밥을 ${quantity}개 사먹을 수 있네요.`)